@skyux/list-builder 5.0.0-beta.0 → 5.0.1

package/fesm2015/skyux-list-builder.js

@@ -1,15 +1,23 @@
-import { __decorate } from 'tslib';
-import { Injectable, EventEmitter, Input, Output, ContentChildren, Component, ChangeDetectionStrategy, NgModule, ViewChild, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef } from '@angular/core';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, NgModule, TemplateRef, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { BehaviorSubject, Observable, Subject, of, combineLatest } from 'rxjs';
 import { map, take, distinctUntilChanged, takeUntil, skip, flatMap, scan } from 'rxjs/operators';
 import { ListItemModel, getData, compare, AsyncList, AsyncItem, StateOrchestrator, StateDispatcher, StateNode, getValue, isObservable } from '@skyux/list-builder-common';
+import * as i3 from '@skyux/lists';
 import { SkyFilterModule, SkyPagingModule, SkySortModule } from '@skyux/lists';
-import { getStringForLocale, SKY_LIB_RESOURCES_PROVIDERS, SkyI18nModule } from '@skyux/i18n';
+import * as i5 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3$1 from '@skyux/indicators';
 import { SkyIconModule } from '@skyux/indicators';
+import * as i2 from '@skyux/popovers';
 import { SkyDropdownModule } from '@skyux/popovers';
+import * as i3$2 from '@skyux/layout';
 import { SkyToolbarModule } from '@skyux/layout';
+import * as i8 from '@skyux/lookup';
 import { SkySearchComponent, SkySearchModule } from '@skyux/lookup';
+import * as i5$1 from '@skyux/forms';
 import { SkyCheckboxModule } from '@skyux/forms';
 
 class ListDataRequestModel {
@@ -152,15 +160,15 @@ class ListSearchModel {
     }
 }
 
-let idIndex = 0;
+let idIndex$3 = 0;
 class SkyListInMemoryDataProvider extends ListDataProvider {
     constructor(data, searchFunction) {
         super(data);
         this.items = new BehaviorSubject([]);
         this.searchFunction = searchFunction;
         if (data) {
-            data.subscribe(items => {
-                this.items.next(items.map(d => new ListItemModel(d.id || `sky-list-data-in-memory-provider-item-${++idIndex}`, d)));
+            data.subscribe((items) => {
+                this.items.next(items.map((d) => new ListItemModel(d.id || `sky-list-data-in-memory-provider-item-${++idIndex$3}`, d)));
             });
         }
     }
@@ -174,20 +182,20 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
                 let pagedResult = result.slice(itemStart, itemStart + request.pageSize);
                 return new ListDataResponseModel({
                     count: result.length,
-                    items: pagedResult
+                    items: pagedResult,
                 });
             }
             else {
                 return new ListDataResponseModel({
                     count: result.length,
-                    items: result
+                    items: result,
                 });
             }
         }));
     }
     filteredItems(request) {
         const showSelectedId = ['show-selected'];
-        return this.items.pipe(map(items => {
+        return this.items.pipe(map((items) => {
             let dataChanged = false;
             let search = request.search;
             let sort = request.sort;
@@ -201,7 +209,7 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
             if (request.isToolbarDisabled) {
                 searchChanged = true;
                 search = new ListSearchModel();
-                filters = filters.filter(f => showSelectedId.indexOf(f.name) >= 0);
+                filters = filters.filter((f) => showSelectedId.indexOf(f.name) >= 0);
                 filtersChanged = true;
             }
             else {
@@ -216,11 +224,13 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
             this.lastFilters = filters;
             let result = items;
             // Apply filters.
-            if (!dataChanged && !filtersChanged && this.lastFilterResults !== undefined) {
+            if (!dataChanged &&
+                !filtersChanged &&
+                this.lastFilterResults !== undefined) {
                 result = this.lastFilterResults;
             }
             else if (filters && filters.length > 0) {
-                result = result.filter(item => {
+                result = result.filter((item) => {
                     for (let i = 0; i < filters.length; i++) {
                         let filter = filters[i];
                         if (filter.value === undefined ||
@@ -241,10 +251,16 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
                 this.lastFilterResults = undefined;
             }
             // Apply search.
-            if (!dataChanged && !searchChanged && this.lastSearchResults !== undefined && !filtersChanged) {
+            /* istanbul ignore next */
+            if (!dataChanged &&
+                !searchChanged &&
+                this.lastSearchResults !== undefined &&
+                !filtersChanged) {
                 result = this.lastSearchResults;
             }
-            else if (search && search.searchText !== undefined && search.searchText.length > 0) {
+            else if (search &&
+                search.searchText !== undefined &&
+                search.searchText.length > 0) {
                 let searchText = search.searchText.toLowerCase();
                 let searchFunctions;
                 if (this.searchFunction !== undefined) {
@@ -253,12 +269,13 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
                 else {
                     searchFunctions = search.functions;
                 }
-                result = result.filter(item => {
+                result = result.filter((item) => {
                     let isMatch = false;
                     for (let i = 0; i < searchFunctions.length; i++) {
                         let searchFunction = searchFunctions[i];
                         let searchResult = searchFunction(item.data, searchText);
-                        if ((typeof searchResult === 'string' && searchResult.indexOf(searchText) !== -1) ||
+                        if ((typeof searchResult === 'string' &&
+                            searchResult.indexOf(searchText) !== -1) ||
                             searchResult === true) {
                             isMatch = true;
                             break;
@@ -273,7 +290,9 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
             }
             // Apply sort.
             if (sort && sort.fieldSelectors.length > 0) {
-                result = result.slice().sort((item1, item2) => {
+                result = result
+                    .slice()
+                    .sort((item1, item2) => {
                     let compareResult = 0;
                     for (let i = 0; i < sort.fieldSelectors.length; i++) {
                         let selector = sort.fieldSelectors[i];
@@ -504,7 +523,7 @@ class ListStateOrchestrator extends StateOrchestrator {
 /**
  * @internal
  */
-let ListStateDispatcher = class ListStateDispatcher extends StateDispatcher {
+class ListStateDispatcher extends StateDispatcher {
     viewsSetActive(id) {
         this.next(new ListViewsSetActiveAction(id));
     }
@@ -526,6 +545,7 @@ let ListStateDispatcher = class ListStateDispatcher extends StateDispatcher {
     searchSetFunctions(sortFunctions) {
         this.next(new ListSearchSetFunctionsAction(sortFunctions));
     }
+    /* istanbul ignore next */
     searchSetFieldSelectors(fieldSelectors) {
         this.next(new ListSearchSetFieldSelectorsAction(fieldSelectors));
     }
@@ -550,10 +570,12 @@ let ListStateDispatcher = class ListStateDispatcher extends StateDispatcher {
     setSelected(selectedIds, selected, refresh = false) {
         this.next(new ListSelectedSetItemsSelectedAction(selectedIds, selected, refresh));
     }
-};
-ListStateDispatcher = __decorate([
-    Injectable()
-], ListStateDispatcher);
+}
+ListStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+ListStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListStateDispatcher, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * @internal
@@ -562,8 +584,7 @@ class ListFiltersOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListFiltersUpdateAction, this.update);
+        this.register(ListFiltersUpdateAction, this.update);
     }
     update(state, action) {
         return [...action.filters];
@@ -574,7 +595,9 @@ class ListFiltersOrchestrator extends ListStateOrchestrator {
  * @internal
  */
 class ListItemsSetSelectedAction {
-    constructor(items, selected = false, refresh = true) {
+    constructor(items, 
+    /* istanbul ignore next */
+    selected = false, refresh = true) {
         this.items = items;
         this.selected = selected;
         this.refresh = refresh;
@@ -588,8 +611,7 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListItemsSetLoadingAction, this.setLoading)
+        this.register(ListItemsSetLoadingAction, this.setLoading)
             .register(ListItemsLoadAction, this.load)
             .register(ListItemsSetSelectedAction, this.setItemsSelected);
     }
@@ -597,19 +619,23 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
         return new AsyncList(state.items, state.lastUpdate, action.loading, state.count);
     }
     load(state, action) {
-        const newListItems = action.items.map(g => new ListItemModel(g.id, g.data, g.isSelected));
-        const resultItems = (action.refresh) ? [...newListItems] : [...state.items, ...newListItems];
+        const newListItems = action.items.map((g) => new ListItemModel(g.id, g.data, g.isSelected));
+        const resultItems = action.refresh
+            ? [...newListItems]
+            : [...state.items, ...newListItems];
         let count = action.count === undefined ? resultItems.length : action.count;
         return new AsyncList(resultItems, action.dataChanged ? Date.now() : state.lastUpdate, false, count);
     }
     setItemsSelected(state, action) {
+        /* istanbul ignore next */
         const newSelectedIds = action.items || [];
         let newListItemModels = this.cloneListItemModelArray(state.items);
         if (action.refresh) {
-            newListItemModels.forEach(item => item.isSelected = undefined);
+            newListItemModels.forEach((item) => (item.isSelected = undefined));
         }
-        newSelectedIds.map(s => {
-            let newItem = newListItemModels.find(i => i.id === s);
+        newSelectedIds.map((s) => {
+            let newItem = newListItemModels.find((i) => i.id === s);
+            /* istanbul ignore next */
             if (newItem) {
                 newItem.isSelected = action.selected;
             }
@@ -618,7 +644,7 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
     }
     cloneListItemModelArray(source) {
         let newListItems = [];
-        source.forEach(item => {
+        source.forEach((item) => {
             newListItems.push(new ListItemModel(item.id, Object.assign({}, item.data), item.isSelected));
         });
         return newListItems;
@@ -659,8 +685,7 @@ class ListPagingOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListPagingSetMaxPagesAction, this.setMaxPages)
+        this.register(ListPagingSetMaxPagesAction, this.setMaxPages)
             .register(ListPagingSetItemsPerPageAction, this.setItemsPerPage)
             .register(ListPagingSetPageNumberAction, this.setPageNumber);
     }
@@ -691,9 +716,7 @@ class ListViewsOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListViewsSetActiveAction, this.setActive)
-            .register(ListViewsLoadAction, this.load);
+        this.register(ListViewsSetActiveAction, this.setActive).register(ListViewsLoadAction, this.load);
     }
     setActive(state, action) {
         return new ListViewsModel(Object.assign({}, state, { active: action.view }));
@@ -735,8 +758,7 @@ class ListToolbarOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListToolbarSetExistsAction, this.setExists)
+        this.register(ListToolbarSetExistsAction, this.setExists)
             .register(ListToolbarItemsDisableAction, this.setDisabled)
             .register(ListToolbarItemsLoadAction, this.load)
             .register(ListToolbarSetTypeAction, this.setType)
@@ -760,7 +782,7 @@ class ListToolbarOrchestrator extends ListStateOrchestrator {
     }
     load(state, action) {
         const newModel = new ListToolbarModel(state);
-        const newListItems = action.items.map(item => {
+        const newListItems = action.items.map((item) => {
             /**
              * NOTE: Originally this function went off the action index and item models did not include
              * the index. We changed this but must leave functionality to convert the action index for
@@ -807,14 +829,15 @@ class ListSearchOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListSearchSetSearchTextAction, this.setSearchText)
+        this.register(ListSearchSetSearchTextAction, this.setSearchText)
             .register(ListSearchSetFunctionsAction, this.setFunctions)
             .register(ListSearchSetFieldSelectorsAction, this.setFieldSelectors)
             .register(ListSearchSetOptionsAction, this.setOptions);
     }
     setSearchText(state, action) {
-        return new ListSearchModel(Object.assign({}, state, { searchText: action.searchText ? action.searchText : '' }));
+        return new ListSearchModel(Object.assign({}, state, {
+            searchText: action.searchText ? action.searchText : '',
+        }));
     }
     setFunctions(state, action) {
         return new ListSearchModel(Object.assign({}, state, { functions: [...action.functions] }));
@@ -857,8 +880,7 @@ class ListSelectedOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListSelectedSetLoadingAction, this.setLoading)
+        this.register(ListSelectedSetLoadingAction, this.setLoading)
             .register(ListSelectedSetItemSelectedAction, this.setItemSelected)
             .register(ListSelectedSetItemsSelectedAction, this.setItemsSelected)
             .register(ListSelectedLoadAction, this.load);
@@ -868,7 +890,7 @@ class ListSelectedOrchestrator extends ListStateOrchestrator {
     }
     load(state, action) {
         const newSelected = new ListSelectedModel();
-        action.items.map(s => newSelected.selectedIdMap.set(s, true));
+        action.items.map((s) => newSelected.selectedIdMap.set(s, true));
         return new AsyncItem(Object.assign({}, state.item, newSelected), Date.now(), false);
     }
     setItemSelected(state, action) {
@@ -878,16 +900,16 @@ class ListSelectedOrchestrator extends ListStateOrchestrator {
     }
     setItemsSelected(state, action) {
         const newSelectedIds = action.items || [];
-        const newListSelectedModel = action.refresh ? new ListSelectedModel() : this.cloneListSelectedModel(state.item);
+        const newListSelectedModel = action.refresh
+            ? new ListSelectedModel()
+            : this.cloneListSelectedModel(state.item);
         if (newSelectedIds instanceof Observable) {
-            newSelectedIds
-                .pipe(take(1))
-                .subscribe(selectedIds => {
-                selectedIds.map(s => newListSelectedModel.selectedIdMap.set(s, action.selected));
+            newSelectedIds.pipe(take(1)).subscribe((selectedIds) => {
+                selectedIds.map((s) => newListSelectedModel.selectedIdMap.set(s, action.selected));
             });
         }
         else {
-            newSelectedIds.map(s => newListSelectedModel.selectedIdMap.set(s, action.selected));
+            newSelectedIds.map((s) => newListSelectedModel.selectedIdMap.set(s, action.selected));
         }
         return new AsyncItem(newListSelectedModel, state.lastUpdate, state.loading);
     }
@@ -930,8 +952,7 @@ class ListSortOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this
-            .register(ListSortSetFieldSelectorsAction, this.setFieldSelectors)
+        this.register(ListSortSetFieldSelectorsAction, this.setFieldSelectors)
             .register(ListSortSetAvailableAction, this.setAvailable)
             .register(ListSortSetGlobalAction, this.setGlobal);
     }
@@ -939,11 +960,11 @@ class ListSortOrchestrator extends ListStateOrchestrator {
         return new ListSortModel(Object.assign({}, state, { fieldSelectors: action.fieldSelectors }));
     }
     setAvailable(state, action) {
-        const newAvailable = action.available.map(available => new ListSortLabelModel(available));
+        const newAvailable = action.available.map((available) => new ListSortLabelModel(available));
         return new ListSortModel(Object.assign({}, state, { available: newAvailable }));
     }
     setGlobal(state, action) {
-        const newGlobal = action.global.map(global => new ListSortLabelModel(global));
+        const newGlobal = action.global.map((global) => new ListSortLabelModel(global));
         return new ListSortModel(Object.assign({}, state, { global: newGlobal }));
     }
 }
@@ -951,11 +972,10 @@ class ListSortOrchestrator extends ListStateOrchestrator {
 /**
  * @internal
  */
-let ListState = class ListState extends StateNode {
+class ListState extends StateNode {
     constructor(dispatcher) {
         super(new ListStateModel(), dispatcher);
-        this
-            .register('filters', ListFiltersOrchestrator)
+        this.register('filters', ListFiltersOrchestrator)
             .register('items', ListItemsOrchestrator)
             .register('paging', ListPagingOrchestrator)
             .register('search', ListSearchOrchestrator)
@@ -965,26 +985,28 @@ let ListState = class ListState extends StateNode {
             .register('selected', ListSelectedOrchestrator)
             .begin();
     }
-};
-ListState.ctorParameters = () => [
-    { type: ListStateDispatcher }
-];
-ListState = __decorate([
-    Injectable()
-], ListState);
+}
+ListState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListState, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+ListState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListState, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; } });
 
-let idIndex$1 = 0;
+let idIndex$2 = 0;
 /**
  * @internal
  */
 class ListViewComponent {
     constructor(state, defaultName) {
-        this.viewId = `sky-list-view-cmp-${++idIndex$1}`;
+        this.viewId = `sky-list-view-cmp-${++idIndex$2}`;
         this.state = state;
         this.viewName = defaultName;
-        this.hasToolbar = this.state.pipe(map(s => s.toolbar.exists));
-        this.active = this.state.pipe(map(s => s.views.active === this.viewId));
-        this.active.pipe(distinctUntilChanged()).subscribe(isActive => isActive ? this.onViewActive() : this.onViewInactive());
+        /* istanbul ignore next */
+        this.hasToolbar = this.state.pipe(map((s) => s.toolbar.exists));
+        this.active = this.state.pipe(map((s) => s.views.active === this.viewId));
+        this.active
+            .pipe(distinctUntilChanged())
+            .subscribe((isActive) => isActive ? this.onViewActive() : this.onViewInactive());
     }
     get id() {
         return this.viewId;
@@ -993,10 +1015,8 @@ class ListViewComponent {
         return this.viewName;
     }
     /* istanbul ignore next */
-    onViewActive() {
-    }
-    onViewInactive() {
-    }
+    onViewActive() { }
+    onViewInactive() { }
 }
 
 /**
@@ -1009,12 +1029,12 @@ class ListViewModel {
     }
 }
 
-let idIndex$2 = 0;
-let SkyListComponent = class SkyListComponent {
+let idIndex$1 = 0;
+class SkyListComponent {
     constructor(state, dispatcher) {
         this.state = state;
         this.dispatcher = dispatcher;
-        this.id = `sky-list-cmp-${++idIndex$2}`;
+        this.id = `sky-list-cmp-${++idIndex$1}`;
         /**
          * Specifies the data to display. The list component requires this property or the
          * `dataProvider` property. For checklist or multiselect grids, each row requires an
@@ -1039,7 +1059,6 @@ let SkyListComponent = class SkyListComponent {
          * Emits the filters applied to the list.
          */
         this.appliedFiltersChange = new EventEmitter();
-        /* tslint:enable */
         this.dataFirstLoad = false;
         this.lastSelectedIds = [];
         this.lastFilters = [];
@@ -1050,8 +1069,10 @@ let SkyListComponent = class SkyListComponent {
             this.dataFirstLoad = true;
         }
         if (this.listViews.length > 0) {
-            let defaultView = (this.defaultView === undefined) ? this.listViews.first : this.defaultView;
-            this.dispatcher.next(new ListViewsLoadAction(this.listViews.map(v => new ListViewModel(v.id, v.label))));
+            let defaultView = this.defaultView === undefined
+                ? this.listViews.first
+                : this.defaultView;
+            this.dispatcher.next(new ListViewsLoadAction(this.listViews.map((v) => new ListViewModel(v.id, v.label))));
             // activate the default view
             this.dispatcher.next(new ListViewsSetActiveAction(defaultView.id));
         }
@@ -1069,14 +1090,14 @@ let SkyListComponent = class SkyListComponent {
             }
             this.dispatcher.next(new ListSortSetFieldSelectorsAction(sortArray || []));
         });
-        this.displayedItems.subscribe(result => {
+        this.displayedItems.subscribe((result) => {
             this.dispatcher.next(new ListItemsSetLoadingAction());
             this.dispatcher.next(new ListItemsLoadAction(result.items, true, true, result.count));
         });
         // Watch for selection changes.
         this.state
-            .pipe(map(current => current.selected), takeUntil(this.ngUnsubscribe), distinctUntilChanged())
-            .subscribe(selected => {
+            .pipe(map((current) => current.selected), takeUntil(this.ngUnsubscribe), distinctUntilChanged())
+            .subscribe((selected) => {
             // Update lastSelectedIds to help us retain user selections.
             let selectedIdsList = [];
             selected.item.selectedIdMap.forEach((value, key) => {
@@ -1093,7 +1114,7 @@ let SkyListComponent = class SkyListComponent {
         });
         if (this.appliedFiltersChange.observers.length > 0) {
             this.state
-                .pipe(map(current => current.filters), takeUntil(this.ngUnsubscribe), skip(1))
+                .pipe(map((current) => current.filters), takeUntil(this.ngUnsubscribe), skip(1))
                 .subscribe((filters) => {
                 /**
                  * We are doing this instead of a distinctUntilChange due to memory allocation issues
@@ -1109,9 +1130,11 @@ let SkyListComponent = class SkyListComponent {
     }
     ngOnChanges(changes) {
         if (changes['appliedFilters'] &&
-            changes['appliedFilters'].currentValue !== changes['appliedFilters'].previousValue) {
+            changes['appliedFilters'].currentValue !==
+                changes['appliedFilters'].previousValue) {
             this.state.pipe(take(1)).subscribe((currentState) => {
-                if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
                     this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                 }
                 this.dispatcher.filtersUpdate(this.appliedFilters);
@@ -1156,17 +1179,17 @@ let SkyListComponent = class SkyListComponent {
         // with adding a debounce time to the Observable which watches for state changes.
         let cancelLastRequest = new Subject();
         return combineLatest([
-            this.state.pipe(map(s => s.filters), distinctUntilChanged()),
-            this.state.pipe(map(s => s.search), distinctUntilChanged()),
-            this.state.pipe(map(s => s.sort.fieldSelectors), distinctUntilChanged()),
-            this.state.pipe(map(s => s.paging.itemsPerPage), distinctUntilChanged()),
-            this.state.pipe(map(s => s.paging.pageNumber), distinctUntilChanged()),
-            this.state.pipe(map(s => s.toolbar.disabled), distinctUntilChanged()),
-            selectedIds.pipe(distinctUntilChanged(), map(selected => {
+            this.state.pipe(map((s) => s.filters), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.search), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.sort.fieldSelectors), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.paging.itemsPerPage), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.paging.pageNumber), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.toolbar.disabled), distinctUntilChanged()),
+            selectedIds.pipe(distinctUntilChanged(), map((selected) => {
                 selectedChanged = true;
                 return selected;
             })),
-            data.pipe(distinctUntilChanged())
+            data.pipe(distinctUntilChanged()),
         ], (filters, search, sortFieldSelectors, itemsPerPage, pageNumber, isToolbarDisabled, selected, itemsData) => {
             cancelLastRequest.next();
             cancelLastRequest.complete();
@@ -1179,44 +1202,44 @@ let SkyListComponent = class SkyListComponent {
             let response;
             if (this.dataFirstLoad) {
                 this.dataFirstLoad = false;
-                let initialItems = itemsData.map(d => new ListItemModel(d.id || `sky-list-item-model-${++idIndex$2}`, d));
+                let initialItems = itemsData.map((d) => new ListItemModel(d.id || `sky-list-item-model-${++idIndex$1}`, d));
                 response = of(new ListDataResponseModel({
                     count: this.initialTotal,
-                    items: initialItems
+                    items: initialItems,
                 })).pipe(takeUntil(cancelLastRequest));
             }
             else {
-                response = this.dataProvider.get(new ListDataRequestModel({
+                response = this.dataProvider
+                    .get(new ListDataRequestModel({
                     filters: filters,
                     pageSize: itemsPerPage,
                     pageNumber: pageNumber,
                     search: search,
                     sort: new ListSortModel({ fieldSelectors: sortFieldSelectors }),
-                    isToolbarDisabled: isToolbarDisabled
-                })).pipe(takeUntil(cancelLastRequest));
+                    isToolbarDisabled: isToolbarDisabled,
+                }))
+                    .pipe(takeUntil(cancelLastRequest));
             }
             return response;
-        })
-            .pipe(takeUntil(this.ngUnsubscribe), 
+        }).pipe(takeUntil(this.ngUnsubscribe), 
         // Retain user selections from previous state.
         // This is only necessary for grids component (based on item.isSelected).
-        map(response => {
-            return response.pipe(map(listDataResponseModel => {
+        map((response) => {
+            return response.pipe(map((listDataResponseModel) => {
                 return new ListDataResponseModel({
                     count: listDataResponseModel.count,
-                    items: this.getItemsAndRetainSelections(listDataResponseModel.items, this.lastSelectedIds)
+                    items: this.getItemsAndRetainSelections(listDataResponseModel.items, this.lastSelectedIds),
                 });
             }));
-        }), flatMap(value => value));
+        }), flatMap((value) => value));
     }
     get selectedItems() {
-        return combineLatest(this.state.pipe(map(current => current.items.items), distinctUntilChanged()), this.state.pipe(map(current => current.selected), distinctUntilChanged()), (items, selected) => {
-            return items.filter(i => selected.item.selectedIdMap.get(i.id));
+        return combineLatest(this.state.pipe(map((current) => current.items.items), distinctUntilChanged()), this.state.pipe(map((current) => current.selected), distinctUntilChanged()), (items, selected) => {
+            return items.filter((i) => selected.item.selectedIdMap.get(i.id));
         }).pipe(takeUntil(this.ngUnsubscribe));
     }
     get lastUpdate() {
-        return this.state
-            .pipe(takeUntil(this.ngUnsubscribe), map(s => s.items.lastUpdate ? new Date(s.items.lastUpdate) : undefined));
+        return this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.items.lastUpdate ? new Date(s.items.lastUpdate) : undefined));
     }
     get views() {
         return this.listViews.toArray();
@@ -1226,7 +1249,7 @@ let SkyListComponent = class SkyListComponent {
     }
     getItemsAndRetainSelections(newList, selectedIds) {
         let updatedListModel = newList.slice();
-        updatedListModel.forEach(item => {
+        updatedListModel.forEach((item) => {
             item.isSelected = selectedIds.indexOf(item.id) > -1 ? true : false;
         });
         return updatedListModel;
@@ -1249,68 +1272,56 @@ let SkyListComponent = class SkyListComponent {
         }
         return true;
     }
-};
-SkyListComponent.ctorParameters = () => [
-    { type: ListState },
-    { type: ListStateDispatcher }
-];
-__decorate([
-    Input()
-], SkyListComponent.prototype, "data", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "dataProvider", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "defaultView", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "initialTotal", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "selectedIds", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "sortFields", void 0);
-__decorate([
-    Input()
-], SkyListComponent.prototype, "appliedFilters", void 0);
-__decorate([
-    Output()
-], SkyListComponent.prototype, "selectedIdsChange", void 0);
-__decorate([
-    Output()
-], SkyListComponent.prototype, "appliedFiltersChange", void 0);
-__decorate([
-    Input('search')
-], SkyListComponent.prototype, "searchFunction", void 0);
-__decorate([
-    ContentChildren(ListViewComponent)
-], SkyListComponent.prototype, "listViews", void 0);
-SkyListComponent = __decorate([
-    Component({
-        selector: 'sky-list',
-        template: '<ng-content></ng-content>',
-        providers: [ListState, ListStateDispatcher],
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyListComponent);
-
-let SkyListModule = class SkyListModule {
-};
-SkyListModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyListComponent
-        ],
-        imports: [
-            CommonModule
-        ],
-        exports: [
-            SkyListComponent
-        ]
-    })
-], SkyListModule);
+}
+SkyListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListComponent, 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></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list',
+                    template: '<ng-content></ng-content>',
+                    providers: [ListState, ListStateDispatcher],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { data: [{
+                type: Input
+            }], dataProvider: [{
+                type: Input
+            }], defaultView: [{
+                type: Input
+            }], initialTotal: [{
+                type: Input
+            }], selectedIds: [{
+                type: Input
+            }], sortFields: [{
+                type: Input
+            }], appliedFilters: [{
+                type: Input
+            }], selectedIdsChange: [{
+                type: Output
+            }], appliedFiltersChange: [{
+                type: Output
+            }], searchFunction: [{
+                type: Input,
+                args: ['search']
+            }], listViews: [{
+                type: ContentChildren,
+                args: [ListViewComponent]
+            }] } });
+
+class SkyListModule {
+}
+SkyListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListModule, declarations: [SkyListComponent], imports: [CommonModule], exports: [SkyListComponent] });
+SkyListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyListComponent],
+                    imports: [CommonModule],
+                    exports: [SkyListComponent],
+                }]
+        }] });
 
 class ListFilterModel {
     constructor(data) {
@@ -1358,7 +1369,7 @@ class SkyListFilterInlineModel {
  * [list component's](https://developer.blackbaud.com/skyux/components/list/overview#list-properties)
  * `appliedFilters` property.
  */
-let SkyListFilterButtonComponent = class SkyListFilterButtonComponent {
+class SkyListFilterButtonComponent {
     constructor(dispatcher) {
         this.dispatcher = dispatcher;
         this.filterButtonItemToolbarIndex = 5000;
@@ -1368,26 +1379,26 @@ let SkyListFilterButtonComponent = class SkyListFilterButtonComponent {
             new ListToolbarItemModel({
                 template: this.filterButtonTemplate,
                 location: 'left',
-                index: this.filterButtonItemToolbarIndex
-            })
+                index: this.filterButtonItemToolbarIndex,
+            }),
         ]);
     }
-};
-SkyListFilterButtonComponent.ctorParameters = () => [
-    { type: ListStateDispatcher }
-];
-__decorate([
-    ViewChild('filterButton', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListFilterButtonComponent.prototype, "filterButtonTemplate", void 0);
-SkyListFilterButtonComponent = __decorate([
-    Component({
-        selector: 'sky-list-filter-button',
-        template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n"
-    })
-], SkyListFilterButtonComponent);
+}
+SkyListFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterButtonComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListFilterButtonComponent, 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></ng-content>\n</ng-template>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-button',
+                    templateUrl: './list-filter-button.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { filterButtonTemplate: [{
+                type: ViewChild,
+                args: ['filterButton', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
 
 /**
  * Creates a filter summary based on the
@@ -1395,7 +1406,7 @@ SkyListFilterButtonComponent = __decorate([
  * `appliedFilters` property. Place this component within the
  * [`sky-list-toolbar`](https://developer.blackbaud.com/skyux/components/list/toolbar) component.
  */
-let SkyListFilterSummaryComponent = class SkyListFilterSummaryComponent {
+class SkyListFilterSummaryComponent {
     constructor(state, dispatcher) {
         this.state = state;
         this.dispatcher = dispatcher;
@@ -1410,10 +1421,10 @@ let SkyListFilterSummaryComponent = class SkyListFilterSummaryComponent {
         setTimeout(() => {
             this.appliedFilters = this.state.pipe(map((state) => {
                 return state.filters.filter((filter) => {
-                    return filter.value !== '' &&
+                    return (filter.value !== '' &&
                         filter.value !== undefined &&
                         filter.value !== false &&
-                        filter.value !== filter.defaultValue;
+                        filter.value !== filter.defaultValue);
                 });
             }));
         });
@@ -1427,27 +1438,24 @@ let SkyListFilterSummaryComponent = class SkyListFilterSummaryComponent {
     filterSummaryItemClick(item) {
         this.summaryItemClick.emit(item);
     }
-};
-SkyListFilterSummaryComponent.ctorParameters = () => [
-    { type: ListState },
-    { type: ListStateDispatcher }
-];
-__decorate([
-    Output()
-], SkyListFilterSummaryComponent.prototype, "summaryItemClick", void 0);
-SkyListFilterSummaryComponent = __decorate([
-    Component({
-        selector: 'sky-list-filter-summary',
-        template: "<sky-filter-summary>\n  <sky-filter-summary-item\n    *ngFor=\"let item of appliedFilters | async; let i = index\"\n    (dismiss)=\"filterSummaryItemDismiss(i)\"\n    (itemClick)=\"filterSummaryItemClick(item)\"\n    [dismissible]=\"item.dismissible\"\n    >\n    {{item.label || item.value}}\n  </sky-filter-summary-item>\n</sky-filter-summary>\n"
-    })
-], SkyListFilterSummaryComponent);
+}
+SkyListFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n  <sky-filter-summary-item\n    *ngFor=\"let item of appliedFilters | async; let i = index\"\n    (dismiss)=\"filterSummaryItemDismiss(i)\"\n    (itemClick)=\"filterSummaryItemClick(item)\"\n    [dismissible]=\"item.dismissible\"\n  >\n    {{ item.label || item.value }}\n  </sky-filter-summary-item>\n</sky-filter-summary>\n", components: [{ type: i3.λ5, selector: "sky-filter-summary" }, { type: i3.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-summary',
+                    templateUrl: './list-filter-summary.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
+                type: Output
+            }] } });
 
 /**
  * Creates a filter in the list's inline filter area.
  */
-let SkyListFilterInlineItemComponent = class SkyListFilterInlineItemComponent {
+class SkyListFilterInlineItemComponent {
     constructor() {
-        /* tslint:enable:no-input-rename */
         this.onChange = new EventEmitter();
     }
     ngOnInit() {
@@ -1456,55 +1464,89 @@ let SkyListFilterInlineItemComponent = class SkyListFilterInlineItemComponent {
         }
     }
     get template() {
-        return this.templates.length > 0 ? this.templates.first : this.templateInput;
+        return this.templates.length > 0
+            ? this.templates.first
+            : this.templateInput;
     }
-};
-__decorate([
-    Input()
-], SkyListFilterInlineItemComponent.prototype, "name", void 0);
-__decorate([
-    Input()
-], SkyListFilterInlineItemComponent.prototype, "value", void 0);
-__decorate([
-    Input()
-], SkyListFilterInlineItemComponent.prototype, "defaultValue", void 0);
-__decorate([
-    Input('filter')
-], SkyListFilterInlineItemComponent.prototype, "filterFunction", void 0);
-__decorate([
-    Input('template')
-], SkyListFilterInlineItemComponent.prototype, "templateInput", void 0);
-__decorate([
-    ContentChildren(TemplateRef)
-], SkyListFilterInlineItemComponent.prototype, "templates", void 0);
-SkyListFilterInlineItemComponent = __decorate([
-    Component({
-        selector: 'sky-list-filter-inline-item',
-        template: '<ng-content></ng-content>'
-    })
-], SkyListFilterInlineItemComponent);
+}
+SkyListFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListFilterInlineItemComponent, selector: "sky-list-filter-inline-item", inputs: { name: "name", value: "value", defaultValue: "defaultValue", filterFunction: ["filter", "filterFunction"], templateInput: ["template", "templateInput"] }, queries: [{ propertyName: "templates", predicate: TemplateRef }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-inline-item',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], filterFunction: [{
+                type: Input,
+                args: ['filter']
+            }], templateInput: [{
+                type: Input,
+                args: ['template']
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyListFilterInlineItemRendererComponent {
+    ngOnInit() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
+    }
+}
+SkyListFilterInlineItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: { template: "template", filter: "filter" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-inline-item-renderer',
+                    template: '<ng-template #container></ng-template>',
+                }]
+        }], propDecorators: { template: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
 
 /**
  * Creates an inline filter area for the list. Place each filter
  * in a `sky-list-filter-inline-item` component.
  */
-let SkyListFilterInlineComponent = class SkyListFilterInlineComponent {
+class SkyListFilterInlineComponent {
     constructor(dispatcher, state) {
         this.dispatcher = dispatcher;
         this.state = state;
         this.inlineFilters = [];
     }
     ngAfterContentInit() {
-        this.inlineFilters = this.filters.map(filter => {
+        this.inlineFilters = this.filters.map((filter) => {
             return new SkyListFilterInlineModel({
                 name: filter.name,
                 filterFunction: filter.filterFunction,
                 template: filter.template,
                 value: filter.value,
-                defaultValue: filter.defaultValue
+                defaultValue: filter.defaultValue,
             });
         });
-        this.inlineFilters.forEach(filter => {
+        this.inlineFilters.forEach((filter) => {
             filter.onChange.subscribe((value) => {
                 this.applyFilters();
             });
@@ -1513,7 +1555,8 @@ let SkyListFilterInlineComponent = class SkyListFilterInlineComponent {
     }
     applyFilters() {
         this.state.pipe(take(1)).subscribe((currentState) => {
-            if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+            if (currentState.paging.pageNumber &&
+                currentState.paging.pageNumber !== 1) {
                 this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
             }
             this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
@@ -1525,80 +1568,55 @@ let SkyListFilterInlineComponent = class SkyListFilterInlineComponent {
                 name: filter.name,
                 value: filter.value,
                 filterFunction: filter.filterFunction,
-                defaultValue: filter.defaultValue
+                defaultValue: filter.defaultValue,
             });
         });
     }
-};
-SkyListFilterInlineComponent.ctorParameters = () => [
-    { type: ListStateDispatcher },
-    { type: ListState }
-];
-__decorate([
-    ContentChildren(SkyListFilterInlineItemComponent)
-], SkyListFilterInlineComponent.prototype, "filters", void 0);
-SkyListFilterInlineComponent = __decorate([
-    Component({
-        selector: 'sky-list-filter-inline',
-        template: "<ng-content></ng-content>\n\n<sky-filter-inline>\n  <sky-filter-inline-item\n    *ngFor=\"let filter of inlineFilters\">\n    <sky-list-filter-inline-item-renderer\n      [template]=\"filter.template\"\n      [filter]=\"filter\">\n    </sky-list-filter-inline-item-renderer>\n  </sky-filter-inline-item>\n</sky-filter-inline>\n"
-    })
-], SkyListFilterInlineComponent);
-
-/**
- * @internal
- */
-let SkyListFilterInlineItemRendererComponent = class SkyListFilterInlineItemRendererComponent {
-    ngOnInit() {
-        /* istanbul ignore else */
-        /* sanity check */
-        if (this.template !== undefined) {
-            this.container.createEmbeddedView(this.template, this);
-        }
-    }
-};
-__decorate([
-    Input()
-], SkyListFilterInlineItemRendererComponent.prototype, "template", void 0);
-__decorate([
-    Input()
-], SkyListFilterInlineItemRendererComponent.prototype, "filter", void 0);
-__decorate([
-    ViewChild('container', {
-        read: ViewContainerRef,
-        static: true
-    })
-], SkyListFilterInlineItemRendererComponent.prototype, "container", void 0);
-SkyListFilterInlineItemRendererComponent = __decorate([
-    Component({
-        selector: 'sky-list-filter-inline-item-renderer',
-        template: '<ng-template #container></ng-template>'
-    })
-], SkyListFilterInlineItemRendererComponent);
-
-let SkyListFiltersModule = class SkyListFiltersModule {
-};
-SkyListFiltersModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyListFilterButtonComponent,
-            SkyListFilterSummaryComponent,
-            SkyListFilterInlineItemComponent,
-            SkyListFilterInlineComponent,
-            SkyListFilterInlineItemRendererComponent
-        ],
-        imports: [
-            CommonModule,
-            SkyFilterModule
-        ],
-        exports: [
-            SkyListFilterButtonComponent,
-            SkyListFilterSummaryComponent,
-            SkyListFilterInlineItemComponent,
-            SkyListFilterInlineComponent,
-            SkyListFilterInlineItemRendererComponent
-        ]
-    })
-], SkyListFiltersModule);
+}
+SkyListFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content></ng-content>\n\n<sky-filter-inline>\n  <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n    <sky-list-filter-inline-item-renderer\n      [template]=\"filter.template\"\n      [filter]=\"filter\"\n    >\n    </sky-list-filter-inline-item-renderer>\n  </sky-filter-inline-item>\n</sky-filter-inline>\n", components: [{ type: i3.λ2, selector: "sky-filter-inline" }, { type: i3.λ3, selector: "sky-filter-inline-item" }, { type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFilterInlineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-inline',
+                    templateUrl: './list-filter-inline.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }, { type: ListState }]; }, propDecorators: { filters: [{
+                type: ContentChildren,
+                args: [SkyListFilterInlineItemComponent]
+            }] } });
+
+class SkyListFiltersModule {
+}
+SkyListFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFiltersModule, declarations: [SkyListFilterButtonComponent,
+        SkyListFilterSummaryComponent,
+        SkyListFilterInlineItemComponent,
+        SkyListFilterInlineComponent,
+        SkyListFilterInlineItemRendererComponent], imports: [CommonModule, SkyFilterModule], exports: [SkyListFilterButtonComponent,
+        SkyListFilterSummaryComponent,
+        SkyListFilterInlineItemComponent,
+        SkyListFilterInlineComponent] });
+SkyListFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFiltersModule, imports: [[CommonModule, SkyFilterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListFiltersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListFilterButtonComponent,
+                        SkyListFilterSummaryComponent,
+                        SkyListFilterInlineItemComponent,
+                        SkyListFilterInlineComponent,
+                        SkyListFilterInlineItemRendererComponent,
+                    ],
+                    imports: [CommonModule, SkyFilterModule],
+                    exports: [
+                        SkyListFilterButtonComponent,
+                        SkyListFilterSummaryComponent,
+                        SkyListFilterInlineItemComponent,
+                        SkyListFilterInlineComponent,
+                    ],
+                }]
+        }] });
 
 /**
  * Provides a SKY UX-themed pagination control to display list data across multiple pages.
@@ -1612,11 +1630,12 @@ class ListPagingComponent {
     }
 }
 
-var SkyListPagingComponent_1;
+/* istanbul ignore next */
+const listPagingComponentRef = forwardRef(() => SkyListPagingComponent);
 /**
  * Displays a pagination control for a SKY UX-themed list of data.
  */
-let SkyListPagingComponent = SkyListPagingComponent_1 = class SkyListPagingComponent extends ListPagingComponent {
+class SkyListPagingComponent extends ListPagingComponent {
     constructor(state, dispatcher) {
         super(state, dispatcher);
         /**
@@ -1636,11 +1655,10 @@ let SkyListPagingComponent = SkyListPagingComponent_1 = class SkyListPagingCompo
         this.pageNumber = 1;
     }
     ngOnInit() {
-        this.currentPageNumber = this.state.pipe(map(s => s.paging.pageNumber));
-        this.maxDisplayedPages = this.state.pipe(map(s => s.paging.maxDisplayedPages));
-        this.itemsPerPage = this.state.pipe(map(s => s.paging.itemsPerPage));
-        this.itemCount = this.state
-            .pipe(map((s) => {
+        this.currentPageNumber = this.state.pipe(map((s) => s.paging.pageNumber));
+        this.maxDisplayedPages = this.state.pipe(map((s) => s.paging.maxDisplayedPages));
+        this.itemsPerPage = this.state.pipe(map((s) => s.paging.itemsPerPage));
+        this.itemCount = this.state.pipe(map((s) => {
             return s.items;
         }), scan((previousValue, newValue) => {
             if (previousValue.lastUpdate > newValue.lastUpdate) {
@@ -1664,78 +1682,97 @@ let SkyListPagingComponent = SkyListPagingComponent_1 = class SkyListPagingCompo
             this.dispatcher.next(new ListPagingSetPageNumberAction(Number(currentPage)));
         });
     }
+}
+SkyListPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListPagingComponent, 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</sky-paging>\n", components: [{ type: i3.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-paging',
+                    templateUrl: './list-paging.component.html',
+                    providers: [
+                        { provide: ListPagingComponent, useExisting: listPagingComponentRef },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { pageSize: [{
+                type: Input
+            }], maxPages: [{
+                type: Input
+            }], pageNumber: [{
+                type: Input
+            }] } });
+
+class SkyListPagingModule {
+}
+SkyListPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingModule, declarations: [SkyListPagingComponent], imports: [CommonModule, SkyPagingModule], exports: [SkyListPagingComponent] });
+SkyListPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingModule, imports: [[CommonModule, SkyPagingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListPagingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyListPagingComponent],
+                    imports: [CommonModule, SkyPagingModule],
+                    exports: [SkyListPagingComponent],
+                }]
+        }] });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module modules/shared/sky-list-builder' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_list_show_secondary_actions_button: { message: 'More' },
+        skyux_list_multiselect_clear_all: { message: 'Clear all' },
+        skyux_list_mutliselect_select_all: { message: 'Select all' },
+        skyux_list_mutliselect_show_selected: {
+            message: 'Only show selected items',
+        },
+        skyux_list_view_switcher_dropdown_title: { message: 'Select view' },
+    },
 };
-SkyListPagingComponent.ctorParameters = () => [
-    { type: ListState },
-    { type: ListStateDispatcher }
-];
-__decorate([
-    Input()
-], SkyListPagingComponent.prototype, "pageSize", void 0);
-__decorate([
-    Input()
-], SkyListPagingComponent.prototype, "maxPages", void 0);
-__decorate([
-    Input()
-], SkyListPagingComponent.prototype, "pageNumber", void 0);
-SkyListPagingComponent = SkyListPagingComponent_1 = __decorate([
-    Component({
-        selector: 'sky-list-paging',
-        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</sky-paging>\n",
-        providers: [
-            /* tslint:disable */
-            { provide: ListPagingComponent, useExisting: forwardRef(() => SkyListPagingComponent_1) }
-            /* tslint:enable */
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyListPagingComponent);
-
-let SkyListPagingModule = class SkyListPagingModule {
-};
-SkyListPagingModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyListPagingComponent
-        ],
-        imports: [
-            CommonModule,
-            SkyPagingModule
-        ],
-        exports: [
-            SkyListPagingComponent
-        ]
-    })
-], SkyListPagingModule);
-
-let SkyListBuilderResourcesProvider = class SkyListBuilderResourcesProvider {
-    constructor() {
-        this.resources = { "EN-US": { "skyux_list_show_secondary_actions_button": "More", "skyux_list_multiselect_clear_all": "Clear all", "skyux_list_mutliselect_select_all": "Select all", "skyux_list_mutliselect_show_selected": "Only show selected items", "skyux_list_view_switcher_dropdown_title": "Select view" } };
-    }
+class SkyListBuilderResourcesProvider {
     getString(localeInfo, name) {
-        return getStringForLocale(this.resources, localeInfo.locale, name);
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
     }
-};
-SkyListBuilderResourcesProvider = __decorate([
-    Injectable()
-], SkyListBuilderResourcesProvider);
-
-let SkyListBuilderResourcesModule = class SkyListBuilderResourcesModule {
-};
-SkyListBuilderResourcesModule = __decorate([
-    NgModule({
-        providers: [{
-                provide: SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyListBuilderResourcesProvider,
-                multi: true
-            }]
-    })
-], SkyListBuilderResourcesModule);
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyListBuilderResourcesModule {
+}
+SkyListBuilderResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListBuilderResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderResourcesModule, exports: [SkyI18nModule] });
+SkyListBuilderResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyListBuilderResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListBuilderResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyListBuilderResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
 
 /**
  * @internal
  */
-let SkyListSecondaryActionsService = class SkyListSecondaryActionsService {
+class SkyListSecondaryActionsService {
     constructor() {
         this.secondaryActionsCount = 0;
         this.secondaryActionsSubject = new BehaviorSubject(0);
@@ -1751,23 +1788,65 @@ let SkyListSecondaryActionsService = class SkyListSecondaryActionsService {
     removeSecondaryAction(action) {
         this.secondaryActionsCount--;
         this.secondaryActionsSubject.next(this.secondaryActionsCount);
-        this.actions = this.actions.filter(existingItem => existingItem !== action);
+        this.actions = this.actions.filter((existingItem) => existingItem !== action);
         this.actionsStream.next(this.actions);
     }
     ngOnDestroy() {
         this.secondaryActionsSubject.complete();
         this.actionsStream.complete();
     }
-};
-SkyListSecondaryActionsService = __decorate([
-    Injectable()
-], SkyListSecondaryActionsService);
+}
+SkyListSecondaryActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyListSecondaryActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsService, decorators: [{
+            type: Injectable
+        }] });
+
+// Note: this component is needed to ensure any reactive styles placed in the element have
+// their host to be based off of. Without this component the host is not written via the dispatcher.
+/**
+ * @internal
+ */
+class SkyListSecondaryActionsHostComponent {
+    constructor(changeDetector, actionService) {
+        this.changeDetector = changeDetector;
+        this.actionService = actionService;
+        this.dropdownHidden = false;
+        this.actions = [];
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.actionService.actionsStream
+            .pipe(takeUntil(this.ngUnsubscribe), distinctUntilChanged())
+            .subscribe((actions) => {
+            const hasSecondaryActions = actions.length > 0;
+            this.dropdownHidden = !hasSecondaryActions;
+            this.actions = actions;
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyListSecondaryActionsHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionsHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListSecondaryActionsHostComponent, 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 icon=\"ellipsis-h\"> </sky-icon>\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      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content> </ng-content>\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.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"], components: [{ type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2.λ2, selector: "sky-dropdown-button" }, { type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-secondary-actions-host',
+                    templateUrl: './list-secondary-actions-host.component.html',
+                    styleUrls: ['./list-secondary-actions-host.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyListSecondaryActionsService }]; } });
 
 /**
  * Adds a dropdown to the list toolbar for secondary actions. If the dropdown does not
  * include actions, the secondary actions dropdown is hidden.
  */
-let SkyListSecondaryActionsComponent = class SkyListSecondaryActionsComponent {
+class SkyListSecondaryActionsComponent {
     constructor(dispatcher) {
         this.dispatcher = dispatcher;
         this.actions = [];
@@ -1778,137 +1857,104 @@ let SkyListSecondaryActionsComponent = class SkyListSecondaryActionsComponent {
             id: 'secondary-actions',
             template: this.secondaryActionsTemplate,
             location: 'center',
-            index: this.secondaryActionsItemToolbarIndex
+            index: this.secondaryActionsItemToolbarIndex,
         });
-        this.dispatcher.toolbarAddItems([
-            secondaryActionItem
-        ]);
+        this.dispatcher.toolbarAddItems([secondaryActionItem]);
     }
-};
-SkyListSecondaryActionsComponent.ctorParameters = () => [
-    { type: ListStateDispatcher }
-];
-__decorate([
-    ViewChild('secondaryActions', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListSecondaryActionsComponent.prototype, "secondaryActionsTemplate", void 0);
-SkyListSecondaryActionsComponent = __decorate([
-    Component({
-        selector: 'sky-list-secondary-actions',
-        template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n",
-        providers: [
-            SkyListSecondaryActionsService
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush
-    })
-], SkyListSecondaryActionsComponent);
+}
+SkyListSecondaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListSecondaryActionsComponent, 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></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n", components: [{ type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-secondary-actions',
+                    templateUrl: './list-secondary-actions.component.html',
+                    providers: [SkyListSecondaryActionsService],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { secondaryActionsTemplate: [{
+                type: ViewChild,
+                args: ['secondaryActions', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
 
 /**
  * Adds actions to the secondary actions dropdown in the list toolbar.
  */
-let SkyListSecondaryActionComponent = class SkyListSecondaryActionComponent {
+class SkyListSecondaryActionComponent {
     constructor(actionService) {
         this.actionService = actionService;
     }
     ngAfterContentInit() {
         this.actionService.addSecondaryAction({
-            template: this.templateRef
+            template: this.templateRef,
         });
     }
-};
-SkyListSecondaryActionComponent.ctorParameters = () => [
-    { type: SkyListSecondaryActionsService }
-];
-__decorate([
-    ViewChild('listSecondaryAction', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListSecondaryActionComponent.prototype, "templateRef", void 0);
-SkyListSecondaryActionComponent = __decorate([
-    Component({
-        selector: 'sky-list-secondary-action',
-        template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n"
-    })
-], SkyListSecondaryActionComponent);
-
-// Note: this component is needed to ensure any reactive styles placed in the element have
-// their host to be based off of. Without this component the host is not written via the dispatcher.
-/**
- * @internal
- */
-let SkyListSecondaryActionsHostComponent = class SkyListSecondaryActionsHostComponent {
-    constructor(changeDetector, actionService) {
-        this.changeDetector = changeDetector;
-        this.actionService = actionService;
-        this.dropdownHidden = false;
-        this.actions = [];
-        this.ngUnsubscribe = new Subject();
-    }
-    ngOnInit() {
-        this.actionService.actionsStream
-            .pipe(takeUntil(this.ngUnsubscribe), distinctUntilChanged())
-            .subscribe((actions) => {
-            const hasSecondaryActions = (actions.length > 0);
-            this.dropdownHidden = !hasSecondaryActions;
-            this.actions = actions;
-            this.changeDetector.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-};
-SkyListSecondaryActionsHostComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: SkyListSecondaryActionsService }
-];
-SkyListSecondaryActionsHostComponent = __decorate([
-    Component({
-        selector: 'sky-list-secondary-actions-host',
-        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\n        icon=\"ellipsis-h\"\n      >\n      </sky-icon>\n      <span\n        class=\"sky-list-secondary-actions-btn-text\"\n      >\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\">\n        </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content>\n</ng-content>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.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-lg) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-lg) .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-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-xs) .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-lg) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-lg) .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-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}"]
-    })
-], SkyListSecondaryActionsHostComponent);
-
-let SkyListSecondaryActionsModule = class SkyListSecondaryActionsModule {
-};
-SkyListSecondaryActionsModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyListSecondaryActionsComponent,
-            SkyListSecondaryActionsHostComponent,
-            SkyListSecondaryActionComponent
-        ],
-        imports: [
+}
+SkyListSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListSecondaryActionComponent, 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></ng-content>\n</ng-template>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-secondary-action',
+                    templateUrl: './list-secondary-action.component.html',
+                }]
+        }], ctorParameters: function () { return [{ type: SkyListSecondaryActionsService }]; }, propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['listSecondaryAction', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyListSecondaryActionsModule {
+}
+SkyListSecondaryActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListSecondaryActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsModule, declarations: [SkyListSecondaryActionsComponent,
+        SkyListSecondaryActionsHostComponent,
+        SkyListSecondaryActionComponent], imports: [CommonModule,
+        SkyDropdownModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyListBuilderResourcesModule], exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent] });
+SkyListSecondaryActionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsModule, imports: [[
             CommonModule,
             SkyDropdownModule,
             SkyI18nModule,
             SkyIconModule,
-            SkyListBuilderResourcesModule
-        ],
-        exports: [
-            SkyListSecondaryActionsComponent,
-            SkyListSecondaryActionsHostComponent,
-            SkyListSecondaryActionComponent
-        ]
-    })
-], SkyListSecondaryActionsModule);
+            SkyListBuilderResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListSecondaryActionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListSecondaryActionsComponent,
+                        SkyListSecondaryActionsHostComponent,
+                        SkyListSecondaryActionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyDropdownModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyListBuilderResourcesModule,
+                    ],
+                    exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
+                }]
+        }] });
 
-let idIndex$3 = 0;
+let idIndex = 0;
 /**
  * Defines a toolbar item for the list toolbar.
  */
-let SkyListToolbarItemComponent = class SkyListToolbarItemComponent {
+class SkyListToolbarItemComponent {
     constructor() {
         /**
          * Specifies the ID of the item.
          */
-        this.id = `sky-list-toolbar-item-${++idIndex$3}`;
+        this.id = `sky-list-toolbar-item-${++idIndex}`;
         /**
          * Specifies the index of the item at the given item location.
          * @default -1
@@ -1924,49 +1970,48 @@ let SkyListToolbarItemComponent = class SkyListToolbarItemComponent {
     get template() {
         return this.templates.length > 0 ? this.templates.first : undefined;
     }
-};
-__decorate([
-    Input()
-], SkyListToolbarItemComponent.prototype, "id", void 0);
-__decorate([
-    Input()
-], SkyListToolbarItemComponent.prototype, "index", void 0);
-__decorate([
-    Input()
-], SkyListToolbarItemComponent.prototype, "location", void 0);
-__decorate([
-    ContentChildren(TemplateRef)
-], SkyListToolbarItemComponent.prototype, "templates", void 0);
-SkyListToolbarItemComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar-item',
-        template: '<ng-content></ng-content>'
-    })
-], SkyListToolbarItemComponent);
+}
+SkyListToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarItemComponent, selector: "sky-list-toolbar-item", inputs: { id: "id", index: "index", location: "location" }, queries: [{ propertyName: "templates", predicate: TemplateRef }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-item',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], location: [{
+                type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateRef]
+            }] } });
 
 /**
  * Adds a sort dropdown to the list toolbar.
  */
-let SkyListToolbarSortComponent = class SkyListToolbarSortComponent {
-};
-__decorate([
-    Input()
-], SkyListToolbarSortComponent.prototype, "label", void 0);
-__decorate([
-    Input()
-], SkyListToolbarSortComponent.prototype, "field", void 0);
-__decorate([
-    Input()
-], SkyListToolbarSortComponent.prototype, "type", void 0);
-__decorate([
-    Input()
-], SkyListToolbarSortComponent.prototype, "descending", void 0);
-SkyListToolbarSortComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar-sort',
-        template: ''
-    })
-], SkyListToolbarSortComponent);
+class SkyListToolbarSortComponent {
+}
+SkyListToolbarSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarSortComponent, selector: "sky-list-toolbar-sort", inputs: { label: "label", field: "field", type: "type", descending: "descending" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-sort',
+                    template: '',
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], descending: [{
+                type: Input
+            }] } });
 
 /**
  * Adds a section on the right side of the toolbar for items that substantially change
@@ -1974,15 +2019,18 @@ SkyListToolbarSortComponent = __decorate([
  * If the view section includes more than one item, simple filters appear on the left
  * and view switchers appear on the right.
  */
-let SkyListToolbarViewActionsComponent = class SkyListToolbarViewActionsComponent {
-};
-SkyListToolbarViewActionsComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar-view-actions',
-        template: "<ng-content></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}"]
-    })
-], SkyListToolbarViewActionsComponent);
+class SkyListToolbarViewActionsComponent {
+}
+SkyListToolbarViewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarViewActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarViewActionsComponent, selector: "sky-list-toolbar-view-actions", ngImport: i0, template: "<ng-content></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: "12.2.13", ngImport: i0, type: SkyListToolbarViewActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-view-actions',
+                    templateUrl: './list-toolbar-view-actions.component.html',
+                    styleUrls: ['./list-toolbar-view-actions.component.scss'],
+                }]
+        }] });
 
 /**
  * @internal
@@ -2003,6 +2051,22 @@ class ListToolbarConfigSetSortSelectorEnabledAction {
     }
 }
 
+/**
+ * @internal
+ */
+class ListToolbarStateDispatcher extends StateDispatcher {
+}
+ListToolbarStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+ListToolbarStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarStateDispatcher, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @internal
+ */
+class ListToolbarStateOrchestrator extends StateOrchestrator {
+}
+
 /**
  * @internal
  */
@@ -2020,69 +2084,215 @@ class ListToolbarConfigModel {
 /**
  * @internal
  */
-class ListToolbarStateModel {
+class ListToolbarConfigOrchestrator extends ListToolbarStateOrchestrator {
+    /* istanbul ignore next */
     constructor() {
-        this.config = new ListToolbarConfigModel();
+        super();
+        this.register(ListToolbarConfigSetSearchEnabledAction, this.setSearchEnabled).register(ListToolbarConfigSetSortSelectorEnabledAction, this.setSortSelectorEnabled);
+    }
+    setSearchEnabled(state, action) {
+        return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
+    }
+    setSortSelectorEnabled(state, action) {
+        return new ListToolbarConfigModel(Object.assign({}, state, { sortSelectorEnabled: action.enabled }));
     }
 }
 
 /**
  * @internal
  */
-let ListToolbarStateDispatcher = class ListToolbarStateDispatcher extends StateDispatcher {
-};
-ListToolbarStateDispatcher = __decorate([
-    Injectable()
-], ListToolbarStateDispatcher);
+class ListToolbarStateModel {
+    constructor() {
+        this.config = new ListToolbarConfigModel();
+    }
+}
+
 /**
  * @internal
  */
-class ListToolbarStateOrchestrator extends StateOrchestrator {
+class ListToolbarState extends StateNode {
+    constructor(initialState, dispatcher) {
+        super(initialState, dispatcher);
+        this.register('config', ListToolbarConfigOrchestrator).begin();
+    }
 }
+ListToolbarState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarState, deps: [{ token: ListToolbarStateModel }, { token: ListToolbarStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+ListToolbarState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ListToolbarState, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }]; } });
 
 /**
  * @internal
  */
-class ListToolbarConfigOrchestrator extends ListToolbarStateOrchestrator {
-    /* istanbul ignore next */
-    constructor() {
-        super();
-        this
-            .register(ListToolbarConfigSetSearchEnabledAction, this.setSearchEnabled)
-            .register(ListToolbarConfigSetSortSelectorEnabledAction, this.setSortSelectorEnabled);
-    }
-    setSearchEnabled(state, action) {
-        return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
-    }
-    setSortSelectorEnabled(state, action) {
-        return new ListToolbarConfigModel(Object.assign({}, state, { sortSelectorEnabled: action.enabled }));
+class SkyListToolbarItemRendererComponent {
+    ngOnInit() {
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
     }
 }
+SkyListToolbarItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: { template: "template" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarItemRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-item-renderer',
+                    template: '<ng-template #container></ng-template>',
+                }]
+        }], propDecorators: { template: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
 
+let uniqueId = 0;
 /**
  * @internal
  */
-let ListToolbarState = class ListToolbarState extends StateNode {
-    constructor(initialState, dispatcher) {
-        super(initialState, dispatcher);
-        this
-            .register('config', ListToolbarConfigOrchestrator)
-            .begin();
+class SkyListMultiselectToolbarComponent {
+    constructor(state, dispatcher) {
+        this.state = state;
+        this.dispatcher = dispatcher;
+        this.showOnlySelected = false;
+        this.multiselectToolbarId = `sky-list-multiselect-toolbar-${uniqueId++}`;
+        this.selectedIdMap = new Map();
+        this.ngUnsubscribe = new Subject();
     }
-};
-ListToolbarState.ctorParameters = () => [
-    { type: ListToolbarStateModel },
-    { type: ListToolbarStateDispatcher }
-];
-ListToolbarState = __decorate([
-    Injectable()
-], ListToolbarState);
+    ngOnInit() {
+        this.state
+            .pipe(map((t) => t.selected.item), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.selectedMapEqual))
+            .subscribe((model) => {
+            this.selectedIdMap = model.selectedIdMap;
+            if (this.showOnlySelected) {
+                this.reapplyFilter(true);
+            }
+        });
+        // If 'show-selected' filter is programatically set from a child component (e.g. checkilst),
+        // make sure the checked state of the 'show-selected' checkbox stays in sync.
+        this.state
+            .pipe(map((t) => t.filters), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.showSelectedValuesEqual))
+            .subscribe((filters) => {
+            const showSelectedFilter = filters.find((filter) => filter.name === 'show-selected');
+            if (showSelectedFilter) {
+                this.showOnlySelected = showSelectedFilter.value === 'true';
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    selectAll() {
+        this.state
+            .pipe(map((state) => state.items.items), take(1))
+            .subscribe((items) => {
+            this.dispatcher.setSelected(items.map((item) => item.id), true);
+            if (this.showOnlySelected) {
+                this.reapplyFilter(this.showOnlySelected);
+            }
+        });
+    }
+    clearSelections() {
+        this.state
+            .pipe(map((state) => state.items.items), take(1))
+            .subscribe((items) => {
+            this.dispatcher.setSelected(items.map((item) => item.id), false);
+            if (this.showOnlySelected) {
+                this.reapplyFilter(this.showOnlySelected);
+            }
+        });
+    }
+    changeVisibleItems(change) {
+        this.showOnlySelected = change.checked;
+        this.reapplyFilter(change.checked);
+    }
+    reapplyFilter(isSelected) {
+        let self = this;
+        this.state
+            .pipe(map((state) => state.filters), take(1))
+            .subscribe((filters) => {
+            filters = filters.filter((filter) => filter.name !== 'show-selected');
+            filters.push(self.getShowSelectedFilter(isSelected));
+            this.dispatcher.filtersUpdate(filters);
+        });
+        // If "show selected" is checked and paging is enabled, go to page one.
+        /* istanbul ignore else */
+        if (isSelected) {
+            this.state.pipe(take(1)).subscribe((currentState) => {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
+                    this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+                }
+            });
+        }
+        this.dispatcher.toolbarSetDisabled(isSelected);
+    }
+    getShowSelectedFilter(isSelected) {
+        return new ListFilterModel({
+            name: 'show-selected',
+            value: isSelected.toString(),
+            filterFunction: (model, showOnlySelected) => {
+                /* istanbul ignore else */
+                if (showOnlySelected.toString() !== false.toString()) {
+                    return this.selectedIdMap.get(model.id);
+                }
+            },
+            defaultValue: false.toString(),
+        });
+    }
+    showSelectedValuesEqual(prev, next) {
+        const prevShowSelectedFilter = prev.find((filter) => filter.name === 'show-selected');
+        const nextShowSelectedFilter = next.find((filter) => filter.name === 'show-selected');
+        // Both undefined.
+        if (!prevShowSelectedFilter && !nextShowSelectedFilter) {
+            return true;
+        }
+        // Only one undefined.
+        if ((prevShowSelectedFilter && !nextShowSelectedFilter) ||
+            (!prevShowSelectedFilter && nextShowSelectedFilter)) {
+            return false;
+        }
+        // Defined, but with different "value".
+        return prevShowSelectedFilter.value === nextShowSelectedFilter.value;
+    }
+    selectedMapEqual(prev, next) {
+        if (prev.selectedIdMap.size !== next.selectedIdMap.size) {
+            return false;
+        }
+        for (let i = 0; i < next.selectedIdMap.size; i++) {
+            const key = Array.from(next.selectedIdMap.keys())[i];
+            const value = next.selectedIdMap.get(key);
+            /* istanbul ignore next */
+            if (value !== prev.selectedIdMap.get(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+SkyListMultiselectToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListMultiselectToolbarComponent, 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-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\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_mutliselect_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_mutliselect_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"], components: [{ type: i3$2.λ37, selector: "sky-toolbar" }, { type: i3$2.λ38, selector: "sky-toolbar-section" }, { type: i3$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3$2.λ40, selector: "sky-toolbar-view-actions" }, { type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-multiselect-toolbar',
+                    templateUrl: './list-multiselect-toolbar.component.html',
+                    styleUrls: ['./list-multiselect-toolbar.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { showOnlySelected: [{
+                type: Input
+            }] } });
 
 let nextId = 0;
 /**
  * Displays a toolbar for a SKY UX-themed list of data.
  */
-let SkyListToolbarComponent = class SkyListToolbarComponent {
+class SkyListToolbarComponent {
     constructor(changeDetector, state, dispatcher, toolbarState, toolbarDispatcher) {
         this.changeDetector = changeDetector;
         this.state = state;
@@ -2130,7 +2340,9 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
         return this._inMemorySearchEnabled;
     }
     get isFilterBarDisplayed() {
-        return !this.isToolbarDisabled && this.hasInlineFilters && this.inlineFilterBarExpanded;
+        return (!this.isToolbarDisabled &&
+            this.hasInlineFilters &&
+            this.inlineFilterBarExpanded);
     }
     get filterButtonAriaControls() {
         return this.isFilterBarDisplayed ? this.listFilterInlineId : undefined;
@@ -2161,23 +2373,20 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
                         id: 'sort-selector',
                         template: this.sortSelectorTemplate,
                         location: 'left',
-                        index: this.sortSelectorItemToolbarIndex
-                    })
+                        index: this.sortSelectorItemToolbarIndex,
+                    }),
                 ]);
             }
             else if (currentSort.length < 1 && this.hasSortSelectors) {
                 this.hasSortSelectors = false;
-                this.dispatcher.toolbarRemoveItems([
-                    'sort-selector'
-                ]);
+                this.dispatcher.toolbarRemoveItems(['sort-selector']);
             }
         });
-        this.searchTextInput = this.state.pipe(takeUntil(this.ngUnsubscribe), map(s => s.search.searchText), distinctUntilChanged());
-        this.view = this.state.pipe(takeUntil(this.ngUnsubscribe), map(s => s.views.active), distinctUntilChanged());
+        this.searchTextInput = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.search.searchText), distinctUntilChanged());
+        this.view = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.views.active), distinctUntilChanged());
         this.watchTemplates();
         this.type = this.state.pipe(takeUntil(this.ngUnsubscribe), map((state) => state.toolbar.type), distinctUntilChanged());
-        this.type.pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((toolbarType) => {
+        this.type.pipe(takeUntil(this.ngUnsubscribe)).subscribe((toolbarType) => {
             if (toolbarType === 'search') {
                 this.dispatcher.toolbarRemoveItems(['search']);
             }
@@ -2186,80 +2395,77 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
                     new ListToolbarItemModel({
                         id: 'search',
                         template: this.searchTemplate,
-                        location: 'right'
-                    })
+                        location: 'right',
+                    }),
                 ]);
             }
         });
-        this.isSearchEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map(s => s.config), distinctUntilChanged(), map(c => c.searchEnabled));
-        this.state.pipe(map(s => s.toolbar), takeUntil(this.ngUnsubscribe), distinctUntilChanged(), map(c => c.disabled))
-            .subscribe(isDisabled => this.isToolbarDisabled = isDisabled);
-        this.isSortSelectorEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map(s => s.config), distinctUntilChanged(), map(c => c.sortSelectorEnabled));
-        this.isMultiselectEnabled = this.state.pipe(takeUntil(this.ngUnsubscribe), map(s => s.toolbar), distinctUntilChanged(), map(t => t.showMultiselectToolbar));
-        this.hasAppliedFilters = this.state.pipe(takeUntil(this.ngUnsubscribe), map(s => s.filters), distinctUntilChanged(), map((filters) => {
+        this.isSearchEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.config), distinctUntilChanged(), map((c) => c.searchEnabled));
+        this.state
+            .pipe(map((s) => s.toolbar), takeUntil(this.ngUnsubscribe), distinctUntilChanged(), map((c) => c.disabled))
+            .subscribe((isDisabled) => (this.isToolbarDisabled = isDisabled));
+        this.isSortSelectorEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.config), distinctUntilChanged(), map((c) => c.sortSelectorEnabled));
+        this.isMultiselectEnabled = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.toolbar), distinctUntilChanged(), map((t) => t.showMultiselectToolbar));
+        this.hasAppliedFilters = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.filters), distinctUntilChanged(), map((filters) => {
             let activeFilters = filters.filter((f) => {
-                return f.value !== '' &&
+                return (f.value !== '' &&
                     f.value !== undefined &&
                     f.value !== false &&
-                    f.value !== f.defaultValue;
+                    f.value !== f.defaultValue);
             });
             return activeFilters.length > 0;
         }));
-        this.state.pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe((current) => {
-            this.hasAdditionalToolbarSection = (current.toolbar.items.length > 0);
+        this.state.pipe(takeUntil(this.ngUnsubscribe)).subscribe((current) => {
+            this.hasAdditionalToolbarSection = current.toolbar.items.length > 0;
             this.changeDetector.detectChanges();
         });
     }
     ngAfterContentInit() {
         // Inject custom toolbar items.
         this.toolbarItems.forEach((toolbarItem) => {
-            this.dispatcher.toolbarAddItems([
-                new ListToolbarItemModel(toolbarItem)
-            ]);
+            this.dispatcher.toolbarAddItems([new ListToolbarItemModel(toolbarItem)]);
             this.customItemIds.push(toolbarItem.id);
         });
-        this.toolbarItems.changes.pipe(takeUntil(this.ngUnsubscribe))
+        this.toolbarItems.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((newItems) => {
-            newItems.forEach(item => {
+            newItems.forEach((item) => {
                 if (this.customItemIds.indexOf(item.id) < 0) {
-                    this.dispatcher.toolbarAddItems([
-                        new ListToolbarItemModel(item)
-                    ]);
+                    this.dispatcher.toolbarAddItems([new ListToolbarItemModel(item)]);
                     this.customItemIds.push(item.id);
                 }
             });
             const itemsToRemove = [];
             this.customItemIds.forEach((itemId, index) => {
-                if (!newItems.find(item => item.id === itemId)) {
+                if (!newItems.find((item) => item.id === itemId)) {
                     itemsToRemove.push(itemId);
                     this.customItemIds.splice(index, 1);
                 }
             });
             this.dispatcher.toolbarRemoveItems(itemsToRemove);
         });
-        const sortModels = this.toolbarSorts.map(sort => new ListSortLabelModel({
+        const sortModels = this.toolbarSorts.map((sort) => new ListSortLabelModel({
             text: sort.label,
             fieldSelector: sort.field,
             fieldType: sort.type,
             global: true,
-            descending: sort.descending
+            descending: sort.descending,
         }));
         this.dispatcher.sortSetGlobal(sortModels);
         // Add inline filters.
-        this.showFilterSummary = (this.filterSummary.length > 0);
-        this.hasInlineFilters = (this.inlineFilter.length > 0);
+        this.showFilterSummary = this.filterSummary.length > 0;
+        this.hasInlineFilters = this.inlineFilter.length > 0;
         if (this.hasInlineFilters) {
             this.dispatcher.toolbarAddItems([
                 new ListToolbarItemModel({
                     template: this.inlineFilterButtonTemplate,
                     location: 'left',
-                    index: this.inlineFiltersItemToolbarIndex
-                })
+                    index: this.inlineFiltersItemToolbarIndex,
+                }),
             ]);
         }
         // Check for view actions
-        this.hasViewActions = (this.viewActions.length > 0);
+        this.hasViewActions = this.viewActions.length > 0;
     }
     ngOnDestroy() {
         this.searchApplied.complete();
@@ -2268,10 +2474,13 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
     }
     setSort(sort) {
         this.state.pipe(take(1)).subscribe((currentState) => {
-            if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+            if (currentState.paging.pageNumber &&
+                currentState.paging.pageNumber !== 1) {
                 this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
             }
-            this.dispatcher.sortSetFieldSelectors([{ fieldSelector: sort.fieldSelector, descending: sort.descending }]);
+            this.dispatcher.sortSetFieldSelectors([
+                { fieldSelector: sort.fieldSelector, descending: sort.descending },
+            ]);
         });
     }
     inlineFilterButtonClick() {
@@ -2281,7 +2490,8 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
         this.searchApplied.next(searchText);
         if (this.inMemorySearchEnabled) {
             this.state.pipe(take(1)).subscribe((currentState) => {
-                if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
                     this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                 }
                 this.dispatcher.searchSetText(searchText);
@@ -2289,16 +2499,17 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
         }
     }
     itemIsInView(itemView, activeView) {
-        return (itemView === undefined || itemView === activeView);
+        return itemView === undefined || itemView === activeView;
     }
     getSortSelectors() {
-        return combineLatest(this.state.pipe(map(s => s.sort.available), distinctUntilChanged()), this.state.pipe(map(s => s.sort.global), distinctUntilChanged()), this.state.pipe(map(s => s.sort.fieldSelectors), distinctUntilChanged()), (available, global, fieldSelectors) => {
+        return combineLatest(this.state.pipe(map((s) => s.sort.available), distinctUntilChanged()), this.state.pipe(map((s) => s.sort.global), distinctUntilChanged()), this.state.pipe(map((s) => s.sort.fieldSelectors), distinctUntilChanged()), (available, global, fieldSelectors) => {
             // Get sorts that are in the global that are not in the available
-            let sorts = global.filter(g => available.filter(a => a.fieldSelector === g.fieldSelector).length === 0);
-            let resultSortSelectors = [...sorts, ...available].map(sortLabels => {
-                let fs = fieldSelectors.filter(f => {
-                    return f.fieldSelector === sortLabels.fieldSelector
-                        && f.descending === sortLabels.descending;
+            let sorts = global.filter((g) => available.filter((a) => a.fieldSelector === g.fieldSelector)
+                .length === 0);
+            let resultSortSelectors = [...sorts, ...available].map((sortLabels) => {
+                let fs = fieldSelectors.filter((f) => {
+                    return (f.fieldSelector === sortLabels.fieldSelector &&
+                        f.descending === sortLabels.descending);
                 });
                 let selected = false;
                 if (fs.length > 0) {
@@ -2306,14 +2517,14 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
                 }
                 return {
                     sort: sortLabels,
-                    selected: selected
+                    selected: selected,
                 };
             });
             return resultSortSelectors;
         }).pipe(takeUntil(this.ngUnsubscribe));
     }
     watchTemplates() {
-        combineLatest(this.state.pipe(map(s => s.toolbar), distinctUntilChanged()), this.view.pipe(distinctUntilChanged()), (toolbar, view) => {
+        combineLatest(this.state.pipe(map((s) => s.toolbar), distinctUntilChanged()), this.view.pipe(distinctUntilChanged()), (toolbar, view) => {
             const items = toolbar.items.filter((i) => {
                 return this.itemIsInView(i.view, view);
             });
@@ -2323,7 +2534,8 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
                 templates[item.location].push(item);
             });
             return templates;
-        }).pipe(takeUntil(this.ngUnsubscribe))
+        })
+            .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((value) => {
             this.leftTemplates = value.left;
             this.centerTemplates = value.center;
@@ -2331,277 +2543,120 @@ let SkyListToolbarComponent = class SkyListToolbarComponent {
             this.changeDetector.markForCheck();
         });
     }
-};
-SkyListToolbarComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ListState },
-    { type: ListStateDispatcher },
-    { type: ListToolbarState },
-    { type: ListToolbarStateDispatcher }
-];
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "inMemorySearchEnabled", null);
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "placeholder", void 0);
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "searchEnabled", void 0);
-__decorate([
-    ViewChild(SkySearchComponent, {
-        read: SkySearchComponent,
-        static: false
-    })
-], SkyListToolbarComponent.prototype, "searchComponent", void 0);
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "sortSelectorEnabled", void 0);
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "toolbarType", void 0);
-__decorate([
-    Input()
-], SkyListToolbarComponent.prototype, "searchText", void 0);
-__decorate([
-    ContentChildren(SkyListToolbarItemComponent)
-], SkyListToolbarComponent.prototype, "toolbarItems", void 0);
-__decorate([
-    ContentChildren(SkyListToolbarSortComponent)
-], SkyListToolbarComponent.prototype, "toolbarSorts", void 0);
-__decorate([
-    ContentChildren(SkyListFilterSummaryComponent)
-], SkyListToolbarComponent.prototype, "filterSummary", void 0);
-__decorate([
-    ContentChildren(SkyListFilterInlineComponent)
-], SkyListToolbarComponent.prototype, "inlineFilter", void 0);
-__decorate([
-    ContentChildren(SkyListToolbarViewActionsComponent)
-], SkyListToolbarComponent.prototype, "viewActions", void 0);
-__decorate([
-    ViewChild('search', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListToolbarComponent.prototype, "searchTemplate", void 0);
-__decorate([
-    ViewChild('sortSelector', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListToolbarComponent.prototype, "sortSelectorTemplate", void 0);
-__decorate([
-    ViewChild('inlineFilterButton', {
-        read: TemplateRef,
-        static: true
-    })
-], SkyListToolbarComponent.prototype, "inlineFilterButtonTemplate", void 0);
-SkyListToolbarComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar',
-        template: "<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content\n          select=\"sky-list-toolbar-view-actions\"\n        >\n        </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\">\n      <ng-content select=\"sky-list-filter-summary\">\n      </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div *ngIf=\"(type | async) === 'search' &&\n    ((isSearchEnabled | async) || hasAdditionalToolbarSection)\"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"(isSearchEnabled | async)\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content\n            select=\"sky-list-toolbar-view-actions\"\n          >\n          </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\">\n    </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\"\n    class=\"sky-list-toolbar-search-wrapper\"\n  >\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    </sky-search>\n    <ng-content\n      select=\"sky-list-toolbar-search-actions\"\n    ></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\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  </sky-filter-button>\n</ng-template>\n",
-        providers: [
-            ListToolbarState,
-            ListToolbarStateDispatcher,
-            ListToolbarStateModel
-        ],
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".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-search-dismiss-absolute,.sky-list-toolbar-search ::ng-deep .sky-toolbar-container{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled,.sky-list-toolbar-search ::ng-deep input[type=text]:disabled{background-color:#cdcfd2;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}"]
-    })
-], SkyListToolbarComponent);
-
-/**
- * @internal
- */
-let SkyListToolbarItemRendererComponent = class SkyListToolbarItemRendererComponent {
-    ngOnInit() {
-        if (this.template !== undefined) {
-            this.container.createEmbeddedView(this.template, this);
-        }
-    }
-};
-__decorate([
-    Input()
-], SkyListToolbarItemRendererComponent.prototype, "template", void 0);
-__decorate([
-    ViewChild('container', {
-        read: ViewContainerRef,
-        static: true
-    })
-], SkyListToolbarItemRendererComponent.prototype, "container", void 0);
-SkyListToolbarItemRendererComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar-item-renderer',
-        template: '<ng-template #container></ng-template>'
-    })
-], SkyListToolbarItemRendererComponent);
-
-let uniqueId = 0;
-/**
- * @internal
- */
-let SkyListMultiselectToolbarComponent = class SkyListMultiselectToolbarComponent {
-    constructor(state, dispatcher) {
-        this.state = state;
-        this.dispatcher = dispatcher;
-        this.showOnlySelected = false;
-        this.multiselectToolbarId = `sky-list-multiselect-toolbar-${uniqueId++}`;
-        this.selectedIdMap = new Map();
-        this.ngUnsubscribe = new Subject();
-    }
-    ngOnInit() {
-        this.state
-            .pipe(map(t => t.selected.item), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.selectedMapEqual))
-            .subscribe((model) => {
-            this.selectedIdMap = model.selectedIdMap;
-            if (this.showOnlySelected) {
-                this.reapplyFilter(true);
-            }
-        });
-        // If 'show-selected' filter is programatically set from a child component (e.g. checkilst),
-        // make sure the checked state of the 'show-selected' checkbox stays in sync.
-        this.state
-            .pipe(map(t => t.filters), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.showSelectedValuesEqual))
-            .subscribe((filters) => {
-            const showSelectedFilter = filters.find(filter => filter.name === 'show-selected');
-            if (showSelectedFilter) {
-                this.showOnlySelected = (showSelectedFilter.value === 'true');
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-    }
-    selectAll() {
-        this.state
-            .pipe(map(state => state.items.items), take(1))
-            .subscribe(items => {
-            this.dispatcher.setSelected(items.map(item => item.id), true);
-            if (this.showOnlySelected) {
-                this.reapplyFilter(this.showOnlySelected);
-            }
-        });
-    }
-    clearSelections() {
-        this.state
-            .pipe(map(state => state.items.items), take(1))
-            .subscribe(items => {
-            this.dispatcher.setSelected(items.map(item => item.id), false);
-            if (this.showOnlySelected) {
-                this.reapplyFilter(this.showOnlySelected);
-            }
-        });
-    }
-    changeVisibleItems(change) {
-        this.showOnlySelected = change.checked;
-        this.reapplyFilter(change.checked);
-    }
-    reapplyFilter(isSelected) {
-        let self = this;
-        this.state
-            .pipe(map(state => state.filters), take(1))
-            .subscribe((filters) => {
-            filters = filters.filter(filter => filter.name !== 'show-selected');
-            filters.push(self.getShowSelectedFilter(isSelected));
-            this.dispatcher.filtersUpdate(filters);
-        });
-        // If "show selected" is checked and paging is enabled, go to page one.
-        /* istanbul ignore else */
-        if (isSelected) {
-            this.state.pipe(take(1))
-                .subscribe((currentState) => {
-                if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
-                    this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
-                }
-            });
-        }
-        this.dispatcher.toolbarSetDisabled(isSelected);
-    }
-    getShowSelectedFilter(isSelected) {
-        return new ListFilterModel({
-            name: 'show-selected',
-            value: isSelected.toString(),
-            filterFunction: (model, showOnlySelected) => {
-                /* istanbul ignore else */
-                if (showOnlySelected.toString() !== false.toString()) {
-                    return this.selectedIdMap.get(model.id);
-                }
-            },
-            defaultValue: false.toString()
-        });
-    }
-    showSelectedValuesEqual(prev, next) {
-        const prevShowSelectedFilter = prev.find(filter => filter.name === 'show-selected');
-        const nextShowSelectedFilter = next.find(filter => filter.name === 'show-selected');
-        // Both undefined.
-        if (!prevShowSelectedFilter && !nextShowSelectedFilter) {
-            return true;
-        }
-        // Only one undefined.
-        if ((prevShowSelectedFilter && !nextShowSelectedFilter) || (!prevShowSelectedFilter && nextShowSelectedFilter)) {
-            return false;
-        }
-        // Defined, but with different "value".
-        return prevShowSelectedFilter.value === nextShowSelectedFilter.value;
-    }
-    selectedMapEqual(prev, next) {
-        if (prev.selectedIdMap.size !== next.selectedIdMap.size) {
-            return false;
-        }
-        for (let i = 0; i < next.selectedIdMap.size; i++) {
-            const key = Array.from(next.selectedIdMap.keys())[i];
-            const value = next.selectedIdMap.get(key);
-            if (value !== prev.selectedIdMap.get(key)) {
-                return false;
-            }
-        }
-        return true;
-    }
-};
-SkyListMultiselectToolbarComponent.ctorParameters = () => [
-    { type: ListState },
-    { type: ListStateDispatcher }
-];
-__decorate([
-    Input()
-], SkyListMultiselectToolbarComponent.prototype, "showOnlySelected", void 0);
-SkyListMultiselectToolbarComponent = __decorate([
-    Component({
-        selector: 'sky-list-multiselect-toolbar',
-        template: "<sky-toolbar\n  class=\"sky-list-multiselect-toolbar\"\n>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer\n        [template]=\"selectAllTemplate\"\n      >\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer\n        [template]=\"clearSelectionsTemplate\"\n      >\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\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_mutliselect_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_mutliselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n",
-        styles: [":host-context(.sky-list-toolbar-search+) .sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(sky-toolbar+) .sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}"]
-    })
-], SkyListMultiselectToolbarComponent);
+}
+SkyListToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ListState }, { token: ListStateDispatcher }, { token: ListToolbarState }, { token: ListToolbarStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarComponent, 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  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section\n      *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n    >\n      <ng-content select=\"sky-list-filter-summary\"> </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div\n    *ngIf=\"\n      (type | async) === 'search' &&\n      ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n    \"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\"> </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\" 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    </sky-search>\n    <ng-content select=\"sky-list-toolbar-search-actions\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    *ngIf=\"\n      (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n    \"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\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  </sky-filter-button>\n</ng-template>\n", styles: [".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:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;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"], components: [{ type: i3$2.λ37, selector: "sky-toolbar" }, { type: i3$2.λ38, selector: "sky-toolbar-section" }, { type: i3$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3$2.λ40, selector: "sky-toolbar-view-actions" }, { type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i3.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i3.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar',
+                    templateUrl: './list-toolbar.component.html',
+                    styleUrls: ['./list-toolbar.component.scss'],
+                    providers: [
+                        ListToolbarState,
+                        ListToolbarStateDispatcher,
+                        ListToolbarStateModel,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }]; }, propDecorators: { inMemorySearchEnabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchEnabled: [{
+                type: Input
+            }], searchComponent: [{
+                type: ViewChild,
+                args: [SkySearchComponent, {
+                        read: SkySearchComponent,
+                        static: false,
+                    }]
+            }], sortSelectorEnabled: [{
+                type: Input
+            }], toolbarType: [{
+                type: Input
+            }], searchText: [{
+                type: Input
+            }], toolbarItems: [{
+                type: ContentChildren,
+                args: [SkyListToolbarItemComponent]
+            }], toolbarSorts: [{
+                type: ContentChildren,
+                args: [SkyListToolbarSortComponent]
+            }], filterSummary: [{
+                type: ContentChildren,
+                args: [SkyListFilterSummaryComponent]
+            }], inlineFilter: [{
+                type: ContentChildren,
+                args: [SkyListFilterInlineComponent]
+            }], viewActions: [{
+                type: ContentChildren,
+                args: [SkyListToolbarViewActionsComponent]
+            }], searchTemplate: [{
+                type: ViewChild,
+                args: ['search', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], sortSelectorTemplate: [{
+                type: ViewChild,
+                args: ['sortSelector', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], inlineFilterButtonTemplate: [{
+                type: ViewChild,
+                args: ['inlineFilterButton', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
 
 /**
  * Displays custom actions in the toolbar beside to the search bar.
  */
-let SkyListToolbarSearchActionsComponent = class SkyListToolbarSearchActionsComponent {
-};
-SkyListToolbarSearchActionsComponent = __decorate([
-    Component({
-        selector: 'sky-list-toolbar-search-actions',
-        template: "<div\n  class=\"sky-list-toolbar-search-actions\"\n>\n  <ng-content></ng-content>\n</div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        styles: [".sky-list-toolbar-search-actions{margin-left:10px}"]
-    })
-], SkyListToolbarSearchActionsComponent);
-
-let SkyListToolbarModule = class SkyListToolbarModule {
-};
-SkyListToolbarModule = __decorate([
-    NgModule({
-        declarations: [
-            SkyListToolbarComponent,
-            SkyListToolbarItemComponent,
-            SkyListToolbarItemRendererComponent,
-            SkyListMultiselectToolbarComponent,
-            SkyListToolbarSearchActionsComponent,
-            SkyListToolbarSortComponent,
-            SkyListToolbarViewActionsComponent
-        ],
-        imports: [
+class SkyListToolbarSearchActionsComponent {
+}
+SkyListToolbarSearchActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarSearchActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyListToolbarSearchActionsComponent, selector: "sky-list-toolbar-search-actions", ngImport: i0, template: "<div class=\"sky-list-toolbar-search-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-list-toolbar-search-actions{margin-left:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarSearchActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-search-actions',
+                    templateUrl: './list-toolbar-search-actions.component.html',
+                    styleUrls: ['./list-toolbar-search-actions.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class SkyListToolbarModule {
+}
+SkyListToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarModule, declarations: [SkyListToolbarComponent,
+        SkyListToolbarItemComponent,
+        SkyListToolbarItemRendererComponent,
+        SkyListMultiselectToolbarComponent,
+        SkyListToolbarSearchActionsComponent,
+        SkyListToolbarSortComponent,
+        SkyListToolbarViewActionsComponent], imports: [CommonModule,
+        SkyCheckboxModule,
+        SkyI18nModule,
+        SkyToolbarModule,
+        SkySearchModule,
+        SkySortModule,
+        SkyFilterModule,
+        SkyListFiltersModule,
+        SkyIconModule,
+        SkyListBuilderResourcesModule], exports: [SkyListToolbarComponent,
+        SkyListToolbarItemComponent,
+        SkyListToolbarSearchActionsComponent,
+        SkyListToolbarSortComponent,
+        SkyListToolbarViewActionsComponent] });
+SkyListToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarModule, imports: [[
             CommonModule,
             SkyCheckboxModule,
             SkyI18nModule,
@@ -2611,23 +2666,45 @@ SkyListToolbarModule = __decorate([
             SkyFilterModule,
             SkyListFiltersModule,
             SkyIconModule,
-            SkyListBuilderResourcesModule
-        ],
-        exports: [
-            SkyListToolbarComponent,
-            SkyListToolbarItemComponent,
-            SkyListToolbarItemRendererComponent,
-            SkyListMultiselectToolbarComponent,
-            SkyListToolbarSearchActionsComponent,
-            SkyListToolbarSortComponent,
-            SkyListToolbarViewActionsComponent
-        ]
-    })
-], SkyListToolbarModule);
+            SkyListBuilderResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyListToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListToolbarComponent,
+                        SkyListToolbarItemComponent,
+                        SkyListToolbarItemRendererComponent,
+                        SkyListMultiselectToolbarComponent,
+                        SkyListToolbarSearchActionsComponent,
+                        SkyListToolbarSortComponent,
+                        SkyListToolbarViewActionsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyCheckboxModule,
+                        SkyI18nModule,
+                        SkyToolbarModule,
+                        SkySearchModule,
+                        SkySortModule,
+                        SkyFilterModule,
+                        SkyListFiltersModule,
+                        SkyIconModule,
+                        SkyListBuilderResourcesModule,
+                    ],
+                    exports: [
+                        SkyListToolbarComponent,
+                        SkyListToolbarItemComponent,
+                        SkyListToolbarSearchActionsComponent,
+                        SkyListToolbarSortComponent,
+                        SkyListToolbarViewActionsComponent,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ListDataProvider, ListDataRequestModel, ListDataResponseModel, ListFilterModel, ListFiltersOrchestrator, ListFiltersUpdateAction, ListItemsLoadAction, ListItemsOrchestrator, ListItemsSetLoadingAction, ListItemsSetSelectedAction, ListPagingModel, ListPagingOrchestrator, ListPagingSetItemsPerPageAction, ListPagingSetMaxPagesAction, ListPagingSetPageNumberAction, ListSearchModel, ListSearchOrchestrator, ListSearchSetFieldSelectorsAction, ListSearchSetFunctionsAction, ListSearchSetOptionsAction, ListSearchSetSearchTextAction, ListSelectedLoadAction, ListSelectedModel, ListSelectedOrchestrator, ListSelectedSetItemSelectedAction, ListSelectedSetItemsSelectedAction, ListSelectedSetLoadingAction, ListSortLabelModel, ListSortModel, ListSortOrchestrator, ListSortSetAvailableAction, ListSortSetFieldSelectorsAction, ListSortSetGlobalAction, ListState, ListStateDispatcher, ListStateModel, ListStateOrchestrator, ListToolbarItemModel, ListToolbarItemsDisableAction, ListToolbarItemsLoadAction, ListToolbarItemsRemoveAction, ListToolbarModel, ListToolbarOrchestrator, ListToolbarSetExistsAction, ListToolbarSetTypeAction, ListToolbarShowMultiselectToolbarAction, ListViewComponent, ListViewModel, ListViewsLoadAction, ListViewsModel, ListViewsOrchestrator, ListViewsSetActiveAction, SkyListComponent, SkyListFilterInlineModel, SkyListFiltersModule, SkyListInMemoryDataProvider, SkyListModule, SkyListPagingModule, SkyListSecondaryActionsComponent, SkyListSecondaryActionsModule, SkyListToolbarComponent, SkyListToolbarModule, SkyListFilterButtonComponent as ɵa, SkyListFilterSummaryComponent as ɵb, SkyListFilterInlineItemComponent as ɵc, SkyListFilterInlineComponent as ɵd, SkyListFilterInlineItemRendererComponent as ɵe, SkyListPagingComponent as ɵf, ListPagingComponent as ɵg, SkyListSecondaryActionsService as ɵh, SkyListSecondaryActionsHostComponent as ɵi, SkyListSecondaryActionComponent as ɵj, SkyListBuilderResourcesModule as ɵk, SkyListBuilderResourcesProvider as ɵl, ListToolbarState as ɵm, ListToolbarStateModel as ɵn, ListToolbarStateDispatcher as ɵo, SkyListToolbarItemComponent as ɵp, SkyListToolbarSortComponent as ɵq, SkyListToolbarViewActionsComponent as ɵr, SkyListToolbarItemRendererComponent as ɵs, SkyListMultiselectToolbarComponent as ɵt, SkyListToolbarSearchActionsComponent as ɵu };
+export { ListDataProvider, ListDataRequestModel, ListDataResponseModel, ListFilterModel, ListFiltersOrchestrator, ListFiltersUpdateAction, ListItemsLoadAction, ListItemsOrchestrator, ListItemsSetLoadingAction, ListItemsSetSelectedAction, ListPagingModel, ListPagingOrchestrator, ListPagingSetItemsPerPageAction, ListPagingSetMaxPagesAction, ListPagingSetPageNumberAction, ListSearchModel, ListSearchOrchestrator, ListSearchSetFieldSelectorsAction, ListSearchSetFunctionsAction, ListSearchSetOptionsAction, ListSearchSetSearchTextAction, ListSelectedLoadAction, ListSelectedModel, ListSelectedOrchestrator, ListSelectedSetItemSelectedAction, ListSelectedSetItemsSelectedAction, ListSelectedSetLoadingAction, ListSortLabelModel, ListSortModel, ListSortOrchestrator, ListSortSetAvailableAction, ListSortSetFieldSelectorsAction, ListSortSetGlobalAction, ListState, ListStateDispatcher, ListStateModel, ListStateOrchestrator, ListToolbarItemModel, ListToolbarItemsDisableAction, ListToolbarItemsLoadAction, ListToolbarItemsRemoveAction, ListToolbarModel, ListToolbarOrchestrator, ListToolbarSetExistsAction, ListToolbarSetTypeAction, ListToolbarShowMultiselectToolbarAction, ListViewComponent, ListViewModel, ListViewsLoadAction, ListViewsModel, ListViewsOrchestrator, ListViewsSetActiveAction, SkyListComponent, SkyListFilterInlineModel, SkyListFiltersModule, SkyListInMemoryDataProvider, SkyListModule, SkyListPagingModule, SkyListSecondaryActionsComponent, SkyListSecondaryActionsModule, SkyListToolbarComponent, SkyListToolbarModule, SkyListFilterButtonComponent as λ1, SkyListToolbarViewActionsComponent as λ10, SkyListToolbarSearchActionsComponent as λ11, SkyListFilterSummaryComponent as λ2, SkyListFilterInlineItemComponent as λ3, SkyListFilterInlineComponent as λ4, SkyListPagingComponent as λ5, SkyListSecondaryActionComponent as λ6, SkyListSecondaryActionsComponent as λ7, SkyListToolbarItemComponent as λ8, SkyListToolbarSortComponent as λ9 };
 //# sourceMappingURL=skyux-list-builder.js.map