@skyux/list-builder 5.5.0 → 5.6.0

package/bundles/skyux-list-builder.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@skyux/list-builder-common'), require('@skyux/lists'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/popovers'), require('@skyux/layout'), require('@skyux/lookup'), require('@skyux/forms')) :
-    typeof define === 'function' && define.amd ? define('@skyux/list-builder', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators', '@skyux/list-builder-common', '@skyux/lists', '@skyux/i18n', '@skyux/indicators', '@skyux/popovers', '@skyux/layout', '@skyux/lookup', '@skyux/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["list-builder"] = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators, global.listBuilderCommon, global.i3, global.i5, global.i3$1, global.i2, global.i3$2, global.i8, global.i5$1));
-})(this, (function (exports, i0, i4, rxjs, operators, listBuilderCommon, i3, i5, i3$1, i2, i3$2, i8, i5$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@skyux/list-builder-common'), require('rxjs'), require('rxjs/operators'), require('@skyux/lists'), require('@skyux/i18n'), require('@skyux/indicators'), require('@skyux/popovers'), require('@skyux/forms'), require('@skyux/layout'), require('@skyux/lookup')) :
+    typeof define === 'function' && define.amd ? define('@skyux/list-builder', ['exports', '@angular/common', '@angular/core', '@skyux/list-builder-common', 'rxjs', 'rxjs/operators', '@skyux/lists', '@skyux/i18n', '@skyux/indicators', '@skyux/popovers', '@skyux/forms', '@skyux/layout', '@skyux/lookup'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux["list-builder"] = {}), global.ng.common, global.ng.core, global.listBuilderCommon, global.rxjs, global.rxjs.operators, global.i3, global.i5, global.i3$1, global.i2, global.i5$1, global.i3$2, global.i8));
+})(this, (function (exports, i4, i0, listBuilderCommon, rxjs, operators, i3, i5, i3$1, i2, i5$1, i3$2, i8) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,15 +22,15 @@
         return Object.freeze(n);
     }
 
-    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
 
     var ListDataRequestModel = /** @class */ (function () {
         function ListDataRequestModel(data) {
@@ -70,91 +70,6 @@
         return ListDataProvider;
     }());
 
-    /**
-     * @internal
-     */
-    var ListItemsLoadAction = /** @class */ (function () {
-        function ListItemsLoadAction(items, refresh, dataChanged, count) {
-            if (refresh === void 0) { refresh = false; }
-            if (dataChanged === void 0) { dataChanged = true; }
-            this.items = items;
-            this.refresh = refresh;
-            this.dataChanged = dataChanged;
-            this.count = count;
-        }
-        return ListItemsLoadAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListItemsSetLoadingAction = /** @class */ (function () {
-        function ListItemsSetLoadingAction(loading) {
-            if (loading === void 0) { loading = true; }
-            this.loading = loading;
-        }
-        return ListItemsSetLoadingAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListSelectedLoadAction = /** @class */ (function () {
-        function ListSelectedLoadAction(items) {
-            this.items = items;
-        }
-        return ListSelectedLoadAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListSelectedSetLoadingAction = /** @class */ (function () {
-        function ListSelectedSetLoadingAction(loading) {
-            if (loading === void 0) { loading = true; }
-            this.loading = loading;
-        }
-        return ListSelectedSetLoadingAction;
-    }());
-
-    /**
-     * Specifies a set of fields to sort by.
-     */
-    var ListSortModel = /** @class */ (function () {
-        function ListSortModel(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;
-            }
-        }
-        return ListSortModel;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListSortSetFieldSelectorsAction = /** @class */ (function () {
-        function ListSortSetFieldSelectorsAction(fieldSelectors) {
-            this.fieldSelectors = fieldSelectors;
-        }
-        return ListSortSetFieldSelectorsAction;
-    }());
-
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -664,89 +579,88 @@
         return SkyListInMemoryDataProvider;
     }(ListDataProvider));
 
+    var idIndex$2 = 0;
     /**
      * @internal
      */
-    var ListPagingModel = /** @class */ (function () {
-        function ListPagingModel(data) {
-            if (data !== undefined) {
-                this.itemsPerPage = data.itemsPerPage || 10;
-                this.maxDisplayedPages = data.maxDisplayedPages || 5;
-                this.pageCount = data.pageCount || 0;
-                this.pageNumber = data.pageNumber || 1;
-            }
-        }
-        return ListPagingModel;
-    }());
-
-    /**
-     * Contains data about the selected items in the list.
-     */
-    var ListSelectedModel = /** @class */ (function () {
-        function ListSelectedModel() {
-            this.selectedIdMap = new Map();
+    var ListViewComponent = /** @class */ (function () {
+        function ListViewComponent(state, defaultName) {
+            var _this = this;
+            this.viewId = "sky-list-view-cmp-" + ++idIndex$2;
+            this.state = state;
+            this.viewName = defaultName;
+            /* istanbul ignore next */
+            this.hasToolbar = this.state.pipe(operators.map(function (s) { return s.toolbar.exists; }));
+            this.active = this.state.pipe(operators.map(function (s) { return s.views.active === _this.viewId; }));
+            this.active
+                .pipe(operators.distinctUntilChanged())
+                .subscribe(function (isActive) { return isActive ? _this.onViewActive() : _this.onViewInactive(); });
         }
-        return ListSelectedModel;
+        Object.defineProperty(ListViewComponent.prototype, "id", {
+            get: function () {
+                return this.viewId;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ListViewComponent.prototype, "label", {
+            get: function () {
+                return this.viewName;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /* istanbul ignore next */
+        ListViewComponent.prototype.onViewActive = function () { };
+        ListViewComponent.prototype.onViewInactive = function () { };
+        return ListViewComponent;
     }());
 
     /**
      * @internal
      */
-    var ListToolbarModel = /** @class */ (function () {
-        function ListToolbarModel(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;
-            }
+    var ListItemsLoadAction = /** @class */ (function () {
+        function ListItemsLoadAction(items, refresh, dataChanged, count) {
+            if (refresh === void 0) { refresh = false; }
+            if (dataChanged === void 0) { dataChanged = true; }
+            this.items = items;
+            this.refresh = refresh;
+            this.dataChanged = dataChanged;
+            this.count = count;
         }
-        return ListToolbarModel;
+        return ListItemsLoadAction;
     }());
 
     /**
      * @internal
      */
-    var ListViewsModel = /** @class */ (function () {
-        function ListViewsModel(data) {
-            this.views = [];
-            if (data) {
-                this.active = data.active;
-                this.views = data.views;
-            }
+    var ListItemsSetLoadingAction = /** @class */ (function () {
+        function ListItemsSetLoadingAction(loading) {
+            if (loading === void 0) { loading = true; }
+            this.loading = loading;
         }
-        return ListViewsModel;
+        return ListItemsSetLoadingAction;
     }());
 
     /**
      * @internal
      */
-    var ListStateModel = /** @class */ (function () {
-        function ListStateModel() {
-            this.filters = [];
-            this.items = new listBuilderCommon.AsyncList();
-            this.paging = new ListPagingModel();
-            this.search = new ListSearchModel();
-            this.selected = new listBuilderCommon.AsyncItem();
-            this.sort = new ListSortModel();
-            this.toolbar = new ListToolbarModel();
-            this.views = new ListViewsModel();
-            this.selected.item = new ListSelectedModel();
+    var ListFiltersUpdateAction = /** @class */ (function () {
+        function ListFiltersUpdateAction(filters) {
+            this.filters = filters;
         }
-        return ListStateModel;
+        return ListFiltersUpdateAction;
     }());
 
     /**
      * @internal
      */
-    var ListFiltersUpdateAction = /** @class */ (function () {
-        function ListFiltersUpdateAction(filters) {
-            this.filters = filters;
+    var ListSearchSetFieldSelectorsAction = /** @class */ (function () {
+        function ListSearchSetFieldSelectorsAction(fieldSelectors) {
+            if (fieldSelectors === void 0) { fieldSelectors = []; }
+            this.fieldSelectors = fieldSelectors;
         }
-        return ListFiltersUpdateAction;
+        return ListSearchSetFieldSelectorsAction;
     }());
 
     /**
@@ -760,27 +674,6 @@
         return ListSearchSetFunctionsAction;
     }());
 
-    /**
-     * @internal
-     */
-    var ListSearchSetSearchTextAction = /** @class */ (function () {
-        function ListSearchSetSearchTextAction(searchText) {
-            this.searchText = searchText;
-        }
-        return ListSearchSetSearchTextAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListSearchSetFieldSelectorsAction = /** @class */ (function () {
-        function ListSearchSetFieldSelectorsAction(fieldSelectors) {
-            if (fieldSelectors === void 0) { fieldSelectors = []; }
-            this.fieldSelectors = fieldSelectors;
-        }
-        return ListSearchSetFieldSelectorsAction;
-    }());
-
     /**
      * @internal
      */
@@ -793,6 +686,16 @@
         return ListSearchSetOptionsAction;
     }());
 
+    /**
+     * @internal
+     */
+    var ListSearchSetSearchTextAction = /** @class */ (function () {
+        function ListSearchSetSearchTextAction(searchText) {
+            this.searchText = searchText;
+        }
+        return ListSearchSetSearchTextAction;
+    }());
+
     /**
      * @internal
      */
@@ -817,6 +720,16 @@
         return ListSortSetAvailableAction;
     }());
 
+    /**
+     * @internal
+     */
+    var ListSortSetFieldSelectorsAction = /** @class */ (function () {
+        function ListSortSetFieldSelectorsAction(fieldSelectors) {
+            this.fieldSelectors = fieldSelectors;
+        }
+        return ListSortSetFieldSelectorsAction;
+    }());
+
     /**
      * @internal
      */
@@ -1048,187 +961,159 @@
     /**
      * @internal
      */
-    var ListPagingSetMaxPagesAction = /** @class */ (function () {
-        function ListPagingSetMaxPagesAction(maxPages) {
-            this.maxPages = maxPages;
+    var ListPagingModel = /** @class */ (function () {
+        function ListPagingModel(data) {
+            if (data !== undefined) {
+                this.itemsPerPage = data.itemsPerPage || 10;
+                this.maxDisplayedPages = data.maxDisplayedPages || 5;
+                this.pageCount = data.pageCount || 0;
+                this.pageNumber = data.pageNumber || 1;
+            }
         }
-        return ListPagingSetMaxPagesAction;
+        return ListPagingModel;
     }());
 
     /**
-     * @internal
+     * Contains data about the selected items in the list.
      */
-    var ListPagingSetItemsPerPageAction = /** @class */ (function () {
-        function ListPagingSetItemsPerPageAction(itemsPerPage) {
-            this.itemsPerPage = itemsPerPage;
+    var ListSelectedModel = /** @class */ (function () {
+        function ListSelectedModel() {
+            this.selectedIdMap = new Map();
         }
-        return ListPagingSetItemsPerPageAction;
+        return ListSelectedModel;
+    }());
+
+    /**
+     * Specifies a set of fields to sort by.
+     */
+    var ListSortModel = /** @class */ (function () {
+        function ListSortModel(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;
+            }
+        }
+        return ListSortModel;
     }());
 
     /**
      * @internal
      */
-    var ListPagingSetPageNumberAction = /** @class */ (function () {
-        function ListPagingSetPageNumberAction(pageNumber) {
-            this.pageNumber = pageNumber;
+    var ListToolbarModel = /** @class */ (function () {
+        function ListToolbarModel(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;
+            }
         }
-        return ListPagingSetPageNumberAction;
+        return ListToolbarModel;
     }());
 
     /**
      * @internal
      */
-    var ListPagingOrchestrator = /** @class */ (function (_super) {
-        __extends(ListPagingOrchestrator, _super);
-        /* istanbul ignore next */
-        function ListPagingOrchestrator() {
-            var _this = _super.call(this) || this;
-            _this.register(ListPagingSetMaxPagesAction, _this.setMaxPages)
-                .register(ListPagingSetItemsPerPageAction, _this.setItemsPerPage)
-                .register(ListPagingSetPageNumberAction, _this.setPageNumber);
-            return _this;
+    var ListViewsModel = /** @class */ (function () {
+        function ListViewsModel(data) {
+            this.views = [];
+            if (data) {
+                this.active = data.active;
+                this.views = data.views;
+            }
         }
-        ListPagingOrchestrator.prototype.setMaxPages = function (state, action) {
-            return new ListPagingModel(Object.assign({}, state, { maxDisplayedPages: Number(action.maxPages) }));
-        };
-        ListPagingOrchestrator.prototype.setItemsPerPage = function (state, action) {
-            return new ListPagingModel(Object.assign({}, state, { itemsPerPage: Number(action.itemsPerPage) }));
-        };
-        ListPagingOrchestrator.prototype.setPageNumber = function (state, action) {
-            return new ListPagingModel(Object.assign({}, state, { pageNumber: Number(action.pageNumber) }));
-        };
-        return ListPagingOrchestrator;
-    }(ListStateOrchestrator));
+        return ListViewsModel;
+    }());
 
     /**
      * @internal
      */
-    var ListViewsLoadAction = /** @class */ (function () {
-        function ListViewsLoadAction(views) {
-            this.views = views;
+    var ListStateModel = /** @class */ (function () {
+        function ListStateModel() {
+            this.filters = [];
+            this.items = new listBuilderCommon.AsyncList();
+            this.paging = new ListPagingModel();
+            this.search = new ListSearchModel();
+            this.selected = new listBuilderCommon.AsyncItem();
+            this.sort = new ListSortModel();
+            this.toolbar = new ListToolbarModel();
+            this.views = new ListViewsModel();
+            this.selected.item = new ListSelectedModel();
         }
-        return ListViewsLoadAction;
+        return ListStateModel;
     }());
 
     /**
      * @internal
      */
-    var ListViewsOrchestrator = /** @class */ (function (_super) {
-        __extends(ListViewsOrchestrator, _super);
-        /* istanbul ignore next */
-        function ListViewsOrchestrator() {
-            var _this = _super.call(this) || this;
-            _this.register(ListViewsSetActiveAction, _this.setActive).register(ListViewsLoadAction, _this.load);
-            return _this;
+    var ListPagingSetItemsPerPageAction = /** @class */ (function () {
+        function ListPagingSetItemsPerPageAction(itemsPerPage) {
+            this.itemsPerPage = itemsPerPage;
         }
-        ListViewsOrchestrator.prototype.setActive = function (state, action) {
-            return new ListViewsModel(Object.assign({}, state, { active: action.view }));
-        };
-        ListViewsOrchestrator.prototype.load = function (state, action) {
-            return new ListViewsModel(Object.assign({}, state, { views: action.views }));
-        };
-        return ListViewsOrchestrator;
-    }(ListStateOrchestrator));
+        return ListPagingSetItemsPerPageAction;
+    }());
 
     /**
      * @internal
      */
-    var ListToolbarItemModel = /** @class */ (function () {
-        function ListToolbarItemModel(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;
-            }
+    var ListPagingSetMaxPagesAction = /** @class */ (function () {
+        function ListPagingSetMaxPagesAction(maxPages) {
+            this.maxPages = maxPages;
         }
-        return ListToolbarItemModel;
+        return ListPagingSetMaxPagesAction;
     }());
 
     /**
      * @internal
      */
-    var ListToolbarSetTypeAction = /** @class */ (function () {
-        function ListToolbarSetTypeAction(type) {
-            this.type = type;
+    var ListPagingSetPageNumberAction = /** @class */ (function () {
+        function ListPagingSetPageNumberAction(pageNumber) {
+            this.pageNumber = pageNumber;
         }
-        return ListToolbarSetTypeAction;
+        return ListPagingSetPageNumberAction;
     }());
 
     /**
      * @internal
      */
-    var ListToolbarOrchestrator = /** @class */ (function (_super) {
-        __extends(ListToolbarOrchestrator, _super);
+    var ListPagingOrchestrator = /** @class */ (function (_super) {
+        __extends(ListPagingOrchestrator, _super);
         /* istanbul ignore next */
-        function ListToolbarOrchestrator() {
+        function ListPagingOrchestrator() {
             var _this = _super.call(this) || this;
-            _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);
+            _this.register(ListPagingSetMaxPagesAction, _this.setMaxPages)
+                .register(ListPagingSetItemsPerPageAction, _this.setItemsPerPage)
+                .register(ListPagingSetPageNumberAction, _this.setPageNumber);
             return _this;
         }
-        ListToolbarOrchestrator.prototype.setExists = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            newModel.exists = action.exists;
-            return newModel;
-        };
-        ListToolbarOrchestrator.prototype.setDisabled = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            newModel.disabled = action.disable;
-            return newModel;
-        };
-        ListToolbarOrchestrator.prototype.setType = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            newModel.type = action.type;
-            return newModel;
-        };
-        ListToolbarOrchestrator.prototype.load = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            var newListItems = action.items.map(function (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);
-            });
-            var items = __spreadArray(__spreadArray([], __read(state.items)), __read(newListItems));
-            items = items.sort(function (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;
+        ListPagingOrchestrator.prototype.setMaxPages = function (state, action) {
+            return new ListPagingModel(Object.assign({}, state, { maxDisplayedPages: Number(action.maxPages) }));
         };
-        ListToolbarOrchestrator.prototype.remove = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            newModel.items = newModel.items.filter(function (item) {
-                return action.ids.indexOf(item.id) === -1;
-            });
-            return newModel;
+        ListPagingOrchestrator.prototype.setItemsPerPage = function (state, action) {
+            return new ListPagingModel(Object.assign({}, state, { itemsPerPage: Number(action.itemsPerPage) }));
         };
-        ListToolbarOrchestrator.prototype.showMultiselectToolbar = function (state, action) {
-            var newModel = new ListToolbarModel(state);
-            newModel.showMultiselectToolbar = action.exists;
-            return newModel;
+        ListPagingOrchestrator.prototype.setPageNumber = function (state, action) {
+            return new ListPagingModel(Object.assign({}, state, { pageNumber: Number(action.pageNumber) }));
         };
-        return ListToolbarOrchestrator;
+        return ListPagingOrchestrator;
     }(ListStateOrchestrator));
 
     /**
@@ -1275,6 +1160,16 @@
         return ListSearchOrchestrator;
     }(ListStateOrchestrator));
 
+    /**
+     * @internal
+     */
+    var ListSelectedLoadAction = /** @class */ (function () {
+        function ListSelectedLoadAction(items) {
+            this.items = items;
+        }
+        return ListSelectedLoadAction;
+    }());
+
     /**
      * @internal
      */
@@ -1286,6 +1181,17 @@
         return ListSelectedSetItemSelectedAction;
     }());
 
+    /**
+     * @internal
+     */
+    var ListSelectedSetLoadingAction = /** @class */ (function () {
+        function ListSelectedSetLoadingAction(loading) {
+            if (loading === void 0) { loading = true; }
+            this.loading = loading;
+        }
+        return ListSelectedSetLoadingAction;
+    }());
+
     /**
      * @internal
      */
@@ -1392,66 +1298,160 @@
     /**
      * @internal
      */
-    var ListState = /** @class */ (function (_super) {
-        __extends(ListState, _super);
-        function ListState(dispatcher) {
-            var _this = _super.call(this, new ListStateModel(), dispatcher) || this;
-            _this.register('filters', ListFiltersOrchestrator)
-                .register('items', ListItemsOrchestrator)
-                .register('paging', ListPagingOrchestrator)
-                .register('search', ListSearchOrchestrator)
-                .register('sort', ListSortOrchestrator)
-                .register('toolbar', ListToolbarOrchestrator)
-                .register('views', ListViewsOrchestrator)
-                .register('selected', ListSelectedOrchestrator)
-                .begin();
-            return _this;
+    var ListToolbarSetTypeAction = /** @class */ (function () {
+        function ListToolbarSetTypeAction(type) {
+            this.type = type;
         }
-        return ListState;
-    }(listBuilderCommon.StateNode));
-    ListState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ListState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; } });
+        return ListToolbarSetTypeAction;
+    }());
 
-    var idIndex$2 = 0;
     /**
      * @internal
      */
-    var ListViewComponent = /** @class */ (function () {
-        function ListViewComponent(state, defaultName) {
-            var _this = this;
-            this.viewId = "sky-list-view-cmp-" + ++idIndex$2;
-            this.state = state;
-            this.viewName = defaultName;
-            /* istanbul ignore next */
-            this.hasToolbar = this.state.pipe(operators.map(function (s) { return s.toolbar.exists; }));
-            this.active = this.state.pipe(operators.map(function (s) { return s.views.active === _this.viewId; }));
-            this.active
-                .pipe(operators.distinctUntilChanged())
-                .subscribe(function (isActive) { return isActive ? _this.onViewActive() : _this.onViewInactive(); });
+    var ListToolbarItemModel = /** @class */ (function () {
+        function ListToolbarItemModel(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;
+            }
         }
-        Object.defineProperty(ListViewComponent.prototype, "id", {
-            get: function () {
-                return this.viewId;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ListViewComponent.prototype, "label", {
-            get: function () {
-                return this.viewName;
-            },
-            enumerable: false,
-            configurable: true
-        });
+        return ListToolbarItemModel;
+    }());
+
+    /**
+     * @internal
+     */
+    var ListToolbarOrchestrator = /** @class */ (function (_super) {
+        __extends(ListToolbarOrchestrator, _super);
         /* istanbul ignore next */
-        ListViewComponent.prototype.onViewActive = function () { };
-        ListViewComponent.prototype.onViewInactive = function () { };
-        return ListViewComponent;
+        function ListToolbarOrchestrator() {
+            var _this = _super.call(this) || this;
+            _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);
+            return _this;
+        }
+        ListToolbarOrchestrator.prototype.setExists = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            newModel.exists = action.exists;
+            return newModel;
+        };
+        ListToolbarOrchestrator.prototype.setDisabled = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            newModel.disabled = action.disable;
+            return newModel;
+        };
+        ListToolbarOrchestrator.prototype.setType = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            newModel.type = action.type;
+            return newModel;
+        };
+        ListToolbarOrchestrator.prototype.load = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            var newListItems = action.items.map(function (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);
+            });
+            var items = __spreadArray(__spreadArray([], __read(state.items)), __read(newListItems));
+            items = items.sort(function (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;
+        };
+        ListToolbarOrchestrator.prototype.remove = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            newModel.items = newModel.items.filter(function (item) {
+                return action.ids.indexOf(item.id) === -1;
+            });
+            return newModel;
+        };
+        ListToolbarOrchestrator.prototype.showMultiselectToolbar = function (state, action) {
+            var newModel = new ListToolbarModel(state);
+            newModel.showMultiselectToolbar = action.exists;
+            return newModel;
+        };
+        return ListToolbarOrchestrator;
+    }(ListStateOrchestrator));
+
+    /**
+     * @internal
+     */
+    var ListViewsLoadAction = /** @class */ (function () {
+        function ListViewsLoadAction(views) {
+            this.views = views;
+        }
+        return ListViewsLoadAction;
     }());
 
+    /**
+     * @internal
+     */
+    var ListViewsOrchestrator = /** @class */ (function (_super) {
+        __extends(ListViewsOrchestrator, _super);
+        /* istanbul ignore next */
+        function ListViewsOrchestrator() {
+            var _this = _super.call(this) || this;
+            _this.register(ListViewsSetActiveAction, _this.setActive).register(ListViewsLoadAction, _this.load);
+            return _this;
+        }
+        ListViewsOrchestrator.prototype.setActive = function (state, action) {
+            return new ListViewsModel(Object.assign({}, state, { active: action.view }));
+        };
+        ListViewsOrchestrator.prototype.load = function (state, action) {
+            return new ListViewsModel(Object.assign({}, state, { views: action.views }));
+        };
+        return ListViewsOrchestrator;
+    }(ListStateOrchestrator));
+
+    /**
+     * @internal
+     */
+    var ListState = /** @class */ (function (_super) {
+        __extends(ListState, _super);
+        function ListState(dispatcher) {
+            var _this = _super.call(this, new ListStateModel(), dispatcher) || this;
+            _this.register('filters', ListFiltersOrchestrator)
+                .register('items', ListItemsOrchestrator)
+                .register('paging', ListPagingOrchestrator)
+                .register('search', ListSearchOrchestrator)
+                .register('sort', ListSortOrchestrator)
+                .register('toolbar', ListToolbarOrchestrator)
+                .register('views', ListViewsOrchestrator)
+                .register('selected', ListSelectedOrchestrator)
+                .begin();
+            return _this;
+        }
+        return ListState;
+    }(listBuilderCommon.StateNode));
+    ListState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ListState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListState, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; } });
+
     /**
      * @internal
      */
@@ -1866,57 +1866,38 @@
                 }] } });
 
     /**
-     * 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
      */
-    var SkyListFilterSummaryComponent = /** @class */ (function () {
-        function SkyListFilterSummaryComponent(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 i0.EventEmitter();
+    var SkyListFilterInlineItemRendererComponent = /** @class */ (function () {
+        function SkyListFilterInlineItemRendererComponent() {
         }
-        SkyListFilterSummaryComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
-            setTimeout(function () {
-                _this.appliedFilters = _this.state.pipe(operators.map(function (state) {
-                    return state.filters.filter(function (filter) {
-                        return (filter.value !== '' &&
-                            filter.value !== undefined &&
-                            filter.value !== false &&
-                            filter.value !== filter.defaultValue);
-                    });
-                }));
-            });
-        };
-        SkyListFilterSummaryComponent.prototype.filterSummaryItemDismiss = function (index) {
-            var _this = this;
-            this.appliedFilters.pipe(operators.take(1)).subscribe(function (filters) {
-                filters.splice(index, 1);
-                _this.dispatcher.filtersUpdate(filters.slice());
-            });
-        };
-        SkyListFilterSummaryComponent.prototype.filterSummaryItemClick = function (item) {
-            this.summaryItemClick.emit(item);
+        SkyListFilterInlineItemRendererComponent.prototype.ngOnInit = function () {
+            /* istanbul ignore else */
+            /* sanity check */
+            if (this.template !== undefined) {
+                this.container.createEmbeddedView(this.template, this);
+            }
         };
-        return SkyListFilterSummaryComponent;
+        return SkyListFilterInlineItemRendererComponent;
     }());
-    SkyListFilterSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0__namespace, 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__namespace.λ5, selector: "sky-filter-summary" }, { type: i3__namespace.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterSummaryComponent, decorators: [{
+    SkyListFilterInlineItemRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListFilterInlineItemRendererComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: '<ng-template #container></ng-template>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        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",
+                        selector: 'sky-list-filter-inline-item-renderer',
+                        template: '<ng-template #container></ng-template>',
                     }]
-            }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
-                    type: i0.Output
+            }], propDecorators: { template: [{
+                    type: i0.Input
+                }], filter: [{
+                    type: i0.Input
+                }], container: [{
+                    type: i0.ViewChild,
+                    args: ['container', {
+                            read: i0.ViewContainerRef,
+                            static: true,
+                        }]
                 }] } });
 
     /**
@@ -1968,49 +1949,14 @@
                 }] } });
 
     /**
-     * @internal
+     * Creates an inline filter area for the list. Place each filter
+     * in a `sky-list-filter-inline-item` component.
      */
-    var SkyListFilterInlineItemRendererComponent = /** @class */ (function () {
-        function SkyListFilterInlineItemRendererComponent() {
-        }
-        SkyListFilterInlineItemRendererComponent.prototype.ngOnInit = function () {
-            /* istanbul ignore else */
-            /* sanity check */
-            if (this.template !== undefined) {
-                this.container.createEmbeddedView(this.template, this);
-            }
-        };
-        return SkyListFilterInlineItemRendererComponent;
-    }());
-    SkyListFilterInlineItemRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterInlineItemRendererComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ViewContainerRef, static: true }], ngImport: i0__namespace, template: '<ng-template #container></ng-template>', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-list-filter-inline-item-renderer',
-                        template: '<ng-template #container></ng-template>',
-                    }]
-            }], propDecorators: { template: [{
-                    type: i0.Input
-                }], filter: [{
-                    type: i0.Input
-                }], container: [{
-                    type: i0.ViewChild,
-                    args: ['container', {
-                            read: i0.ViewContainerRef,
-                            static: true,
-                        }]
-                }] } });
-
-    /**
-     * Creates an inline filter area for the list. Place each filter
-     * in a `sky-list-filter-inline-item` component.
-     */
-    var SkyListFilterInlineComponent = /** @class */ (function () {
-        function SkyListFilterInlineComponent(dispatcher, state) {
-            this.dispatcher = dispatcher;
-            this.state = state;
-            this.inlineFilters = [];
+    var SkyListFilterInlineComponent = /** @class */ (function () {
+        function SkyListFilterInlineComponent(dispatcher, state) {
+            this.dispatcher = dispatcher;
+            this.state = state;
+            this.inlineFilters = [];
         }
         SkyListFilterInlineComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
@@ -2065,6 +2011,60 @@
                     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.
+     */
+    var SkyListFilterSummaryComponent = /** @class */ (function () {
+        function SkyListFilterSummaryComponent(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 i0.EventEmitter();
+        }
+        SkyListFilterSummaryComponent.prototype.ngAfterContentInit = function () {
+            var _this = this;
+            // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
+            setTimeout(function () {
+                _this.appliedFilters = _this.state.pipe(operators.map(function (state) {
+                    return state.filters.filter(function (filter) {
+                        return (filter.value !== '' &&
+                            filter.value !== undefined &&
+                            filter.value !== false &&
+                            filter.value !== filter.defaultValue);
+                    });
+                }));
+            });
+        };
+        SkyListFilterSummaryComponent.prototype.filterSummaryItemDismiss = function (index) {
+            var _this = this;
+            this.appliedFilters.pipe(operators.take(1)).subscribe(function (filters) {
+                filters.splice(index, 1);
+                _this.dispatcher.filtersUpdate(filters.slice());
+            });
+        };
+        SkyListFilterSummaryComponent.prototype.filterSummaryItemClick = function (item) {
+            this.summaryItemClick.emit(item);
+        };
+        return SkyListFilterSummaryComponent;
+    }());
+    SkyListFilterSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListFilterSummaryComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0__namespace, 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__namespace.λ5, selector: "sky-filter-summary" }, { type: i3__namespace.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterSummaryComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        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",
+                    }]
+            }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
+                    type: i0.Output
+                }] } });
+
     var SkyListFiltersModule = /** @class */ (function () {
         function SkyListFiltersModule() {
         }
@@ -2300,6 +2300,36 @@
                 type: i0.Injectable
             }] });
 
+    /**
+     * Adds actions to the secondary actions dropdown in the list toolbar.
+     */
+    var SkyListSecondaryActionComponent = /** @class */ (function () {
+        function SkyListSecondaryActionComponent(actionService) {
+            this.actionService = actionService;
+        }
+        SkyListSecondaryActionComponent.prototype.ngAfterContentInit = function () {
+            this.actionService.addSecondaryAction({
+                template: this.templateRef,
+            });
+        };
+        return SkyListSecondaryActionComponent;
+    }());
+    SkyListSecondaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListSecondaryActionComponent.ɵcmp = i0__namespace.ɵɵ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: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-list-secondary-action',
+                        template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n",
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyListSecondaryActionsService }]; }, propDecorators: { templateRef: [{
+                    type: i0.ViewChild,
+                    args: ['listSecondaryAction', {
+                            read: i0.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.
     /**
@@ -2381,36 +2411,6 @@
                         }]
                 }] } });
 
-    /**
-     * Adds actions to the secondary actions dropdown in the list toolbar.
-     */
-    var SkyListSecondaryActionComponent = /** @class */ (function () {
-        function SkyListSecondaryActionComponent(actionService) {
-            this.actionService = actionService;
-        }
-        SkyListSecondaryActionComponent.prototype.ngAfterContentInit = function () {
-            this.actionService.addSecondaryAction({
-                template: this.templateRef,
-            });
-        };
-        return SkyListSecondaryActionComponent;
-    }());
-    SkyListSecondaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListSecondaryActionComponent.ɵcmp = i0__namespace.ɵɵ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: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-list-secondary-action',
-                        template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n",
-                    }]
-            }], ctorParameters: function () { return [{ type: SkyListSecondaryActionsService }]; }, propDecorators: { templateRef: [{
-                    type: i0.ViewChild,
-                    args: ['listSecondaryAction', {
-                            read: i0.TemplateRef,
-                            static: true,
-                        }]
-                }] } });
-
     var SkyListSecondaryActionsModule = /** @class */ (function () {
         function SkyListSecondaryActionsModule() {
         }
@@ -2442,222 +2442,13 @@
                         imports: [
                             i4.CommonModule,
                             i2.SkyDropdownModule,
-                            i5.SkyI18nModule,
-                            i3$1.SkyIconModule,
-                            SkyListBuilderResourcesModule,
-                        ],
-                        exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
-                    }]
-            }] });
-
-    var idIndex = 0;
-    /**
-     * Defines a toolbar item for the list toolbar.
-     */
-    var SkyListToolbarItemComponent = /** @class */ (function () {
-        function SkyListToolbarItemComponent() {
-            /**
-             * Specifies the ID of the item.
-             */
-            this.id = "sky-list-toolbar-item-" + ++idIndex;
-            /**
-             * Specifies the index of the item at the given item location.
-             * @default -1
-             */
-            this.index = -1;
-            /**
-             * Specifies the toolbar location of the item. The valid options are `"left"`,
-             * `"center"`, and `"right"`.
-             * @default "left"
-             */
-            this.location = 'left';
-        }
-        Object.defineProperty(SkyListToolbarItemComponent.prototype, "template", {
-            get: function () {
-                return this.templates.length > 0 ? this.templates.first : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return SkyListToolbarItemComponent;
-    }());
-    SkyListToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarItemComponent, selector: "sky-list-toolbar-item", inputs: { id: "id", index: "index", location: "location" }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarItemComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-list-toolbar-item',
-                        template: '<ng-content></ng-content>',
-                    }]
-            }], propDecorators: { id: [{
-                    type: i0.Input
-                }], index: [{
-                    type: i0.Input
-                }], location: [{
-                    type: i0.Input
-                }], templates: [{
-                    type: i0.ContentChildren,
-                    args: [i0.TemplateRef]
-                }] } });
-
-    /**
-     * Adds a sort dropdown to the list toolbar.
-     */
-    var SkyListToolbarSortComponent = /** @class */ (function () {
-        function SkyListToolbarSortComponent() {
-        }
-        return SkyListToolbarSortComponent;
-    }());
-    SkyListToolbarSortComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSortComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarSortComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarSortComponent, selector: "sky-list-toolbar-sort", inputs: { label: "label", field: "field", type: "type", descending: "descending" }, ngImport: i0__namespace, template: '', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSortComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-list-toolbar-sort',
-                        template: '',
-                    }]
-            }], propDecorators: { label: [{
-                    type: i0.Input
-                }], field: [{
-                    type: i0.Input
-                }], type: [{
-                    type: i0.Input
-                }], descending: [{
-                    type: i0.Input
-                }] } });
-
-    /**
-     * Adds a section on the right side of the toolbar for items that substantially change
-     * or affect the view of the list. This includes simple filters and view switchers.
-     * If the view section includes more than one item, simple filters appear on the left
-     * and view switchers appear on the right.
-     */
-    var SkyListToolbarViewActionsComponent = /** @class */ (function () {
-        function SkyListToolbarViewActionsComponent() {
-        }
-        return SkyListToolbarViewActionsComponent;
-    }());
-    SkyListToolbarViewActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarViewActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarViewActionsComponent, selector: "sky-list-toolbar-view-actions", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        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}\n"],
-                    }]
-            }] });
-
-    /**
-     * @internal
-     */
-    var ListToolbarConfigSetSearchEnabledAction = /** @class */ (function () {
-        function ListToolbarConfigSetSearchEnabledAction(enabled) {
-            this.enabled = enabled;
-        }
-        return ListToolbarConfigSetSearchEnabledAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListToolbarConfigSetSortSelectorEnabledAction = /** @class */ (function () {
-        /* istanbul ignore next */
-        function ListToolbarConfigSetSortSelectorEnabledAction(enabled) {
-            if (enabled === void 0) { enabled = true; }
-            this.enabled = enabled;
-        }
-        return ListToolbarConfigSetSortSelectorEnabledAction;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListToolbarStateDispatcher = /** @class */ (function (_super) {
-        __extends(ListToolbarStateDispatcher, _super);
-        function ListToolbarStateDispatcher() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return ListToolbarStateDispatcher;
-    }(listBuilderCommon.StateDispatcher));
-    ListToolbarStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ListToolbarStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher, decorators: [{
-                type: i0.Injectable
-            }] });
-    /**
-     * @internal
-     */
-    var ListToolbarStateOrchestrator = /** @class */ (function (_super) {
-        __extends(ListToolbarStateOrchestrator, _super);
-        function ListToolbarStateOrchestrator() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return ListToolbarStateOrchestrator;
-    }(listBuilderCommon.StateOrchestrator));
-
-    /**
-     * @internal
-     */
-    var ListToolbarConfigModel = /** @class */ (function () {
-        function ListToolbarConfigModel(data) {
-            this.searchEnabled = true;
-            this.sortSelectorEnabled = true;
-            if (data) {
-                this.searchEnabled = data.searchEnabled;
-                this.sortSelectorEnabled = data.sortSelectorEnabled;
-            }
-        }
-        return ListToolbarConfigModel;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListToolbarConfigOrchestrator = /** @class */ (function (_super) {
-        __extends(ListToolbarConfigOrchestrator, _super);
-        /* istanbul ignore next */
-        function ListToolbarConfigOrchestrator() {
-            var _this = _super.call(this) || this;
-            _this.register(ListToolbarConfigSetSearchEnabledAction, _this.setSearchEnabled).register(ListToolbarConfigSetSortSelectorEnabledAction, _this.setSortSelectorEnabled);
-            return _this;
-        }
-        ListToolbarConfigOrchestrator.prototype.setSearchEnabled = function (state, action) {
-            return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
-        };
-        ListToolbarConfigOrchestrator.prototype.setSortSelectorEnabled = function (state, action) {
-            return new ListToolbarConfigModel(Object.assign({}, state, { sortSelectorEnabled: action.enabled }));
-        };
-        return ListToolbarConfigOrchestrator;
-    }(ListToolbarStateOrchestrator));
-
-    /**
-     * @internal
-     */
-    var ListToolbarStateModel = /** @class */ (function () {
-        function ListToolbarStateModel() {
-            this.config = new ListToolbarConfigModel();
-        }
-        return ListToolbarStateModel;
-    }());
-
-    /**
-     * @internal
-     */
-    var ListToolbarState = /** @class */ (function (_super) {
-        __extends(ListToolbarState, _super);
-        function ListToolbarState(initialState, dispatcher) {
-            var _this = _super.call(this, initialState, dispatcher) || this;
-            _this.register('config', ListToolbarConfigOrchestrator).begin();
-            return _this;
-        }
-        return ListToolbarState;
-    }(listBuilderCommon.StateNode));
-    ListToolbarState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState, deps: [{ token: ListToolbarStateModel }, { token: ListToolbarStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ListToolbarState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState, decorators: [{
-                type: i0.Injectable
-            }], ctorParameters: function () { return [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }]; } });
+                            i5.SkyI18nModule,
+                            i3$1.SkyIconModule,
+                            SkyListBuilderResourcesModule,
+                        ],
+                        exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
+                    }]
+            }] });
 
     /**
      * @internal
@@ -2834,6 +2625,235 @@
                     type: i0.Input
                 }] } });
 
+    var idIndex = 0;
+    /**
+     * Defines a toolbar item for the list toolbar.
+     */
+    var SkyListToolbarItemComponent = /** @class */ (function () {
+        function SkyListToolbarItemComponent() {
+            /**
+             * Specifies the ID of the item.
+             */
+            this.id = "sky-list-toolbar-item-" + ++idIndex;
+            /**
+             * Specifies the index of the item at the given item location.
+             * @default -1
+             */
+            this.index = -1;
+            /**
+             * Specifies the toolbar location of the item. The valid options are `"left"`,
+             * `"center"`, and `"right"`.
+             * @default "left"
+             */
+            this.location = 'left';
+        }
+        Object.defineProperty(SkyListToolbarItemComponent.prototype, "template", {
+            get: function () {
+                return this.templates.length > 0 ? this.templates.first : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return SkyListToolbarItemComponent;
+    }());
+    SkyListToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarItemComponent, selector: "sky-list-toolbar-item", inputs: { id: "id", index: "index", location: "location" }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarItemComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-list-toolbar-item',
+                        template: '<ng-content></ng-content>',
+                    }]
+            }], propDecorators: { id: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }], location: [{
+                    type: i0.Input
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i0.TemplateRef]
+                }] } });
+
+    /**
+     * Displays custom actions in the toolbar beside to the search bar.
+     */
+    var SkyListToolbarSearchActionsComponent = /** @class */ (function () {
+        function SkyListToolbarSearchActionsComponent() {
+        }
+        return SkyListToolbarSearchActionsComponent;
+    }());
+    SkyListToolbarSearchActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarSearchActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarSearchActionsComponent, selector: "sky-list-toolbar-search-actions", ngImport: i0__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-list-toolbar-search-actions',
+                        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,
+                    }]
+            }] });
+
+    /**
+     * Adds a sort dropdown to the list toolbar.
+     */
+    var SkyListToolbarSortComponent = /** @class */ (function () {
+        function SkyListToolbarSortComponent() {
+        }
+        return SkyListToolbarSortComponent;
+    }());
+    SkyListToolbarSortComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSortComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarSortComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarSortComponent, selector: "sky-list-toolbar-sort", inputs: { label: "label", field: "field", type: "type", descending: "descending" }, ngImport: i0__namespace, template: '', isInline: true });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSortComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-list-toolbar-sort',
+                        template: '',
+                    }]
+            }], propDecorators: { label: [{
+                    type: i0.Input
+                }], field: [{
+                    type: i0.Input
+                }], type: [{
+                    type: i0.Input
+                }], descending: [{
+                    type: i0.Input
+                }] } });
+
+    /**
+     * Adds a section on the right side of the toolbar for items that substantially change
+     * or affect the view of the list. This includes simple filters and view switchers.
+     * If the view section includes more than one item, simple filters appear on the left
+     * and view switchers appear on the right.
+     */
+    var SkyListToolbarViewActionsComponent = /** @class */ (function () {
+        function SkyListToolbarViewActionsComponent() {
+        }
+        return SkyListToolbarViewActionsComponent;
+    }());
+    SkyListToolbarViewActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarViewActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarViewActionsComponent, selector: "sky-list-toolbar-view-actions", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        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}\n"],
+                    }]
+            }] });
+
+    /**
+     * @internal
+     */
+    var ListToolbarConfigSetSearchEnabledAction = /** @class */ (function () {
+        function ListToolbarConfigSetSearchEnabledAction(enabled) {
+            this.enabled = enabled;
+        }
+        return ListToolbarConfigSetSearchEnabledAction;
+    }());
+
+    /**
+     * @internal
+     */
+    var ListToolbarConfigSetSortSelectorEnabledAction = /** @class */ (function () {
+        /* istanbul ignore next */
+        function ListToolbarConfigSetSortSelectorEnabledAction(enabled) {
+            if (enabled === void 0) { enabled = true; }
+            this.enabled = enabled;
+        }
+        return ListToolbarConfigSetSortSelectorEnabledAction;
+    }());
+
+    /**
+     * @internal
+     */
+    var ListToolbarConfigModel = /** @class */ (function () {
+        function ListToolbarConfigModel(data) {
+            this.searchEnabled = true;
+            this.sortSelectorEnabled = true;
+            if (data) {
+                this.searchEnabled = data.searchEnabled;
+                this.sortSelectorEnabled = data.sortSelectorEnabled;
+            }
+        }
+        return ListToolbarConfigModel;
+    }());
+
+    /**
+     * @internal
+     */
+    var ListToolbarStateModel = /** @class */ (function () {
+        function ListToolbarStateModel() {
+            this.config = new ListToolbarConfigModel();
+        }
+        return ListToolbarStateModel;
+    }());
+
+    /**
+     * @internal
+     */
+    var ListToolbarStateDispatcher = /** @class */ (function (_super) {
+        __extends(ListToolbarStateDispatcher, _super);
+        function ListToolbarStateDispatcher() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ListToolbarStateDispatcher;
+    }(listBuilderCommon.StateDispatcher));
+    ListToolbarStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ListToolbarStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarStateDispatcher, decorators: [{
+                type: i0.Injectable
+            }] });
+    /**
+     * @internal
+     */
+    var ListToolbarStateOrchestrator = /** @class */ (function (_super) {
+        __extends(ListToolbarStateOrchestrator, _super);
+        function ListToolbarStateOrchestrator() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ListToolbarStateOrchestrator;
+    }(listBuilderCommon.StateOrchestrator));
+
+    /**
+     * @internal
+     */
+    var ListToolbarConfigOrchestrator = /** @class */ (function (_super) {
+        __extends(ListToolbarConfigOrchestrator, _super);
+        /* istanbul ignore next */
+        function ListToolbarConfigOrchestrator() {
+            var _this = _super.call(this) || this;
+            _this.register(ListToolbarConfigSetSearchEnabledAction, _this.setSearchEnabled).register(ListToolbarConfigSetSortSelectorEnabledAction, _this.setSortSelectorEnabled);
+            return _this;
+        }
+        ListToolbarConfigOrchestrator.prototype.setSearchEnabled = function (state, action) {
+            return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
+        };
+        ListToolbarConfigOrchestrator.prototype.setSortSelectorEnabled = function (state, action) {
+            return new ListToolbarConfigModel(Object.assign({}, state, { sortSelectorEnabled: action.enabled }));
+        };
+        return ListToolbarConfigOrchestrator;
+    }(ListToolbarStateOrchestrator));
+
+    /**
+     * @internal
+     */
+    var ListToolbarState = /** @class */ (function (_super) {
+        __extends(ListToolbarState, _super);
+        function ListToolbarState(initialState, dispatcher) {
+            var _this = _super.call(this, initialState, dispatcher) || this;
+            _this.register('config', ListToolbarConfigOrchestrator).begin();
+            return _this;
+        }
+        return ListToolbarState;
+    }(listBuilderCommon.StateNode));
+    ListToolbarState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState, deps: [{ token: ListToolbarStateModel }, { token: ListToolbarStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ListToolbarState.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListToolbarState, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () { return [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }]; } });
+
     var nextId = 0;
     /**
      * Displays a toolbar for a SKY UX-themed list of data.
@@ -3180,26 +3200,6 @@
                         }]
                 }] } });
 
-    /**
-     * Displays custom actions in the toolbar beside to the search bar.
-     */
-    var SkyListToolbarSearchActionsComponent = /** @class */ (function () {
-        function SkyListToolbarSearchActionsComponent() {
-        }
-        return SkyListToolbarSearchActionsComponent;
-    }());
-    SkyListToolbarSearchActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarSearchActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarSearchActionsComponent, selector: "sky-list-toolbar-search-actions", ngImport: i0__namespace, 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__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'sky-list-toolbar-search-actions',
-                        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,
-                    }]
-            }] });
-
     var SkyListToolbarModule = /** @class */ (function () {
         function SkyListToolbarModule() {
         }