@skyux/list-builder 5.0.0 → 5.5.0-alpha.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';
+    (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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -485,6 +483,7 @@
         function ListSearchModel(data) {
             /**
              * Specifies the text to search.
+             * @default ""
              */
             this.searchText = '';
             /**
@@ -531,13 +530,13 @@
                     var pagedResult = result.slice(itemStart, itemStart + request.pageSize);
                     return new ListDataResponseModel({
                         count: result.length,
-                        items: pagedResult
+                        items: pagedResult,
                     });
                 }
                 else {
                     return new ListDataResponseModel({
                         count: result.length,
-                        items: result
+                        items: result,
                     });
                 }
             }));
@@ -574,7 +573,9 @@
                 _this.lastFilters = filters;
                 var result = items;
                 // Apply filters.
-                if (!dataChanged && !filtersChanged && _this.lastFilterResults !== undefined) {
+                if (!dataChanged &&
+                    !filtersChanged &&
+                    _this.lastFilterResults !== undefined) {
                     result = _this.lastFilterResults;
                 }
                 else if (filters && filters.length > 0) {
@@ -600,10 +601,15 @@
                 }
                 // Apply search.
                 /* istanbul ignore next */
-                if (!dataChanged && !searchChanged && _this.lastSearchResults !== undefined && !filtersChanged) {
+                if (!dataChanged &&
+                    !searchChanged &&
+                    _this.lastSearchResults !== undefined &&
+                    !filtersChanged) {
                     result = _this.lastSearchResults;
                 }
-                else if (search && search.searchText !== undefined && search.searchText.length > 0) {
+                else if (search &&
+                    search.searchText !== undefined &&
+                    search.searchText.length > 0) {
                     var searchText_1 = search.searchText.toLowerCase();
                     var searchFunctions_1;
                     if (_this.searchFunction !== undefined) {
@@ -617,7 +623,8 @@
                         for (var i = 0; i < searchFunctions_1.length; i++) {
                             var searchFunction = searchFunctions_1[i];
                             var searchResult = searchFunction(item.data, searchText_1);
-                            if ((typeof searchResult === 'string' && searchResult.indexOf(searchText_1) !== -1) ||
+                            if ((typeof searchResult === 'string' &&
+                                searchResult.indexOf(searchText_1) !== -1) ||
                                 searchResult === true) {
                                 isMatch = true;
                                 break;
@@ -632,7 +639,9 @@
                 }
                 // Apply sort.
                 if (sort && sort.fieldSelectors.length > 0) {
-                    result = result.slice().sort(function (item1, item2) {
+                    result = result
+                        .slice()
+                        .sort(function (item1, item2) {
                         var compareResult = 0;
                         for (var i = 0; i < sort.fieldSelectors.length; i++) {
                             var selector = sort.fieldSelectors[i];
@@ -948,9 +957,9 @@
         };
         return ListStateDispatcher;
     }(listBuilderCommon.StateDispatcher));
-    ListStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ListStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListStateDispatcher });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListStateDispatcher, decorators: [{
+    ListStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ListStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListStateDispatcher });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ListStateDispatcher, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -962,8 +971,7 @@
         /* istanbul ignore next */
         function ListFiltersOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListFiltersUpdateAction, _this.update);
+            _this.register(ListFiltersUpdateAction, _this.update);
             return _this;
         }
         ListFiltersOrchestrator.prototype.update = function (state, action) {
@@ -996,8 +1004,7 @@
         /* istanbul ignore next */
         function ListItemsOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListItemsSetLoadingAction, _this.setLoading)
+            _this.register(ListItemsSetLoadingAction, _this.setLoading)
                 .register(ListItemsLoadAction, _this.load)
                 .register(ListItemsSetSelectedAction, _this.setItemsSelected);
             return _this;
@@ -1007,7 +1014,8 @@
         };
         ListItemsOrchestrator.prototype.load = function (state, action) {
             var newListItems = action.items.map(function (g) { return new listBuilderCommon.ListItemModel(g.id, g.data, g.isSelected); });
-            var resultItems = (action.refresh) ? __spreadArray([], __read(newListItems)) : __spreadArray(__spreadArray([], __read(state.items)), __read(newListItems));
+            var resultItems = action.refresh
+                ? __spreadArray([], __read(newListItems)) : __spreadArray(__spreadArray([], __read(state.items)), __read(newListItems));
             var count = action.count === undefined ? resultItems.length : action.count;
             return new listBuilderCommon.AsyncList(resultItems, action.dataChanged ? Date.now() : state.lastUpdate, false, count);
         };
@@ -1016,7 +1024,7 @@
             var newSelectedIds = action.items || [];
             var newListItemModels = this.cloneListItemModelArray(state.items);
             if (action.refresh) {
-                newListItemModels.forEach(function (item) { return item.isSelected = undefined; });
+                newListItemModels.forEach(function (item) { return (item.isSelected = undefined); });
             }
             newSelectedIds.map(function (s) {
                 var newItem = newListItemModels.find(function (i) { return i.id === s; });
@@ -1075,8 +1083,7 @@
         /* istanbul ignore next */
         function ListPagingOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListPagingSetMaxPagesAction, _this.setMaxPages)
+            _this.register(ListPagingSetMaxPagesAction, _this.setMaxPages)
                 .register(ListPagingSetItemsPerPageAction, _this.setItemsPerPage)
                 .register(ListPagingSetPageNumberAction, _this.setPageNumber);
             return _this;
@@ -1111,9 +1118,7 @@
         /* istanbul ignore next */
         function ListViewsOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListViewsSetActiveAction, _this.setActive)
-                .register(ListViewsLoadAction, _this.load);
+            _this.register(ListViewsSetActiveAction, _this.setActive).register(ListViewsLoadAction, _this.load);
             return _this;
         }
         ListViewsOrchestrator.prototype.setActive = function (state, action) {
@@ -1160,8 +1165,7 @@
         /* istanbul ignore next */
         function ListToolbarOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListToolbarSetExistsAction, _this.setExists)
+            _this.register(ListToolbarSetExistsAction, _this.setExists)
                 .register(ListToolbarItemsDisableAction, _this.setDisabled)
                 .register(ListToolbarItemsLoadAction, _this.load)
                 .register(ListToolbarSetTypeAction, _this.setType)
@@ -1235,15 +1239,16 @@
         /* istanbul ignore next */
         function ListSearchOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListSearchSetSearchTextAction, _this.setSearchText)
+            _this.register(ListSearchSetSearchTextAction, _this.setSearchText)
                 .register(ListSearchSetFunctionsAction, _this.setFunctions)
                 .register(ListSearchSetFieldSelectorsAction, _this.setFieldSelectors)
                 .register(ListSearchSetOptionsAction, _this.setOptions);
             return _this;
         }
         ListSearchOrchestrator.prototype.setSearchText = function (state, action) {
-            return new ListSearchModel(Object.assign({}, state, { searchText: action.searchText ? action.searchText : '' }));
+            return new ListSearchModel(Object.assign({}, state, {
+                searchText: action.searchText ? action.searchText : '',
+            }));
         };
         ListSearchOrchestrator.prototype.setFunctions = function (state, action) {
             return new ListSearchModel(Object.assign({}, state, { functions: __spreadArray([], __read(action.functions)) }));
@@ -1289,8 +1294,7 @@
         /* istanbul ignore next */
         function ListSelectedOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListSelectedSetLoadingAction, _this.setLoading)
+            _this.register(ListSelectedSetLoadingAction, _this.setLoading)
                 .register(ListSelectedSetItemSelectedAction, _this.setItemSelected)
                 .register(ListSelectedSetItemsSelectedAction, _this.setItemsSelected)
                 .register(ListSelectedLoadAction, _this.load);
@@ -1311,11 +1315,11 @@
         };
         ListSelectedOrchestrator.prototype.setItemsSelected = function (state, action) {
             var newSelectedIds = action.items || [];
-            var newListSelectedModel = action.refresh ? new ListSelectedModel() : this.cloneListSelectedModel(state.item);
+            var newListSelectedModel = action.refresh
+                ? new ListSelectedModel()
+                : this.cloneListSelectedModel(state.item);
             if (newSelectedIds instanceof rxjs.Observable) {
-                newSelectedIds
-                    .pipe(operators.take(1))
-                    .subscribe(function (selectedIds) {
+                newSelectedIds.pipe(operators.take(1)).subscribe(function (selectedIds) {
                     selectedIds.map(function (s) { return newListSelectedModel.selectedIdMap.set(s, action.selected); });
                 });
             }
@@ -1366,8 +1370,7 @@
         /* istanbul ignore next */
         function ListSortOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListSortSetFieldSelectorsAction, _this.setFieldSelectors)
+            _this.register(ListSortSetFieldSelectorsAction, _this.setFieldSelectors)
                 .register(ListSortSetAvailableAction, _this.setAvailable)
                 .register(ListSortSetGlobalAction, _this.setGlobal);
             return _this;
@@ -1393,8 +1396,7 @@
         __extends(ListState, _super);
         function ListState(dispatcher) {
             var _this = _super.call(this, new ListStateModel(), dispatcher) || this;
-            _this
-                .register('filters', ListFiltersOrchestrator)
+            _this.register('filters', ListFiltersOrchestrator)
                 .register('items', ListItemsOrchestrator)
                 .register('paging', ListPagingOrchestrator)
                 .register('search', ListSearchOrchestrator)
@@ -1407,9 +1409,9 @@
         }
         return ListState;
     }(listBuilderCommon.StateNode));
-    ListState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: ListState });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListState, decorators: [{
+    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 }]; } });
 
@@ -1426,7 +1428,9 @@
             /* 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(); });
+            this.active
+                .pipe(operators.distinctUntilChanged())
+                .subscribe(function (isActive) { return isActive ? _this.onViewActive() : _this.onViewInactive(); });
         }
         Object.defineProperty(ListViewComponent.prototype, "id", {
             get: function () {
@@ -1443,10 +1447,8 @@
             configurable: true
         });
         /* istanbul ignore next */
-        ListViewComponent.prototype.onViewActive = function () {
-        };
-        ListViewComponent.prototype.onViewInactive = function () {
-        };
+        ListViewComponent.prototype.onViewActive = function () { };
+        ListViewComponent.prototype.onViewInactive = function () { };
         return ListViewComponent;
     }());
 
@@ -1491,7 +1493,6 @@
              * Emits the filters applied to the list.
              */
             this.appliedFiltersChange = new i0.EventEmitter();
-            /* tslint:enable */
             this.dataFirstLoad = false;
             this.lastSelectedIds = [];
             this.lastFilters = [];
@@ -1503,7 +1504,9 @@
                 this.dataFirstLoad = true;
             }
             if (this.listViews.length > 0) {
-                var defaultView = (this.defaultView === undefined) ? this.listViews.first : this.defaultView;
+                var defaultView = this.defaultView === undefined
+                    ? this.listViews.first
+                    : this.defaultView;
                 this.dispatcher.next(new ListViewsLoadAction(this.listViews.map(function (v) { return new ListViewModel(v.id, v.label); })));
                 // activate the default view
                 this.dispatcher.next(new ListViewsSetActiveAction(defaultView.id));
@@ -1563,9 +1566,11 @@
         SkyListComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             if (changes['appliedFilters'] &&
-                changes['appliedFilters'].currentValue !== changes['appliedFilters'].previousValue) {
+                changes['appliedFilters'].currentValue !==
+                    changes['appliedFilters'].previousValue) {
                 this.state.pipe(operators.take(1)).subscribe(function (currentState) {
-                    if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                    if (currentState.paging.pageNumber &&
+                        currentState.paging.pageNumber !== 1) {
                         _this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                     }
                     _this.dispatcher.filtersUpdate(_this.appliedFilters);
@@ -1623,7 +1628,7 @@
                         selectedChanged = true;
                         return selected;
                     })),
-                    data.pipe(operators.distinctUntilChanged())
+                    data.pipe(operators.distinctUntilChanged()),
                 ], function (filters, search, sortFieldSelectors, itemsPerPage, pageNumber, isToolbarDisabled, selected, itemsData) {
                     cancelLastRequest.next();
                     cancelLastRequest.complete();
@@ -1639,29 +1644,30 @@
                         var initialItems = itemsData.map(function (d) { return new listBuilderCommon.ListItemModel(d.id || "sky-list-item-model-" + ++idIndex$1, d); });
                         response = rxjs.of(new ListDataResponseModel({
                             count: _this.initialTotal,
-                            items: initialItems
+                            items: initialItems,
                         })).pipe(operators.takeUntil(cancelLastRequest));
                     }
                     else {
-                        response = _this.dataProvider.get(new ListDataRequestModel({
+                        response = _this.dataProvider
+                            .get(new ListDataRequestModel({
                             filters: filters,
                             pageSize: itemsPerPage,
                             pageNumber: pageNumber,
                             search: search,
                             sort: new ListSortModel({ fieldSelectors: sortFieldSelectors }),
-                            isToolbarDisabled: isToolbarDisabled
-                        })).pipe(operators.takeUntil(cancelLastRequest));
+                            isToolbarDisabled: isToolbarDisabled,
+                        }))
+                            .pipe(operators.takeUntil(cancelLastRequest));
                     }
                     return response;
-                })
-                    .pipe(operators.takeUntil(this.ngUnsubscribe), 
+                }).pipe(operators.takeUntil(this.ngUnsubscribe), 
                 // Retain user selections from previous state.
                 // This is only necessary for grids component (based on item.isSelected).
                 operators.map(function (response) {
                     return response.pipe(operators.map(function (listDataResponseModel) {
                         return new ListDataResponseModel({
                             count: listDataResponseModel.count,
-                            items: _this.getItemsAndRetainSelections(listDataResponseModel.items, _this.lastSelectedIds)
+                            items: _this.getItemsAndRetainSelections(listDataResponseModel.items, _this.lastSelectedIds),
                         });
                     }));
                 }), operators.flatMap(function (value) { return value; }));
@@ -1680,8 +1686,7 @@
         });
         Object.defineProperty(SkyListComponent.prototype, "lastUpdate", {
             get: function () {
-                return this.state
-                    .pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.items.lastUpdate ? new Date(s.items.lastUpdate) : undefined; }));
+                return this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.items.lastUpdate ? new Date(s.items.lastUpdate) : undefined; }));
             },
             enumerable: false,
             configurable: true
@@ -1727,15 +1732,15 @@
         };
         return SkyListComponent;
     }());
-    SkyListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListComponent, selector: "sky-list", inputs: { data: "data", dataProvider: "dataProvider", defaultView: "defaultView", initialTotal: "initialTotal", selectedIds: "selectedIds", sortFields: "sortFields", appliedFilters: "appliedFilters", searchFunction: ["search", "searchFunction"] }, outputs: { selectedIdsChange: "selectedIdsChange", appliedFiltersChange: "appliedFiltersChange" }, providers: [ListState, ListStateDispatcher], queries: [{ propertyName: "listViews", predicate: ListViewComponent }], usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListComponent, decorators: [{
+    SkyListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListComponent, selector: "sky-list", inputs: { data: "data", dataProvider: "dataProvider", defaultView: "defaultView", initialTotal: "initialTotal", selectedIds: "selectedIds", sortFields: "sortFields", appliedFilters: "appliedFilters", searchFunction: ["search", "searchFunction"] }, outputs: { selectedIdsChange: "selectedIdsChange", appliedFiltersChange: "appliedFiltersChange" }, providers: [ListState, ListStateDispatcher], queries: [{ propertyName: "listViews", predicate: ListViewComponent }], usesOnChanges: true, ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list',
                         template: '<ng-content></ng-content>',
                         providers: [ListState, ListStateDispatcher],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { data: [{
                     type: i0.Input
@@ -1768,23 +1773,15 @@
         }
         return SkyListModule;
     }());
-    SkyListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListModule, declarations: [SkyListComponent], imports: [i4.CommonModule], exports: [SkyListComponent] });
-    SkyListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListModule, imports: [[
-                i4.CommonModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListModule, decorators: [{
+    SkyListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListModule, declarations: [SkyListComponent], imports: [i4.CommonModule], exports: [SkyListComponent] });
+    SkyListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListModule, imports: [[i4.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyListComponent
-                        ],
-                        imports: [
-                            i4.CommonModule
-                        ],
-                        exports: [
-                            SkyListComponent
-                        ]
+                        declarations: [SkyListComponent],
+                        imports: [i4.CommonModule],
+                        exports: [SkyListComponent],
                     }]
             }] });
 
@@ -1846,25 +1843,25 @@
                 new ListToolbarItemModel({
                     template: this.filterButtonTemplate,
                     location: 'left',
-                    index: this.filterButtonItemToolbarIndex
-                })
+                    index: this.filterButtonItemToolbarIndex,
+                }),
             ]);
         };
         return SkyListFilterButtonComponent;
     }());
-    SkyListFilterButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterButtonComponent, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListFilterButtonComponent, selector: "sky-list-filter-button", viewQueries: [{ propertyName: "filterButtonTemplate", first: true, predicate: ["filterButton"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterButtonComponent, decorators: [{
+    SkyListFilterButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterButtonComponent, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListFilterButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListFilterButtonComponent, selector: "sky-list-filter-button", viewQueries: [{ propertyName: "filterButtonTemplate", first: true, predicate: ["filterButton"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterButtonComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-filter-button',
-                        templateUrl: './list-filter-button.component.html'
+                        template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n",
                     }]
             }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { filterButtonTemplate: [{
                     type: i0.ViewChild,
                     args: ['filterButton', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -1890,10 +1887,10 @@
             setTimeout(function () {
                 _this.appliedFilters = _this.state.pipe(operators.map(function (state) {
                     return state.filters.filter(function (filter) {
-                        return filter.value !== '' &&
+                        return (filter.value !== '' &&
                             filter.value !== undefined &&
                             filter.value !== false &&
-                            filter.value !== filter.defaultValue;
+                            filter.value !== filter.defaultValue);
                     });
                 }));
             });
@@ -1910,13 +1907,13 @@
         };
         return SkyListFilterSummaryComponent;
     }());
-    SkyListFilterSummaryComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", 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.8", 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.8", ngImport: i0__namespace, type: SkyListFilterSummaryComponent, decorators: [{
+    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',
-                        templateUrl: './list-filter-summary.component.html'
+                        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
@@ -1927,7 +1924,6 @@
      */
     var SkyListFilterInlineItemComponent = /** @class */ (function () {
         function SkyListFilterInlineItemComponent() {
-            /* tslint:enable:no-input-rename */
             this.onChange = new i0.EventEmitter();
         }
         SkyListFilterInlineItemComponent.prototype.ngOnInit = function () {
@@ -1937,20 +1933,22 @@
         };
         Object.defineProperty(SkyListFilterInlineItemComponent.prototype, "template", {
             get: function () {
-                return this.templates.length > 0 ? this.templates.first : this.templateInput;
+                return this.templates.length > 0
+                    ? this.templates.first
+                    : this.templateInput;
             },
             enumerable: false,
             configurable: true
         });
         return SkyListFilterInlineItemComponent;
     }());
-    SkyListFilterInlineItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterInlineItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterInlineItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListFilterInlineItemComponent, selector: "sky-list-filter-inline-item", inputs: { name: "name", value: "value", defaultValue: "defaultValue", filterFunction: ["filter", "filterFunction"], templateInput: ["template", "templateInput"] }, queries: [{ propertyName: "templates", predicate: i0.TemplateRef }], ngImport: i0__namespace, template: '<ng-content></ng-content>', isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterInlineItemComponent, decorators: [{
+    SkyListFilterInlineItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListFilterInlineItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListFilterInlineItemComponent, selector: "sky-list-filter-inline-item", inputs: { name: "name", value: "value", defaultValue: "defaultValue", filterFunction: ["filter", "filterFunction"], templateInput: ["template", "templateInput"] }, queries: [{ propertyName: "templates", predicate: 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: SkyListFilterInlineItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-filter-inline-item',
-                        template: '<ng-content></ng-content>'
+                        template: '<ng-content></ng-content>',
                     }]
             }], propDecorators: { name: [{
                     type: i0.Input
@@ -1984,13 +1982,13 @@
         };
         return SkyListFilterInlineItemRendererComponent;
     }());
-    SkyListFilterInlineItemRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterInlineItemRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: SkyListFilterInlineItemRendererComponent, 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-inline-item-renderer',
-                        template: '<ng-template #container></ng-template>'
+                        template: '<ng-template #container></ng-template>',
                     }]
             }], propDecorators: { template: [{
                     type: i0.Input
@@ -2000,7 +1998,7 @@
                     type: i0.ViewChild,
                     args: ['container', {
                             read: i0.ViewContainerRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -2022,7 +2020,7 @@
                     filterFunction: filter.filterFunction,
                     template: filter.template,
                     value: filter.value,
-                    defaultValue: filter.defaultValue
+                    defaultValue: filter.defaultValue,
                 });
             });
             this.inlineFilters.forEach(function (filter) {
@@ -2035,7 +2033,8 @@
         SkyListFilterInlineComponent.prototype.applyFilters = function () {
             var _this = this;
             this.state.pipe(operators.take(1)).subscribe(function (currentState) {
-                if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
                     _this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                 }
                 _this.dispatcher.filtersUpdate(_this.getFilterModelFromInline(_this.inlineFilters));
@@ -2047,19 +2046,19 @@
                     name: filter.name,
                     value: filter.value,
                     filterFunction: filter.filterFunction,
-                    defaultValue: filter.defaultValue
+                    defaultValue: filter.defaultValue,
                 });
             });
         };
         return SkyListFilterInlineComponent;
     }());
-    SkyListFilterInlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListFilterInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0__namespace, template: "<ng-content></ng-content>\n\n<sky-filter-inline>\n  <sky-filter-inline-item\n    *ngFor=\"let filter of inlineFilters\">\n    <sky-list-filter-inline-item-renderer\n      [template]=\"filter.template\"\n      [filter]=\"filter\">\n    </sky-list-filter-inline-item-renderer>\n  </sky-filter-inline-item>\n</sky-filter-inline>\n", components: [{ type: i3__namespace.λ2, selector: "sky-filter-inline" }, { type: i3__namespace.λ3, selector: "sky-filter-inline-item" }, { type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFilterInlineComponent, decorators: [{
+    SkyListFilterInlineComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListFilterInlineComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0__namespace, 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__namespace.λ2, selector: "sky-filter-inline" }, { type: i3__namespace.λ3, selector: "sky-filter-inline-item" }, { type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFilterInlineComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-filter-inline',
-                        templateUrl: './list-filter-inline.component.html'
+                        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",
                     }]
             }], ctorParameters: function () { return [{ type: ListStateDispatcher }, { type: ListState }]; }, propDecorators: { filters: [{
                     type: i0.ContentChildren,
@@ -2071,21 +2070,17 @@
         }
         return SkyListFiltersModule;
     }());
-    SkyListFiltersModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFiltersModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListFiltersModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFiltersModule, declarations: [SkyListFilterButtonComponent,
+    SkyListFiltersModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFiltersModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListFiltersModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFiltersModule, declarations: [SkyListFilterButtonComponent,
             SkyListFilterSummaryComponent,
             SkyListFilterInlineItemComponent,
             SkyListFilterInlineComponent,
-            SkyListFilterInlineItemRendererComponent], imports: [i4.CommonModule,
-            i3.SkyFilterModule], exports: [SkyListFilterButtonComponent,
+            SkyListFilterInlineItemRendererComponent], imports: [i4.CommonModule, i3.SkyFilterModule], exports: [SkyListFilterButtonComponent,
             SkyListFilterSummaryComponent,
             SkyListFilterInlineItemComponent,
             SkyListFilterInlineComponent] });
-    SkyListFiltersModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFiltersModule, imports: [[
-                i4.CommonModule,
-                i3.SkyFilterModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListFiltersModule, decorators: [{
+    SkyListFiltersModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFiltersModule, imports: [[i4.CommonModule, i3.SkyFilterModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListFiltersModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -2093,18 +2088,15 @@
                             SkyListFilterSummaryComponent,
                             SkyListFilterInlineItemComponent,
                             SkyListFilterInlineComponent,
-                            SkyListFilterInlineItemRendererComponent
-                        ],
-                        imports: [
-                            i4.CommonModule,
-                            i3.SkyFilterModule
+                            SkyListFilterInlineItemRendererComponent,
                         ],
+                        imports: [i4.CommonModule, i3.SkyFilterModule],
                         exports: [
                             SkyListFilterButtonComponent,
                             SkyListFilterSummaryComponent,
                             SkyListFilterInlineItemComponent,
-                            SkyListFilterInlineComponent
-                        ]
+                            SkyListFilterInlineComponent,
+                        ],
                     }]
             }] });
 
@@ -2152,8 +2144,7 @@
             this.currentPageNumber = this.state.pipe(operators.map(function (s) { return s.paging.pageNumber; }));
             this.maxDisplayedPages = this.state.pipe(operators.map(function (s) { return s.paging.maxDisplayedPages; }));
             this.itemsPerPage = this.state.pipe(operators.map(function (s) { return s.paging.itemsPerPage; }));
-            this.itemCount = this.state
-                .pipe(operators.map(function (s) {
+            this.itemCount = this.state.pipe(operators.map(function (s) {
                 return s.items;
             }), operators.scan(function (previousValue, newValue) {
                 if (previousValue.lastUpdate > newValue.lastUpdate) {
@@ -2180,19 +2171,19 @@
         };
         return SkyListPagingComponent;
     }(ListPagingComponent));
-    SkyListPagingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListPagingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListPagingComponent, selector: "sky-list-paging", inputs: { pageSize: "pageSize", maxPages: "maxPages", pageNumber: "pageNumber" }, providers: [
-            { provide: ListPagingComponent, useExisting: listPagingComponentRef }
-        ], usesInheritance: true, ngImport: i0__namespace, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n  >\n</sky-paging>\n", components: [{ type: i3__namespace.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingComponent, decorators: [{
+    SkyListPagingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListPagingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListPagingComponent, selector: "sky-list-paging", inputs: { pageSize: "pageSize", maxPages: "maxPages", pageNumber: "pageNumber" }, providers: [
+            { provide: ListPagingComponent, useExisting: listPagingComponentRef },
+        ], usesInheritance: true, ngImport: i0__namespace, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n>\n</sky-paging>\n", components: [{ type: i3__namespace.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-paging',
-                        templateUrl: './list-paging.component.html',
+                        template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n>\n</sky-paging>\n",
                         providers: [
-                            { provide: ListPagingComponent, useExisting: listPagingComponentRef }
+                            { provide: ListPagingComponent, useExisting: listPagingComponentRef },
                         ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { pageSize: [{
                     type: i0.Input
@@ -2207,26 +2198,15 @@
         }
         return SkyListPagingModule;
     }());
-    SkyListPagingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListPagingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingModule, declarations: [SkyListPagingComponent], imports: [i4.CommonModule,
-            i3.SkyPagingModule], exports: [SkyListPagingComponent] });
-    SkyListPagingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingModule, imports: [[
-                i4.CommonModule,
-                i3.SkyPagingModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListPagingModule, decorators: [{
+    SkyListPagingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListPagingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingModule, declarations: [SkyListPagingComponent], imports: [i4.CommonModule, i3.SkyPagingModule], exports: [SkyListPagingComponent] });
+    SkyListPagingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingModule, imports: [[i4.CommonModule, i3.SkyPagingModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListPagingModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyListPagingComponent
-                        ],
-                        imports: [
-                            i4.CommonModule,
-                            i3.SkyPagingModule
-                        ],
-                        exports: [
-                            SkyListPagingComponent
-                        ]
+                        declarations: [SkyListPagingComponent],
+                        imports: [i4.CommonModule, i3.SkyPagingModule],
+                        exports: [SkyListPagingComponent],
                     }]
             }] });
 
@@ -2237,7 +2217,15 @@
      * To update this file, simply rerun the command.
      */
     var RESOURCES = {
-        'EN-US': { "skyux_list_show_secondary_actions_button": { "message": "More" }, "skyux_list_multiselect_clear_all": { "message": "Clear all" }, "skyux_list_mutliselect_select_all": { "message": "Select all" }, "skyux_list_mutliselect_show_selected": { "message": "Only show selected items" }, "skyux_list_view_switcher_dropdown_title": { "message": "Select view" } },
+        'EN-US': {
+            skyux_list_show_secondary_actions_button: { message: 'More' },
+            skyux_list_multiselect_clear_all: { message: 'Clear all' },
+            skyux_list_mutliselect_select_all: { message: 'Select all' },
+            skyux_list_mutliselect_show_selected: {
+                message: 'Only show selected items',
+            },
+            skyux_list_view_switcher_dropdown_title: { message: 'Select view' },
+        },
     };
     var SkyListBuilderResourcesProvider = /** @class */ (function () {
         function SkyListBuilderResourcesProvider() {
@@ -2255,22 +2243,26 @@
         }
         return SkyListBuilderResourcesModule;
     }());
-    SkyListBuilderResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListBuilderResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, exports: [i5.SkyI18nModule] });
-    SkyListBuilderResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, providers: [{
+    SkyListBuilderResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListBuilderResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, exports: [i5.SkyI18nModule] });
+    SkyListBuilderResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, providers: [
+            {
                 provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyListBuilderResourcesProvider,
-                multi: true
-            }], imports: [i5.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, decorators: [{
+                multi: true,
+            },
+        ], imports: [i5.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListBuilderResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i5.SkyI18nModule],
-                        providers: [{
+                        providers: [
+                            {
                                 provide: i5.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyListBuilderResourcesProvider,
-                                multi: true
-                            }]
+                                multi: true,
+                            },
+                        ],
                     }]
             }] });
 
@@ -2302,9 +2294,9 @@
         };
         return SkyListSecondaryActionsService;
     }());
-    SkyListSecondaryActionsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyListSecondaryActionsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsService, decorators: [{
+    SkyListSecondaryActionsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyListSecondaryActionsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsService, decorators: [{
                 type: i0.Injectable
             }] });
 
@@ -2326,7 +2318,7 @@
             this.actionService.actionsStream
                 .pipe(operators.takeUntil(this.ngUnsubscribe), operators.distinctUntilChanged())
                 .subscribe(function (actions) {
-                var hasSecondaryActions = (actions.length > 0);
+                var hasSecondaryActions = actions.length > 0;
                 _this.dropdownHidden = !hasSecondaryActions;
                 _this.actions = actions;
                 _this.changeDetector.detectChanges();
@@ -2338,15 +2330,15 @@
         };
         return SkyListSecondaryActionsHostComponent;
     }());
-    SkyListSecondaryActionsHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListSecondaryActionsHostComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host", ngImport: i0__namespace, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon\n        icon=\"ellipsis-h\"\n      >\n      </sky-icon>\n      <span\n        class=\"sky-list-secondary-actions-btn-text\"\n      >\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\">\n        </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content>\n</ng-content>\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i2__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2__namespace.λ2, selector: "sky-dropdown-button" }, { type: i3__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i2__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsHostComponent, decorators: [{
+    SkyListSecondaryActionsHostComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListSecondaryActionsHostComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host", ngImport: i0__namespace, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon icon=\"ellipsis-h\"> </sky-icon>\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content> </ng-content>\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i2__namespace.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2__namespace.λ2, selector: "sky-dropdown-button" }, { type: i3__namespace$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i2__namespace.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsHostComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-secondary-actions-host',
-                        templateUrl: './list-secondary-actions-host.component.html',
-                        styleUrls: ['./list-secondary-actions-host.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon icon=\"ellipsis-h\"> </sky-icon>\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content> </ng-content>\n",
+                        styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyListSecondaryActionsService }]; } });
 
@@ -2365,33 +2357,27 @@
                 id: 'secondary-actions',
                 template: this.secondaryActionsTemplate,
                 location: 'center',
-                index: this.secondaryActionsItemToolbarIndex
+                index: this.secondaryActionsItemToolbarIndex,
             });
-            this.dispatcher.toolbarAddItems([
-                secondaryActionItem
-            ]);
+            this.dispatcher.toolbarAddItems([secondaryActionItem]);
         };
         return SkyListSecondaryActionsComponent;
     }());
-    SkyListSecondaryActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsComponent, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListSecondaryActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListSecondaryActionsComponent, selector: "sky-list-secondary-actions", providers: [
-            SkyListSecondaryActionsService
-        ], viewQueries: [{ propertyName: "secondaryActionsTemplate", first: true, predicate: ["secondaryActions"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n", components: [{ type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsComponent, decorators: [{
+    SkyListSecondaryActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsComponent, deps: [{ token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListSecondaryActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListSecondaryActionsComponent, selector: "sky-list-secondary-actions", providers: [SkyListSecondaryActionsService], viewQueries: [{ propertyName: "secondaryActionsTemplate", first: true, predicate: ["secondaryActions"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n", components: [{ type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-secondary-actions',
-                        templateUrl: './list-secondary-actions.component.html',
-                        providers: [
-                            SkyListSecondaryActionsService
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n",
+                        providers: [SkyListSecondaryActionsService],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { secondaryActionsTemplate: [{
                     type: i0.ViewChild,
                     args: ['secondaryActions', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -2404,24 +2390,24 @@
         }
         SkyListSecondaryActionComponent.prototype.ngAfterContentInit = function () {
             this.actionService.addSecondaryAction({
-                template: this.templateRef
+                template: this.templateRef,
             });
         };
         return SkyListSecondaryActionComponent;
     }());
-    SkyListSecondaryActionComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", 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.8", 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.8", ngImport: i0__namespace, type: SkyListSecondaryActionComponent, decorators: [{
+    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',
-                        templateUrl: './list-secondary-action.component.html'
+                        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
+                            static: true,
                         }]
                 }] } });
 
@@ -2430,41 +2416,37 @@
         }
         return SkyListSecondaryActionsModule;
     }());
-    SkyListSecondaryActionsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListSecondaryActionsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, declarations: [SkyListSecondaryActionsComponent,
+    SkyListSecondaryActionsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListSecondaryActionsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, declarations: [SkyListSecondaryActionsComponent,
             SkyListSecondaryActionsHostComponent,
             SkyListSecondaryActionComponent], imports: [i4.CommonModule,
             i2.SkyDropdownModule,
             i5.SkyI18nModule,
             i3$1.SkyIconModule,
-            SkyListBuilderResourcesModule], exports: [SkyListSecondaryActionsComponent,
-            SkyListSecondaryActionComponent] });
-    SkyListSecondaryActionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, imports: [[
+            SkyListBuilderResourcesModule], exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent] });
+    SkyListSecondaryActionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, imports: [[
                 i4.CommonModule,
                 i2.SkyDropdownModule,
                 i5.SkyI18nModule,
                 i3$1.SkyIconModule,
-                SkyListBuilderResourcesModule
+                SkyListBuilderResourcesModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListSecondaryActionsModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
                             SkyListSecondaryActionsComponent,
                             SkyListSecondaryActionsHostComponent,
-                            SkyListSecondaryActionComponent
+                            SkyListSecondaryActionComponent,
                         ],
                         imports: [
                             i4.CommonModule,
                             i2.SkyDropdownModule,
                             i5.SkyI18nModule,
                             i3$1.SkyIconModule,
-                            SkyListBuilderResourcesModule
+                            SkyListBuilderResourcesModule,
                         ],
-                        exports: [
-                            SkyListSecondaryActionsComponent,
-                            SkyListSecondaryActionComponent
-                        ]
+                        exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
                     }]
             }] });
 
@@ -2484,9 +2466,9 @@
              */
             this.index = -1;
             /**
-             * Specifies the toolbar location of the item. The valid options are `left`,
-             * `center`, and `right`.
-             * @default 'left'
+             * Specifies the toolbar location of the item. The valid options are `"left"`,
+             * `"center"`, and `"right"`.
+             * @default "left"
              */
             this.location = 'left';
         }
@@ -2499,13 +2481,13 @@
         });
         return SkyListToolbarItemComponent;
     }());
-    SkyListToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: SkyListToolbarItemComponent, decorators: [{
+    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>'
+                        template: '<ng-content></ng-content>',
                     }]
             }], propDecorators: { id: [{
                     type: i0.Input
@@ -2526,13 +2508,13 @@
         }
         return SkyListToolbarSortComponent;
     }());
-    SkyListToolbarSortComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarSortComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarSortComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: SkyListToolbarSortComponent, decorators: [{
+    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: ''
+                        template: '',
                     }]
             }], propDecorators: { label: [{
                     type: i0.Input
@@ -2555,14 +2537,14 @@
         }
         return SkyListToolbarViewActionsComponent;
     }());
-    SkyListToolbarViewActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarViewActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: SkyListToolbarViewActionsComponent, decorators: [{
+    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',
-                        templateUrl: './list-toolbar-view-actions.component.html',
-                        styleUrls: ['./list-toolbar-view-actions.component.scss']
+                        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"],
                     }]
             }] });
 
@@ -2598,9 +2580,9 @@
         }
         return ListToolbarStateDispatcher;
     }(listBuilderCommon.StateDispatcher));
-    ListToolbarStateDispatcher.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListToolbarStateDispatcher, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    ListToolbarStateDispatcher.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListToolbarStateDispatcher });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListToolbarStateDispatcher, decorators: [{
+    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
             }] });
     /**
@@ -2637,9 +2619,7 @@
         /* istanbul ignore next */
         function ListToolbarConfigOrchestrator() {
             var _this = _super.call(this) || this;
-            _this
-                .register(ListToolbarConfigSetSearchEnabledAction, _this.setSearchEnabled)
-                .register(ListToolbarConfigSetSortSelectorEnabledAction, _this.setSortSelectorEnabled);
+            _this.register(ListToolbarConfigSetSearchEnabledAction, _this.setSearchEnabled).register(ListToolbarConfigSetSortSelectorEnabledAction, _this.setSortSelectorEnabled);
             return _this;
         }
         ListToolbarConfigOrchestrator.prototype.setSearchEnabled = function (state, action) {
@@ -2668,16 +2648,14 @@
         __extends(ListToolbarState, _super);
         function ListToolbarState(initialState, dispatcher) {
             var _this = _super.call(this, initialState, dispatcher) || this;
-            _this
-                .register('config', ListToolbarConfigOrchestrator)
-                .begin();
+            _this.register('config', ListToolbarConfigOrchestrator).begin();
             return _this;
         }
         return ListToolbarState;
     }(listBuilderCommon.StateNode));
-    ListToolbarState.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", 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.8", ngImport: i0__namespace, type: ListToolbarState });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: ListToolbarState, decorators: [{
+    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 }]; } });
 
@@ -2694,13 +2672,13 @@
         };
         return SkyListToolbarItemRendererComponent;
     }());
-    SkyListToolbarItemRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarItemRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarItemRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: { template: "template" }, 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.8", ngImport: i0__namespace, type: SkyListToolbarItemRendererComponent, decorators: [{
+    SkyListToolbarItemRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarItemRendererComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarItemRendererComponent.ɵcmp = i0__namespace.ɵɵ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: 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: SkyListToolbarItemRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-toolbar-item-renderer',
-                        template: '<ng-template #container></ng-template>'
+                        template: '<ng-template #container></ng-template>',
                     }]
             }], propDecorators: { template: [{
                     type: i0.Input
@@ -2708,7 +2686,7 @@
                     type: i0.ViewChild,
                     args: ['container', {
                             read: i0.ViewContainerRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -2742,7 +2720,7 @@
                 .subscribe(function (filters) {
                 var showSelectedFilter = filters.find(function (filter) { return filter.name === 'show-selected'; });
                 if (showSelectedFilter) {
-                    _this.showOnlySelected = (showSelectedFilter.value === 'true');
+                    _this.showOnlySelected = showSelectedFilter.value === 'true';
                 }
             });
         };
@@ -2789,9 +2767,9 @@
             // If "show selected" is checked and paging is enabled, go to page one.
             /* istanbul ignore else */
             if (isSelected) {
-                this.state.pipe(operators.take(1))
-                    .subscribe(function (currentState) {
-                    if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                this.state.pipe(operators.take(1)).subscribe(function (currentState) {
+                    if (currentState.paging.pageNumber &&
+                        currentState.paging.pageNumber !== 1) {
                         _this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                     }
                 });
@@ -2809,7 +2787,7 @@
                         return _this.selectedIdMap.get(model.id);
                     }
                 },
-                defaultValue: false.toString()
+                defaultValue: false.toString(),
             });
         };
         SkyListMultiselectToolbarComponent.prototype.showSelectedValuesEqual = function (prev, next) {
@@ -2820,7 +2798,8 @@
                 return true;
             }
             // Only one undefined.
-            if ((prevShowSelectedFilter && !nextShowSelectedFilter) || (!prevShowSelectedFilter && nextShowSelectedFilter)) {
+            if ((prevShowSelectedFilter && !nextShowSelectedFilter) ||
+                (!prevShowSelectedFilter && nextShowSelectedFilter)) {
                 return false;
             }
             // Defined, but with different "value".
@@ -2842,14 +2821,14 @@
         };
         return SkyListMultiselectToolbarComponent;
     }());
-    SkyListMultiselectToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListMultiselectToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0__namespace, template: "<sky-toolbar\n  class=\"sky-list-multiselect-toolbar\"\n>\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer\n        [template]=\"selectAllTemplate\"\n      >\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer\n        [template]=\"clearSelectionsTemplate\"\n      >\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll();$event.preventDefault();\"\n  >\n    {{ 'skyux_list_mutliselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections();$event.preventDefault();\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_mutliselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-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__namespace$2.λ37, selector: "sky-toolbar" }, { type: i3__namespace$2.λ38, selector: "sky-toolbar-section" }, { type: i3__namespace$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3__namespace$2.λ40, selector: "sky-toolbar-view-actions" }, { type: i5__namespace$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5__namespace$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListMultiselectToolbarComponent, decorators: [{
+    SkyListMultiselectToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListMultiselectToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0__namespace, 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__namespace$2.λ37, selector: "sky-toolbar" }, { type: i3__namespace$2.λ38, selector: "sky-toolbar-section" }, { type: i3__namespace$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3__namespace$2.λ40, selector: "sky-toolbar-view-actions" }, { type: i5__namespace$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5__namespace$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5__namespace.SkyLibResourcesPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListMultiselectToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-multiselect-toolbar',
-                        templateUrl: './list-multiselect-toolbar.component.html',
-                        styleUrls: ['./list-multiselect-toolbar.component.scss']
+                        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"],
                     }]
             }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { showOnlySelected: [{
                     type: i0.Input
@@ -2870,7 +2849,7 @@
              * Display the search bar in the standard position or in a separate section.
              * To highlight the search bar in a section above all other toolbar items,
              * set this property to `search`.
-             * @default 'standard'
+             * @default "standard"
              */
             this.toolbarType = 'standard';
             this.isToolbarDisabled = false;
@@ -2912,7 +2891,9 @@
         });
         Object.defineProperty(SkyListToolbarComponent.prototype, "isFilterBarDisplayed", {
             get: function () {
-                return !this.isToolbarDisabled && this.hasInlineFilters && this.inlineFilterBarExpanded;
+                return (!this.isToolbarDisabled &&
+                    this.hasInlineFilters &&
+                    this.inlineFilterBarExpanded);
             },
             enumerable: false,
             configurable: true
@@ -2951,23 +2932,20 @@
                             id: 'sort-selector',
                             template: _this.sortSelectorTemplate,
                             location: 'left',
-                            index: _this.sortSelectorItemToolbarIndex
-                        })
+                            index: _this.sortSelectorItemToolbarIndex,
+                        }),
                     ]);
                 }
                 else if (currentSort.length < 1 && _this.hasSortSelectors) {
                     _this.hasSortSelectors = false;
-                    _this.dispatcher.toolbarRemoveItems([
-                        'sort-selector'
-                    ]);
+                    _this.dispatcher.toolbarRemoveItems(['sort-selector']);
                 }
             });
             this.searchTextInput = this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.search.searchText; }), operators.distinctUntilChanged());
             this.view = this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.views.active; }), operators.distinctUntilChanged());
             this.watchTemplates();
             this.type = this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (state) { return state.toolbar.type; }), operators.distinctUntilChanged());
-            this.type.pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (toolbarType) {
+            this.type.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (toolbarType) {
                 if (toolbarType === 'search') {
                     _this.dispatcher.toolbarRemoveItems(['search']);
                 }
@@ -2976,28 +2954,28 @@
                         new ListToolbarItemModel({
                             id: 'search',
                             template: _this.searchTemplate,
-                            location: 'right'
-                        })
+                            location: 'right',
+                        }),
                     ]);
                 }
             });
             this.isSearchEnabled = this.toolbarState.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.config; }), operators.distinctUntilChanged(), operators.map(function (c) { return c.searchEnabled; }));
-            this.state.pipe(operators.map(function (s) { return s.toolbar; }), operators.takeUntil(this.ngUnsubscribe), operators.distinctUntilChanged(), operators.map(function (c) { return c.disabled; }))
-                .subscribe(function (isDisabled) { return _this.isToolbarDisabled = isDisabled; });
+            this.state
+                .pipe(operators.map(function (s) { return s.toolbar; }), operators.takeUntil(this.ngUnsubscribe), operators.distinctUntilChanged(), operators.map(function (c) { return c.disabled; }))
+                .subscribe(function (isDisabled) { return (_this.isToolbarDisabled = isDisabled); });
             this.isSortSelectorEnabled = this.toolbarState.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.config; }), operators.distinctUntilChanged(), operators.map(function (c) { return c.sortSelectorEnabled; }));
             this.isMultiselectEnabled = this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.toolbar; }), operators.distinctUntilChanged(), operators.map(function (t) { return t.showMultiselectToolbar; }));
             this.hasAppliedFilters = this.state.pipe(operators.takeUntil(this.ngUnsubscribe), operators.map(function (s) { return s.filters; }), operators.distinctUntilChanged(), operators.map(function (filters) {
                 var activeFilters = filters.filter(function (f) {
-                    return f.value !== '' &&
+                    return (f.value !== '' &&
                         f.value !== undefined &&
                         f.value !== false &&
-                        f.value !== f.defaultValue;
+                        f.value !== f.defaultValue);
                 });
                 return activeFilters.length > 0;
             }));
-            this.state.pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (current) {
-                _this.hasAdditionalToolbarSection = (current.toolbar.items.length > 0);
+            this.state.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (current) {
+                _this.hasAdditionalToolbarSection = current.toolbar.items.length > 0;
                 _this.changeDetector.detectChanges();
             });
         };
@@ -3005,18 +2983,15 @@
             var _this = this;
             // Inject custom toolbar items.
             this.toolbarItems.forEach(function (toolbarItem) {
-                _this.dispatcher.toolbarAddItems([
-                    new ListToolbarItemModel(toolbarItem)
-                ]);
+                _this.dispatcher.toolbarAddItems([new ListToolbarItemModel(toolbarItem)]);
                 _this.customItemIds.push(toolbarItem.id);
             });
-            this.toolbarItems.changes.pipe(operators.takeUntil(this.ngUnsubscribe))
+            this.toolbarItems.changes
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (newItems) {
                 newItems.forEach(function (item) {
                     if (_this.customItemIds.indexOf(item.id) < 0) {
-                        _this.dispatcher.toolbarAddItems([
-                            new ListToolbarItemModel(item)
-                        ]);
+                        _this.dispatcher.toolbarAddItems([new ListToolbarItemModel(item)]);
                         _this.customItemIds.push(item.id);
                     }
                 });
@@ -3034,23 +3009,23 @@
                 fieldSelector: sort.field,
                 fieldType: sort.type,
                 global: true,
-                descending: sort.descending
+                descending: sort.descending,
             }); });
             this.dispatcher.sortSetGlobal(sortModels);
             // Add inline filters.
-            this.showFilterSummary = (this.filterSummary.length > 0);
-            this.hasInlineFilters = (this.inlineFilter.length > 0);
+            this.showFilterSummary = this.filterSummary.length > 0;
+            this.hasInlineFilters = this.inlineFilter.length > 0;
             if (this.hasInlineFilters) {
                 this.dispatcher.toolbarAddItems([
                     new ListToolbarItemModel({
                         template: this.inlineFilterButtonTemplate,
                         location: 'left',
-                        index: this.inlineFiltersItemToolbarIndex
-                    })
+                        index: this.inlineFiltersItemToolbarIndex,
+                    }),
                 ]);
             }
             // Check for view actions
-            this.hasViewActions = (this.viewActions.length > 0);
+            this.hasViewActions = this.viewActions.length > 0;
         };
         SkyListToolbarComponent.prototype.ngOnDestroy = function () {
             this.searchApplied.complete();
@@ -3060,10 +3035,13 @@
         SkyListToolbarComponent.prototype.setSort = function (sort) {
             var _this = this;
             this.state.pipe(operators.take(1)).subscribe(function (currentState) {
-                if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
                     _this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                 }
-                _this.dispatcher.sortSetFieldSelectors([{ fieldSelector: sort.fieldSelector, descending: sort.descending }]);
+                _this.dispatcher.sortSetFieldSelectors([
+                    { fieldSelector: sort.fieldSelector, descending: sort.descending },
+                ]);
             });
         };
         SkyListToolbarComponent.prototype.inlineFilterButtonClick = function () {
@@ -3074,7 +3052,8 @@
             this.searchApplied.next(searchText);
             if (this.inMemorySearchEnabled) {
                 this.state.pipe(operators.take(1)).subscribe(function (currentState) {
-                    if (currentState.paging.pageNumber && currentState.paging.pageNumber !== 1) {
+                    if (currentState.paging.pageNumber &&
+                        currentState.paging.pageNumber !== 1) {
                         _this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
                     }
                     _this.dispatcher.searchSetText(searchText);
@@ -3082,16 +3061,17 @@
             }
         };
         SkyListToolbarComponent.prototype.itemIsInView = function (itemView, activeView) {
-            return (itemView === undefined || itemView === activeView);
+            return itemView === undefined || itemView === activeView;
         };
         SkyListToolbarComponent.prototype.getSortSelectors = function () {
             return rxjs.combineLatest(this.state.pipe(operators.map(function (s) { return s.sort.available; }), operators.distinctUntilChanged()), this.state.pipe(operators.map(function (s) { return s.sort.global; }), operators.distinctUntilChanged()), this.state.pipe(operators.map(function (s) { return s.sort.fieldSelectors; }), operators.distinctUntilChanged()), function (available, global, fieldSelectors) {
                 // Get sorts that are in the global that are not in the available
-                var sorts = global.filter(function (g) { return available.filter(function (a) { return a.fieldSelector === g.fieldSelector; }).length === 0; });
+                var sorts = global.filter(function (g) { return available.filter(function (a) { return a.fieldSelector === g.fieldSelector; })
+                    .length === 0; });
                 var resultSortSelectors = __spreadArray(__spreadArray([], __read(sorts)), __read(available)).map(function (sortLabels) {
                     var fs = fieldSelectors.filter(function (f) {
-                        return f.fieldSelector === sortLabels.fieldSelector
-                            && f.descending === sortLabels.descending;
+                        return (f.fieldSelector === sortLabels.fieldSelector &&
+                            f.descending === sortLabels.descending);
                     });
                     var selected = false;
                     if (fs.length > 0) {
@@ -3099,7 +3079,7 @@
                     }
                     return {
                         sort: sortLabels,
-                        selected: selected
+                        selected: selected,
                     };
                 });
                 return resultSortSelectors;
@@ -3117,7 +3097,8 @@
                     templates[item.location].push(item);
                 });
                 return templates;
-            }).pipe(operators.takeUntil(this.ngUnsubscribe))
+            })
+                .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (value) {
                 _this.leftTemplates = value.left;
                 _this.centerTemplates = value.center;
@@ -3127,24 +3108,24 @@
         };
         return SkyListToolbarComponent;
     }());
-    SkyListToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ListState }, { token: ListStateDispatcher }, { token: ListToolbarState }, { token: ListToolbarStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: { inMemorySearchEnabled: "inMemorySearchEnabled", placeholder: "placeholder", searchEnabled: "searchEnabled", sortSelectorEnabled: "sortSelectorEnabled", toolbarType: "toolbarType", searchText: "searchText" }, providers: [
+    SkyListToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ListState }, { token: ListStateDispatcher }, { token: ListToolbarState }, { token: ListToolbarStateDispatcher }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyListToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: { inMemorySearchEnabled: "inMemorySearchEnabled", placeholder: "placeholder", searchEnabled: "searchEnabled", sortSelectorEnabled: "sortSelectorEnabled", toolbarType: "toolbarType", searchText: "searchText" }, providers: [
             ListToolbarState,
             ListToolbarStateDispatcher,
-            ListToolbarStateModel
-        ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: i8.SkySearchComponent, descendants: true, read: i8.SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content\n          select=\"sky-list-toolbar-view-actions\"\n        >\n        </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\">\n      <ng-content select=\"sky-list-filter-summary\">\n      </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div *ngIf=\"(type | async) === 'search' &&\n    ((isSearchEnabled | async) || hasAdditionalToolbarSection)\"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"(isSearchEnabled | async)\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content\n            select=\"sky-list-toolbar-view-actions\"\n          >\n          </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\">\n    </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\"\n    class=\"sky-list-toolbar-search-wrapper\"\n  >\n    <sky-search\n      [disabled]=\"isToolbarDisabled\"\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [placeholderText]=\"placeholder\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n    >\n    </sky-search>\n    <ng-content\n      select=\"sky-list-toolbar-search-actions\"\n    ></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div *ngIf=\"(isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  >\n  </sky-filter-button>\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], components: [{ type: i3__namespace$2.λ37, selector: "sky-toolbar" }, { type: i3__namespace$2.λ38, selector: "sky-toolbar-section" }, { type: i3__namespace$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3__namespace$2.λ40, selector: "sky-toolbar-view-actions" }, { type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { type: i8__namespace.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3__namespace.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i3__namespace.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i3__namespace.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarComponent, decorators: [{
+            ListToolbarStateModel,
+        ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: i8.SkySearchComponent, descendants: true, read: i8.SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section\n      *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n    >\n      <ng-content select=\"sky-list-filter-summary\"> </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div\n    *ngIf=\"\n      (type | async) === 'search' &&\n      ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n    \"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\"> </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n    <sky-search\n      [disabled]=\"isToolbarDisabled\"\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [placeholderText]=\"placeholder\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n    >\n    </sky-search>\n    <ng-content select=\"sky-list-toolbar-search-actions\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    *ngIf=\"\n      (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n    \"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  >\n  </sky-filter-button>\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], components: [{ type: i3__namespace$2.λ37, selector: "sky-toolbar" }, { type: i3__namespace$2.λ38, selector: "sky-toolbar-section" }, { type: i3__namespace$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3__namespace$2.λ40, selector: "sky-toolbar-view-actions" }, { type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { type: i8__namespace.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3__namespace.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i3__namespace.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i3__namespace.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-list-toolbar',
-                        templateUrl: './list-toolbar.component.html',
-                        styleUrls: ['./list-toolbar.component.scss'],
+                        template: "<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section\n      *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n    >\n      <ng-content select=\"sky-list-filter-summary\"> </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div\n    *ngIf=\"\n      (type | async) === 'search' &&\n      ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n    \"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\"> </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n    <sky-search\n      [disabled]=\"isToolbarDisabled\"\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [placeholderText]=\"placeholder\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n    >\n    </sky-search>\n    <ng-content select=\"sky-list-toolbar-search-actions\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    *ngIf=\"\n      (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n    \"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  >\n  </sky-filter-button>\n</ng-template>\n",
+                        styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"],
                         providers: [
                             ListToolbarState,
                             ListToolbarStateDispatcher,
-                            ListToolbarStateModel
+                            ListToolbarStateModel,
                         ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }]; }, propDecorators: { inMemorySearchEnabled: [{
                     type: i0.Input
@@ -3156,7 +3137,7 @@
                     type: i0.ViewChild,
                     args: [i8.SkySearchComponent, {
                             read: i8.SkySearchComponent,
-                            static: false
+                            static: false,
                         }]
                 }], sortSelectorEnabled: [{
                     type: i0.Input
@@ -3183,19 +3164,19 @@
                     type: i0.ViewChild,
                     args: ['search', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }], sortSelectorTemplate: [{
                     type: i0.ViewChild,
                     args: ['sortSelector', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }], inlineFilterButtonTemplate: [{
                     type: i0.ViewChild,
                     args: ['inlineFilterButton', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -3207,15 +3188,15 @@
         }
         return SkyListToolbarSearchActionsComponent;
     }());
-    SkyListToolbarSearchActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyListToolbarSearchActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.8", type: SkyListToolbarSearchActionsComponent, selector: "sky-list-toolbar-search-actions", ngImport: i0__namespace, template: "<div\n  class=\"sky-list-toolbar-search-actions\"\n>\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.8", ngImport: i0__namespace, type: SkyListToolbarSearchActionsComponent, decorators: [{
+    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',
-                        templateUrl: './list-toolbar-search-actions.component.html',
-                        styleUrls: ['./list-toolbar-search-actions.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        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,
                     }]
             }] });
 
@@ -3224,8 +3205,8 @@
         }
         return SkyListToolbarModule;
     }());
-    SkyListToolbarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyListToolbarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarModule, declarations: [SkyListToolbarComponent,
+    SkyListToolbarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyListToolbarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarModule, declarations: [SkyListToolbarComponent,
             SkyListToolbarItemComponent,
             SkyListToolbarItemRendererComponent,
             SkyListMultiselectToolbarComponent,
@@ -3245,7 +3226,7 @@
             SkyListToolbarSearchActionsComponent,
             SkyListToolbarSortComponent,
             SkyListToolbarViewActionsComponent] });
-    SkyListToolbarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarModule, imports: [[
+    SkyListToolbarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarModule, imports: [[
                 i4.CommonModule,
                 i5$1.SkyCheckboxModule,
                 i5.SkyI18nModule,
@@ -3255,9 +3236,9 @@
                 i3.SkyFilterModule,
                 SkyListFiltersModule,
                 i3$1.SkyIconModule,
-                SkyListBuilderResourcesModule
+                SkyListBuilderResourcesModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.8", ngImport: i0__namespace, type: SkyListToolbarModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: SkyListToolbarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -3267,7 +3248,7 @@
                             SkyListMultiselectToolbarComponent,
                             SkyListToolbarSearchActionsComponent,
                             SkyListToolbarSortComponent,
-                            SkyListToolbarViewActionsComponent
+                            SkyListToolbarViewActionsComponent,
                         ],
                         imports: [
                             i4.CommonModule,
@@ -3279,15 +3260,15 @@
                             i3.SkyFilterModule,
                             SkyListFiltersModule,
                             i3$1.SkyIconModule,
-                            SkyListBuilderResourcesModule
+                            SkyListBuilderResourcesModule,
                         ],
                         exports: [
                             SkyListToolbarComponent,
                             SkyListToolbarItemComponent,
                             SkyListToolbarSearchActionsComponent,
                             SkyListToolbarSortComponent,
-                            SkyListToolbarViewActionsComponent
-                        ]
+                            SkyListToolbarViewActionsComponent,
+                        ],
                     }]
             }] });
 
@@ -3357,19 +3338,19 @@
     exports.SkyListSecondaryActionsModule = SkyListSecondaryActionsModule;
     exports.SkyListToolbarComponent = SkyListToolbarComponent;
     exports.SkyListToolbarModule = SkyListToolbarModule;
-    exports.λ1 = SkyListFilterButtonComponent;
-    exports.λ10 = SkyListToolbarViewActionsComponent;
-    exports.λ11 = SkyListToolbarSearchActionsComponent;
-    exports.λ2 = SkyListFilterSummaryComponent;
-    exports.λ3 = SkyListFilterInlineItemComponent;
-    exports.λ4 = SkyListFilterInlineComponent;
-    exports.λ5 = SkyListPagingComponent;
-    exports.λ6 = SkyListSecondaryActionComponent;
-    exports.λ7 = SkyListSecondaryActionsComponent;
-    exports.λ8 = SkyListToolbarItemComponent;
-    exports.λ9 = SkyListToolbarSortComponent;
+    exports["λ1"] = SkyListFilterButtonComponent;
+    exports["λ10"] = SkyListToolbarViewActionsComponent;
+    exports["λ11"] = SkyListToolbarSearchActionsComponent;
+    exports["λ2"] = SkyListFilterSummaryComponent;
+    exports["λ3"] = SkyListFilterInlineItemComponent;
+    exports["λ4"] = SkyListFilterInlineComponent;
+    exports["λ5"] = SkyListPagingComponent;
+    exports["λ6"] = SkyListSecondaryActionComponent;
+    exports["λ7"] = SkyListSecondaryActionsComponent;
+    exports["λ8"] = SkyListToolbarItemComponent;
+    exports["λ9"] = SkyListToolbarSortComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-list-builder.umd.js.map