@skyux/list-builder 5.5.0 → 5.6.0

package/fesm2015/skyux-list-builder.js

@@ -1,10 +1,10 @@
-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 * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, NgModule, TemplateRef, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
+import { ListItemModel, getData, compare, StateOrchestrator, StateDispatcher, AsyncList, AsyncItem, StateNode, getValue, isObservable } from '@skyux/list-builder-common';
 import { BehaviorSubject, Observable, Subject, of, combineLatest } from 'rxjs';
-import { map, 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 { map, distinctUntilChanged, take, takeUntil, skip, flatMap, scan } from 'rxjs/operators';
 import * as i3 from '@skyux/lists';
 import { SkyFilterModule, SkyPagingModule, SkySortModule } from '@skyux/lists';
 import * as i5 from '@skyux/i18n';
@@ -13,12 +13,12 @@ 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 i5$1 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
 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 {
     constructor(data) {
@@ -54,81 +54,6 @@ class ListDataProvider {
     constructor(data) { }
 }
 
-/**
- * @internal
- */
-class ListItemsLoadAction {
-    constructor(items, refresh = false, dataChanged = true, count) {
-        this.items = items;
-        this.refresh = refresh;
-        this.dataChanged = dataChanged;
-        this.count = count;
-    }
-}
-
-/**
- * @internal
- */
-class ListItemsSetLoadingAction {
-    constructor(loading = true) {
-        this.loading = loading;
-    }
-}
-
-/**
- * @internal
- */
-class ListSelectedLoadAction {
-    constructor(items) {
-        this.items = items;
-    }
-}
-
-/**
- * @internal
- */
-class ListSelectedSetLoadingAction {
-    constructor(loading = true) {
-        this.loading = loading;
-    }
-}
-
-/**
- * Specifies a set of fields to sort by.
- */
-class ListSortModel {
-    constructor(data) {
-        /**
-         * Specifies the list of available views to sort.
-         */
-        this.available = [];
-        /**
-         * Specifies whether the sort applies to all list views.
-         */
-        this.global = [];
-        /**
-         * Specifies the fields to sort.
-         * For information about `ListSortFieldSelectorModel`, see the
-         * [shared classes for lists](https://developer.blackbaud.com/skyux-list-builder-common/docs/list-builder-common).
-         */
-        this.fieldSelectors = [];
-        if (data) {
-            this.available = data.available;
-            this.global = data.global;
-            this.fieldSelectors = data.fieldSelectors;
-        }
-    }
-}
-
-/**
- * @internal
- */
-class ListSortSetFieldSelectorsAction {
-    constructor(fieldSelectors) {
-        this.fieldSelectors = fieldSelectors;
-    }
-}
-
 /**
  * Specifies a function to dynamically manage the data source when users change the text
  * in the list field. The search function must return an array or a promise of an array.
@@ -179,8 +104,8 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
     get(request) {
         return this.filteredItems(request).pipe(map((result) => {
             if (request.pageNumber && request.pageSize) {
-                let itemStart = (request.pageNumber - 1) * request.pageSize;
-                let pagedResult = result.slice(itemStart, itemStart + request.pageSize);
+                const itemStart = (request.pageNumber - 1) * request.pageSize;
+                const pagedResult = result.slice(itemStart, itemStart + request.pageSize);
                 return new ListDataResponseModel({
                     count: result.length,
                     items: pagedResult,
@@ -199,7 +124,7 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
         return this.items.pipe(map((items) => {
             let dataChanged = false;
             let search = request.search;
-            let sort = request.sort;
+            const sort = request.sort;
             let filters = request.filters;
             if (this.lastItems === undefined || this.lastItems !== items) {
                 dataChanged = true;
@@ -233,7 +158,7 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
             else if (filters && filters.length > 0) {
                 result = result.filter((item) => {
                     for (let i = 0; i < filters.length; i++) {
-                        let filter = filters[i];
+                        const filter = filters[i];
                         if (filter.value === undefined ||
                             filter.value === '' ||
                             filter.value === false ||
@@ -262,7 +187,7 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
             else if (search &&
                 search.searchText !== undefined &&
                 search.searchText.length > 0) {
-                let searchText = search.searchText.toLowerCase();
+                const searchText = search.searchText.toLowerCase();
                 let searchFunctions;
                 if (this.searchFunction !== undefined) {
                     searchFunctions = [this.searchFunction];
@@ -273,8 +198,8 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
                 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);
+                        const searchFunction = searchFunctions[i];
+                        const searchResult = searchFunction(item.data, searchText);
                         if ((typeof searchResult === 'string' &&
                             searchResult.indexOf(searchText) !== -1) ||
                             searchResult === true) {
@@ -296,9 +221,9 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
                     .sort((item1, item2) => {
                     let compareResult = 0;
                     for (let i = 0; i < sort.fieldSelectors.length; i++) {
-                        let selector = sort.fieldSelectors[i];
-                        let value1 = getData(item1.data, selector.fieldSelector);
-                        let value2 = getData(item2.data, selector.fieldSelector);
+                        const selector = sort.fieldSelectors[i];
+                        const value1 = getData(item1.data, selector.fieldSelector);
+                        const value2 = getData(item2.data, selector.fieldSelector);
                         compareResult = compare(value1, value2);
                         if (selector.descending && compareResult !== 0) {
                             compareResult *= -1;
@@ -315,73 +240,51 @@ class SkyListInMemoryDataProvider extends ListDataProvider {
     }
 }
 
+let idIndex$2 = 0;
 /**
  * @internal
  */
-class ListPagingModel {
-    constructor(data) {
-        if (data !== undefined) {
-            this.itemsPerPage = data.itemsPerPage || 10;
-            this.maxDisplayedPages = data.maxDisplayedPages || 5;
-            this.pageCount = data.pageCount || 0;
-            this.pageNumber = data.pageNumber || 1;
-        }
+class ListViewComponent {
+    constructor(state, defaultName) {
+        this.viewId = `sky-list-view-cmp-${++idIndex$2}`;
+        this.state = state;
+        this.viewName = defaultName;
+        /* 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());
     }
-}
-
-/**
- * Contains data about the selected items in the list.
- */
-class ListSelectedModel {
-    constructor() {
-        this.selectedIdMap = new Map();
+    get id() {
+        return this.viewId;
     }
-}
-
-/**
- * @internal
- */
-class ListToolbarModel {
-    constructor(data) {
-        this.items = [];
-        this.showMultiselectToolbar = false;
-        if (data) {
-            this.exists = data.exists;
-            this.disabled = data.disabled;
-            this.items = data.items;
-            this.type = data.type;
-            this.showMultiselectToolbar = data.showMultiselectToolbar;
-        }
+    get label() {
+        return this.viewName;
     }
+    /* istanbul ignore next */
+    onViewActive() { }
+    onViewInactive() { }
 }
 
 /**
  * @internal
  */
-class ListViewsModel {
-    constructor(data) {
-        this.views = [];
-        if (data) {
-            this.active = data.active;
-            this.views = data.views;
-        }
+class ListItemsLoadAction {
+    constructor(items, refresh = false, dataChanged = true, count) {
+        this.items = items;
+        this.refresh = refresh;
+        this.dataChanged = dataChanged;
+        this.count = count;
     }
 }
 
 /**
  * @internal
  */
-class ListStateModel {
-    constructor() {
-        this.filters = [];
-        this.items = new AsyncList();
-        this.paging = new ListPagingModel();
-        this.search = new ListSearchModel();
-        this.selected = new AsyncItem();
-        this.sort = new ListSortModel();
-        this.toolbar = new ListToolbarModel();
-        this.views = new ListViewsModel();
-        this.selected.item = new ListSelectedModel();
+class ListItemsSetLoadingAction {
+    constructor(loading = true) {
+        this.loading = loading;
     }
 }
 
@@ -397,38 +300,38 @@ class ListFiltersUpdateAction {
 /**
  * @internal
  */
-class ListSearchSetFunctionsAction {
-    constructor(functions = []) {
-        this.functions = functions;
+class ListSearchSetFieldSelectorsAction {
+    constructor(fieldSelectors = []) {
+        this.fieldSelectors = fieldSelectors;
     }
 }
 
 /**
  * @internal
  */
-class ListSearchSetSearchTextAction {
-    constructor(searchText) {
-        this.searchText = searchText;
+class ListSearchSetFunctionsAction {
+    constructor(functions = []) {
+        this.functions = functions;
     }
 }
 
 /**
  * @internal
  */
-class ListSearchSetFieldSelectorsAction {
-    constructor(fieldSelectors = []) {
-        this.fieldSelectors = fieldSelectors;
+class ListSearchSetOptionsAction {
+    constructor(searchTextAction, setFieldSelectorsAction, setFunctionsAction) {
+        this.searchTextAction = searchTextAction;
+        this.setFieldSelectorsAction = setFieldSelectorsAction;
+        this.setFunctionsAction = setFunctionsAction;
     }
 }
 
 /**
  * @internal
  */
-class ListSearchSetOptionsAction {
-    constructor(searchTextAction, setFieldSelectorsAction, setFunctionsAction) {
-        this.searchTextAction = searchTextAction;
-        this.setFieldSelectorsAction = setFieldSelectorsAction;
-        this.setFunctionsAction = setFunctionsAction;
+class ListSearchSetSearchTextAction {
+    constructor(searchText) {
+        this.searchText = searchText;
     }
 }
 
@@ -452,6 +355,15 @@ class ListSortSetAvailableAction {
     }
 }
 
+/**
+ * @internal
+ */
+class ListSortSetFieldSelectorsAction {
+    constructor(fieldSelectors) {
+        this.fieldSelectors = fieldSelectors;
+    }
+}
+
 /**
  * @internal
  */
@@ -624,18 +536,18 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
         const resultItems = action.refresh
             ? [...newListItems]
             : [...state.items, ...newListItems];
-        let count = action.count === undefined ? resultItems.length : action.count;
+        const 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);
+        const newListItemModels = this.cloneListItemModelArray(state.items);
         if (action.refresh) {
             newListItemModels.forEach((item) => (item.isSelected = undefined));
         }
         newSelectedIds.map((s) => {
-            let newItem = newListItemModels.find((i) => i.id === s);
+            const newItem = newListItemModels.find((i) => i.id === s);
             /* istanbul ignore next */
             if (newItem) {
                 newItem.isSelected = action.selected;
@@ -644,7 +556,7 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
         return new AsyncList(newListItemModels, Date.now(), state.loading, state.count);
     }
     cloneListItemModelArray(source) {
-        let newListItems = [];
+        const newListItems = [];
         source.forEach((item) => {
             newListItems.push(new ListItemModel(item.id, Object.assign({}, item.data), item.isSelected));
         });
@@ -655,171 +567,146 @@ class ListItemsOrchestrator extends ListStateOrchestrator {
 /**
  * @internal
  */
-class ListPagingSetMaxPagesAction {
-    constructor(maxPages) {
-        this.maxPages = maxPages;
+class ListPagingModel {
+    constructor(data) {
+        if (data !== undefined) {
+            this.itemsPerPage = data.itemsPerPage || 10;
+            this.maxDisplayedPages = data.maxDisplayedPages || 5;
+            this.pageCount = data.pageCount || 0;
+            this.pageNumber = data.pageNumber || 1;
+        }
     }
 }
 
 /**
- * @internal
+ * Contains data about the selected items in the list.
  */
-class ListPagingSetItemsPerPageAction {
-    constructor(itemsPerPage) {
-        this.itemsPerPage = itemsPerPage;
+class ListSelectedModel {
+    constructor() {
+        this.selectedIdMap = new Map();
     }
 }
 
 /**
- * @internal
+ * Specifies a set of fields to sort by.
  */
-class ListPagingSetPageNumberAction {
-    constructor(pageNumber) {
-        this.pageNumber = pageNumber;
+class ListSortModel {
+    constructor(data) {
+        /**
+         * Specifies the list of available views to sort.
+         */
+        this.available = [];
+        /**
+         * Specifies whether the sort applies to all list views.
+         */
+        this.global = [];
+        /**
+         * Specifies the fields to sort.
+         * For information about `ListSortFieldSelectorModel`, see the
+         * [shared classes for lists](https://developer.blackbaud.com/skyux-list-builder-common/docs/list-builder-common).
+         */
+        this.fieldSelectors = [];
+        if (data) {
+            this.available = data.available;
+            this.global = data.global;
+            this.fieldSelectors = data.fieldSelectors;
+        }
     }
 }
 
 /**
  * @internal
  */
-class ListPagingOrchestrator extends ListStateOrchestrator {
-    /* istanbul ignore next */
-    constructor() {
-        super();
-        this.register(ListPagingSetMaxPagesAction, this.setMaxPages)
-            .register(ListPagingSetItemsPerPageAction, this.setItemsPerPage)
-            .register(ListPagingSetPageNumberAction, this.setPageNumber);
-    }
-    setMaxPages(state, action) {
-        return new ListPagingModel(Object.assign({}, state, { maxDisplayedPages: Number(action.maxPages) }));
-    }
-    setItemsPerPage(state, action) {
-        return new ListPagingModel(Object.assign({}, state, { itemsPerPage: Number(action.itemsPerPage) }));
-    }
-    setPageNumber(state, action) {
-        return new ListPagingModel(Object.assign({}, state, { pageNumber: Number(action.pageNumber) }));
+class ListToolbarModel {
+    constructor(data) {
+        this.items = [];
+        this.showMultiselectToolbar = false;
+        if (data) {
+            this.exists = data.exists;
+            this.disabled = data.disabled;
+            this.items = data.items;
+            this.type = data.type;
+            this.showMultiselectToolbar = data.showMultiselectToolbar;
+        }
     }
 }
 
 /**
  * @internal
  */
-class ListViewsLoadAction {
-    constructor(views) {
-        this.views = views;
+class ListViewsModel {
+    constructor(data) {
+        this.views = [];
+        if (data) {
+            this.active = data.active;
+            this.views = data.views;
+        }
     }
 }
 
 /**
  * @internal
  */
-class ListViewsOrchestrator extends ListStateOrchestrator {
-    /* istanbul ignore next */
+class ListStateModel {
     constructor() {
-        super();
-        this.register(ListViewsSetActiveAction, this.setActive).register(ListViewsLoadAction, this.load);
-    }
-    setActive(state, action) {
-        return new ListViewsModel(Object.assign({}, state, { active: action.view }));
+        this.filters = [];
+        this.items = new AsyncList();
+        this.paging = new ListPagingModel();
+        this.search = new ListSearchModel();
+        this.selected = new AsyncItem();
+        this.sort = new ListSortModel();
+        this.toolbar = new ListToolbarModel();
+        this.views = new ListViewsModel();
+        this.selected.item = new ListSelectedModel();
     }
-    load(state, action) {
-        return new ListViewsModel(Object.assign({}, state, { views: action.views }));
+}
+
+/**
+ * @internal
+ */
+class ListPagingSetItemsPerPageAction {
+    constructor(itemsPerPage) {
+        this.itemsPerPage = itemsPerPage;
     }
 }
 
 /**
  * @internal
  */
-class ListToolbarItemModel {
-    constructor(data) {
-        this.index = -1;
-        if (data) {
-            this.index = data.index;
-            this.template = data.template;
-            this.location = data.location;
-            this.view = data.view;
-            this.id = data.id;
-        }
+class ListPagingSetMaxPagesAction {
+    constructor(maxPages) {
+        this.maxPages = maxPages;
     }
 }
 
 /**
  * @internal
  */
-class ListToolbarSetTypeAction {
-    constructor(type) {
-        this.type = type;
+class ListPagingSetPageNumberAction {
+    constructor(pageNumber) {
+        this.pageNumber = pageNumber;
     }
 }
 
 /**
  * @internal
  */
-class ListToolbarOrchestrator extends ListStateOrchestrator {
+class ListPagingOrchestrator extends ListStateOrchestrator {
     /* istanbul ignore next */
     constructor() {
         super();
-        this.register(ListToolbarSetExistsAction, this.setExists)
-            .register(ListToolbarItemsDisableAction, this.setDisabled)
-            .register(ListToolbarItemsLoadAction, this.load)
-            .register(ListToolbarSetTypeAction, this.setType)
-            .register(ListToolbarItemsRemoveAction, this.remove)
-            .register(ListToolbarShowMultiselectToolbarAction, this.showMultiselectToolbar);
-    }
-    setExists(state, action) {
-        const newModel = new ListToolbarModel(state);
-        newModel.exists = action.exists;
-        return newModel;
-    }
-    setDisabled(state, action) {
-        const newModel = new ListToolbarModel(state);
-        newModel.disabled = action.disable;
-        return newModel;
-    }
-    setType(state, action) {
-        const newModel = new ListToolbarModel(state);
-        newModel.type = action.type;
-        return newModel;
+        this.register(ListPagingSetMaxPagesAction, this.setMaxPages)
+            .register(ListPagingSetItemsPerPageAction, this.setItemsPerPage)
+            .register(ListPagingSetPageNumberAction, this.setPageNumber);
     }
-    load(state, action) {
-        const newModel = new ListToolbarModel(state);
-        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
-             * backwards compatibility.
-             */
-            if (!item.index) {
-                item.index = action.index;
-            }
-            return new ListToolbarItemModel(item);
-        });
-        let items = [...state.items, ...newListItems];
-        items = items.sort((a, b) => {
-            if (a.index < b.index) {
-                return -1;
-            }
-            else if (a.index > b.index) {
-                return 1;
-            }
-            else {
-                return 0;
-            }
-        });
-        newModel.items = items;
-        return newModel;
+    setMaxPages(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { maxDisplayedPages: Number(action.maxPages) }));
     }
-    remove(state, action) {
-        const newModel = new ListToolbarModel(state);
-        newModel.items = newModel.items.filter((item) => {
-            return action.ids.indexOf(item.id) === -1;
-        });
-        return newModel;
+    setItemsPerPage(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { itemsPerPage: Number(action.itemsPerPage) }));
     }
-    showMultiselectToolbar(state, action) {
-        const newModel = new ListToolbarModel(state);
-        newModel.showMultiselectToolbar = action.exists;
-        return newModel;
+    setPageNumber(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { pageNumber: Number(action.pageNumber) }));
     }
 }
 
@@ -864,6 +751,15 @@ class ListSearchOrchestrator extends ListStateOrchestrator {
     }
 }
 
+/**
+ * @internal
+ */
+class ListSelectedLoadAction {
+    constructor(items) {
+        this.items = items;
+    }
+}
+
 /**
  * @internal
  */
@@ -874,6 +770,15 @@ class ListSelectedSetItemSelectedAction {
     }
 }
 
+/**
+ * @internal
+ */
+class ListSelectedSetLoadingAction {
+    constructor(loading = true) {
+        this.loading = loading;
+    }
+}
+
 /**
  * @internal
  */
@@ -915,7 +820,7 @@ class ListSelectedOrchestrator extends ListStateOrchestrator {
         return new AsyncItem(newListSelectedModel, state.lastUpdate, state.loading);
     }
     cloneListSelectedModel(source) {
-        let newListItems = new ListSelectedModel();
+        const newListItems = new ListSelectedModel();
         newListItems.selectedIdMap = new Map(source.selectedIdMap);
         return newListItems;
     }
@@ -970,6 +875,128 @@ class ListSortOrchestrator extends ListStateOrchestrator {
     }
 }
 
+/**
+ * @internal
+ */
+class ListToolbarSetTypeAction {
+    constructor(type) {
+        this.type = type;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarItemModel {
+    constructor(data) {
+        this.index = -1;
+        if (data) {
+            this.index = data.index;
+            this.template = data.template;
+            this.location = data.location;
+            this.view = data.view;
+            this.id = data.id;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListToolbarSetExistsAction, this.setExists)
+            .register(ListToolbarItemsDisableAction, this.setDisabled)
+            .register(ListToolbarItemsLoadAction, this.load)
+            .register(ListToolbarSetTypeAction, this.setType)
+            .register(ListToolbarItemsRemoveAction, this.remove)
+            .register(ListToolbarShowMultiselectToolbarAction, this.showMultiselectToolbar);
+    }
+    setExists(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.exists = action.exists;
+        return newModel;
+    }
+    setDisabled(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.disabled = action.disable;
+        return newModel;
+    }
+    setType(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.type = action.type;
+        return newModel;
+    }
+    load(state, action) {
+        const newModel = new ListToolbarModel(state);
+        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
+             * backwards compatibility.
+             */
+            if (!item.index) {
+                item.index = action.index;
+            }
+            return new ListToolbarItemModel(item);
+        });
+        let items = [...state.items, ...newListItems];
+        items = items.sort((a, b) => {
+            if (a.index < b.index) {
+                return -1;
+            }
+            else if (a.index > b.index) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        });
+        newModel.items = items;
+        return newModel;
+    }
+    remove(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.items = newModel.items.filter((item) => {
+            return action.ids.indexOf(item.id) === -1;
+        });
+        return newModel;
+    }
+    showMultiselectToolbar(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.showMultiselectToolbar = action.exists;
+        return newModel;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsLoadAction {
+    constructor(views) {
+        this.views = views;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListViewsSetActiveAction, this.setActive).register(ListViewsLoadAction, this.load);
+    }
+    setActive(state, action) {
+        return new ListViewsModel(Object.assign({}, state, { active: action.view }));
+    }
+    load(state, action) {
+        return new ListViewsModel(Object.assign({}, state, { views: action.views }));
+    }
+}
+
 /**
  * @internal
  */
@@ -993,33 +1020,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; } });
 
-let idIndex$2 = 0;
-/**
- * @internal
- */
-class ListViewComponent {
-    constructor(state, defaultName) {
-        this.viewId = `sky-list-view-cmp-${++idIndex$2}`;
-        this.state = state;
-        this.viewName = defaultName;
-        /* 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;
-    }
-    get label() {
-        return this.viewName;
-    }
-    /* istanbul ignore next */
-    onViewActive() { }
-    onViewInactive() { }
-}
-
 /**
  * @internal
  */
@@ -1070,7 +1070,7 @@ class SkyListComponent {
             this.dataFirstLoad = true;
         }
         if (this.listViews.length > 0) {
-            let defaultView = this.defaultView === undefined
+            const defaultView = this.defaultView === undefined
                 ? this.listViews.first
                 : this.defaultView;
             this.dispatcher.next(new ListViewsLoadAction(this.listViews.map((v) => new ListViewModel(v.id, v.label))));
@@ -1100,7 +1100,7 @@ class SkyListComponent {
             .pipe(map((current) => current.selected), takeUntil(this.ngUnsubscribe), distinctUntilChanged())
             .subscribe((selected) => {
             // Update lastSelectedIds to help us retain user selections.
-            let selectedIdsList = [];
+            const selectedIdsList = [];
             selected.item.selectedIdMap.forEach((value, key) => {
                 if (value === true) {
                     selectedIdsList.push(key);
@@ -1178,7 +1178,7 @@ class SkyListComponent {
         // This subject is used to cancel previous request to the list's data provider when a new change
         // to the list's state occurs. In a future breaking change this should be replaced or coupled
         // with adding a debounce time to the Observable which watches for state changes.
-        let cancelLastRequest = new Subject();
+        const cancelLastRequest = new Subject();
         return combineLatest([
             this.state.pipe(map((s) => s.filters), distinctUntilChanged()),
             this.state.pipe(map((s) => s.search), distinctUntilChanged()),
@@ -1203,7 +1203,7 @@ class SkyListComponent {
             let response;
             if (this.dataFirstLoad) {
                 this.dataFirstLoad = false;
-                let initialItems = itemsData.map((d) => new ListItemModel(d.id || `sky-list-item-model-${++idIndex$1}`, d));
+                const initialItems = itemsData.map((d) => new ListItemModel(d.id || `sky-list-item-model-${++idIndex$1}`, d));
                 response = of(new ListDataResponseModel({
                     count: this.initialTotal,
                     items: initialItems,
@@ -1249,7 +1249,7 @@ class SkyListComponent {
         return this.dataProvider.count();
     }
     getItemsAndRetainSelections(newList, selectedIds) {
-        let updatedListModel = newList.slice();
+        const updatedListModel = newList.slice();
         updatedListModel.forEach((item) => {
             item.isSelected = selectedIds.indexOf(item.id) > -1 ? true : false;
         });
@@ -1402,54 +1402,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }] } });
 
 /**
- * Creates a filter summary based on the
- * [list component's](https://developer.blackbaud.com/skyux/components/list/overview#list-properties)
- * `appliedFilters` property. Place this component within the
- * [`sky-list-toolbar`](https://developer.blackbaud.com/skyux/components/list/toolbar) component.
+ * @internal
  */
-class SkyListFilterSummaryComponent {
-    constructor(state, dispatcher) {
-        this.state = state;
-        this.dispatcher = dispatcher;
-        /**
-         * Emits a `ListFilterModel` when users select a summary item. A common use case is
-         * to open a filter modal when this event is received.
-         */
-        this.summaryItemClick = new EventEmitter();
-    }
-    ngAfterContentInit() {
-        // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
-        setTimeout(() => {
-            this.appliedFilters = this.state.pipe(map((state) => {
-                return state.filters.filter((filter) => {
-                    return (filter.value !== '' &&
-                        filter.value !== undefined &&
-                        filter.value !== false &&
-                        filter.value !== filter.defaultValue);
-                });
-            }));
-        });
-    }
-    filterSummaryItemDismiss(index) {
-        this.appliedFilters.pipe(take(1)).subscribe((filters) => {
-            filters.splice(index, 1);
-            this.dispatcher.filtersUpdate(filters.slice());
-        });
-    }
-    filterSummaryItemClick(item) {
-        this.summaryItemClick.emit(item);
+class SkyListFilterInlineItemRendererComponent {
+    ngOnInit() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
     }
 }
-SkyListFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-SkyListFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
+SkyListFilterInlineItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sky-list-filter-summary',
-                    templateUrl: './list-filter-summary.component.html',
+                    selector: 'sky-list-filter-inline-item-renderer',
+                    template: '<ng-template #container></ng-template>',
                 }]
-        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
-                type: Output
+        }], propDecorators: { template: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
             }] } });
 
 /**
@@ -1495,38 +1476,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 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.16", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyListFilterInlineItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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.
@@ -1552,39 +1501,90 @@ class SkyListFilterInlineComponent {
                 this.applyFilters();
             });
         });
-        this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+        this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+    }
+    applyFilters() {
+        this.state.pipe(take(1)).subscribe((currentState) => {
+            if (currentState.paging.pageNumber &&
+                currentState.paging.pageNumber !== 1) {
+                this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+            }
+            this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+        });
+    }
+    getFilterModelFromInline(inlineFilters) {
+        return inlineFilters.map((filter) => {
+            return new ListFilterModel({
+                name: filter.name,
+                value: filter.value,
+                filterFunction: filter.filterFunction,
+                defaultValue: filter.defaultValue,
+            });
+        });
+    }
+}
+SkyListFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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]
+            }] } });
+
+/**
+ * Creates a filter summary based on the
+ * [list component's](https://developer.blackbaud.com/skyux/components/list/overview#list-properties)
+ * `appliedFilters` property. Place this component within the
+ * [`sky-list-toolbar`](https://developer.blackbaud.com/skyux/components/list/toolbar) component.
+ */
+class SkyListFilterSummaryComponent {
+    constructor(state, dispatcher) {
+        this.state = state;
+        this.dispatcher = dispatcher;
+        /**
+         * Emits a `ListFilterModel` when users select a summary item. A common use case is
+         * to open a filter modal when this event is received.
+         */
+        this.summaryItemClick = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
+        setTimeout(() => {
+            this.appliedFilters = this.state.pipe(map((state) => {
+                return state.filters.filter((filter) => {
+                    return (filter.value !== '' &&
+                        filter.value !== undefined &&
+                        filter.value !== false &&
+                        filter.value !== filter.defaultValue);
+                });
+            }));
+        });
     }
-    applyFilters() {
-        this.state.pipe(take(1)).subscribe((currentState) => {
-            if (currentState.paging.pageNumber &&
-                currentState.paging.pageNumber !== 1) {
-                this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
-            }
-            this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+    filterSummaryItemDismiss(index) {
+        this.appliedFilters.pipe(take(1)).subscribe((filters) => {
+            filters.splice(index, 1);
+            this.dispatcher.filtersUpdate(filters.slice());
         });
     }
-    getFilterModelFromInline(inlineFilters) {
-        return inlineFilters.map((filter) => {
-            return new ListFilterModel({
-                name: filter.name,
-                value: filter.value,
-                filterFunction: filter.filterFunction,
-                defaultValue: filter.defaultValue,
-            });
-        });
+    filterSummaryItemClick(item) {
+        this.summaryItemClick.emit(item);
     }
 }
-SkyListFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component });
-SkyListFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListFilterInlineComponent, decorators: [{
+SkyListFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sky-list-filter-inline',
-                    templateUrl: './list-filter-inline.component.html',
+                    selector: 'sky-list-filter-summary',
+                    templateUrl: './list-filter-summary.component.html',
                 }]
-        }], ctorParameters: function () { return [{ type: ListStateDispatcher }, { type: ListState }]; }, propDecorators: { filters: [{
-                type: ContentChildren,
-                args: [SkyListFilterInlineItemComponent]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
+                type: Output
             }] } });
 
 class SkyListFiltersModule {
@@ -1803,6 +1803,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Adds actions to the secondary actions dropdown in the list toolbar.
+ */
+class SkyListSecondaryActionComponent {
+    constructor(actionService) {
+        this.actionService = actionService;
+    }
+    ngAfterContentInit() {
+        this.actionService.addSecondaryAction({
+            template: this.templateRef,
+        });
+    }
+}
+SkyListSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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,
+                    }]
+            }] } });
+
 // 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.
 /**
@@ -1881,71 +1910,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }]
             }] } });
 
+class SkyListSecondaryActionsModule {
+}
+SkyListSecondaryActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListSecondaryActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListSecondaryActionsModule, imports: [[
+            CommonModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyListBuilderResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListSecondaryActionsComponent,
+                        SkyListSecondaryActionsHostComponent,
+                        SkyListSecondaryActionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyDropdownModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyListBuilderResourcesModule,
+                    ],
+                    exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
+                }]
+        }] });
+
 /**
- * Adds actions to the secondary actions dropdown in the list toolbar.
+ * @internal
  */
-class SkyListSecondaryActionComponent {
-    constructor(actionService) {
-        this.actionService = actionService;
+class SkyListToolbarItemRendererComponent {
+    ngOnInit() {
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
     }
-    ngAfterContentInit() {
-        this.actionService.addSecondaryAction({
-            template: this.templateRef,
+}
+SkyListToolbarItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListToolbarItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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
+ */
+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) {
+        const 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;
+    }
 }
-SkyListSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
-SkyListSecondaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListSecondaryActionComponent, decorators: [{
+SkyListMultiselectToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sky-list-secondary-action',
-                    templateUrl: './list-secondary-action.component.html',
+                    selector: 'sky-list-multiselect-toolbar',
+                    templateUrl: './list-multiselect-toolbar.component.html',
+                    styleUrls: ['./list-multiselect-toolbar.component.scss'],
                 }]
-        }], ctorParameters: function () { return [{ type: SkyListSecondaryActionsService }]; }, propDecorators: { templateRef: [{
-                type: ViewChild,
-                args: ['listSecondaryAction', {
-                        read: TemplateRef,
-                        static: true,
-                    }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { showOnlySelected: [{
+                type: Input
             }] } });
 
-class SkyListSecondaryActionsModule {
-}
-SkyListSecondaryActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyListSecondaryActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", 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.16", ngImport: i0, type: SkyListSecondaryActionsModule, imports: [[
-            CommonModule,
-            SkyDropdownModule,
-            SkyI18nModule,
-            SkyIconModule,
-            SkyListBuilderResourcesModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListSecondaryActionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SkyListSecondaryActionsComponent,
-                        SkyListSecondaryActionsHostComponent,
-                        SkyListSecondaryActionComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyDropdownModule,
-                        SkyI18nModule,
-                        SkyIconModule,
-                        SkyListBuilderResourcesModule,
-                    ],
-                    exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
-                }]
-        }] });
-
 let idIndex = 0;
 /**
  * Defines a toolbar item for the list toolbar.
@@ -1991,6 +2157,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [TemplateRef]
             }] } });
 
+/**
+ * Displays custom actions in the toolbar beside to the search bar.
+ */
+class SkyListToolbarSearchActionsComponent {
+}
+SkyListToolbarSearchActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarSearchActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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,
+                }]
+        }] });
+
 /**
  * Adds a sort dropdown to the list toolbar.
  */
@@ -2123,172 +2306,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }]; } });
 
-/**
- * @internal
- */
-class SkyListToolbarItemRendererComponent {
-    ngOnInit() {
-        if (this.template !== undefined) {
-            this.container.createEmbeddedView(this.template, this);
-        }
-    }
-}
-SkyListToolbarItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListToolbarItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyListToolbarItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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
- */
-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);
-            /* istanbul ignore next */
-            if (value !== prev.selectedIdMap.get(key)) {
-                return false;
-            }
-        }
-        return true;
-    }
-}
-SkyListMultiselectToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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.
@@ -2408,7 +2425,7 @@ class SkyListToolbarComponent {
         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) => {
+            const activeFilters = filters.filter((f) => {
                 return (f.value !== '' &&
                     f.value !== undefined &&
                     f.value !== false &&
@@ -2505,10 +2522,10 @@ class SkyListToolbarComponent {
     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) => {
             // 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)
+            const sorts = global.filter((g) => available.filter((a) => a.fieldSelector === g.fieldSelector)
                 .length === 0);
-            let resultSortSelectors = [...sorts, ...available].map((sortLabels) => {
-                let fs = fieldSelectors.filter((f) => {
+            const resultSortSelectors = [...sorts, ...available].map((sortLabels) => {
+                const fs = fieldSelectors.filter((f) => {
                     return (f.fieldSelector === sortLabels.fieldSelector &&
                         f.descending === sortLabels.descending);
                 });
@@ -2617,23 +2634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     }]
             }] } });
 
-/**
- * Displays custom actions in the toolbar beside to the search bar.
- */
-class SkyListToolbarSearchActionsComponent {
-}
-SkyListToolbarSearchActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyListToolbarSearchActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.16", 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.16", ngImport: i0, type: SkyListToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });