@skyux/list-builder 5.7.2 → 6.0.0-beta.2

package/fesm2020/skyux-list-builder.mjs

@@ -0,0 +1,2667 @@
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, NgModule, TemplateRef, ViewChild, ViewContainerRef, forwardRef } from '@angular/core';
+import { ListItemModel, getData, compare, StateOrchestrator, StateDispatcher, AsyncList, AsyncItem, StateNode, getValue, isObservable } from '@skyux/list-builder-common';
+import { BehaviorSubject, Observable, Subject, of, combineLatest } from 'rxjs';
+import { map, distinctUntilChanged, take, takeUntil, skip, flatMap, scan } from 'rxjs/operators';
+import * as i3 from '@skyux/lists';
+import { SkyFilterModule, SkyPagingModule, SkySortModule } from '@skyux/lists';
+import * as i5 from '@skyux/i18n';
+import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
+import * as i3$1 from '@skyux/indicators';
+import { SkyIconModule } from '@skyux/indicators';
+import * as i2 from '@skyux/popovers';
+import { SkyDropdownModule } from '@skyux/popovers';
+import * as i5$1 from '@skyux/forms';
+import { SkyCheckboxModule } from '@skyux/forms';
+import * as i3$2 from '@skyux/layout';
+import { SkyToolbarModule } from '@skyux/layout';
+import * as i8 from '@skyux/lookup';
+import { SkySearchComponent, SkySearchModule } from '@skyux/lookup';
+
+class ListDataRequestModel {
+    constructor(data) {
+        /**
+         * Indicates whether to disable the search bar and filter button.
+         * @default false
+         */
+        this.isToolbarDisabled = false;
+        if (data !== undefined) {
+            this.filters = data.filters;
+            this.pageSize = data.pageSize;
+            this.pageNumber = data.pageNumber;
+            this.search = data.search;
+            this.sort = data.sort;
+            this.isToolbarDisabled = data.isToolbarDisabled;
+        }
+    }
+}
+
+class ListDataResponseModel {
+    constructor(data) {
+        if (data !== undefined) {
+            this.count = data.count;
+            this.items = data.items;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListDataProvider {
+    constructor(data) {
+        this.data = data;
+    }
+}
+
+/**
+ * Specifies a function to dynamically manage the data source when users change the text
+ * in the list field. The search function must return an array or a promise of an array.
+ * The `search` property is particularly useful when the data source does not live
+ * in the source code.
+ */
+class ListSearchModel {
+    constructor(data) {
+        /**
+         * Specifies the text to search.
+         * @default ""
+         */
+        this.searchText = '';
+        /**
+         * Specifies an array of functions that returns a `boolean` value of `true` when
+         * the search is successful. This property accepts a function of type
+         * `(data: any, searchText: string) => boolean>.`
+         */
+        this.functions = [];
+        /**
+         * Specifies the columns to search. The columns correspond to `field` values that
+         * you specify with the list component's `data` property.
+         */
+        this.fieldSelectors = [];
+        if (data) {
+            this.searchText = data.searchText;
+            this.functions = [...data.functions];
+            this.fieldSelectors = data.fieldSelectors;
+        }
+    }
+}
+
+let idIndex$3 = 0;
+class SkyListInMemoryDataProvider extends ListDataProvider {
+    constructor(data, searchFunction) {
+        super(data);
+        this.items = new BehaviorSubject([]);
+        this.searchFunction = searchFunction;
+        if (data) {
+            data.subscribe((items) => {
+                this.items.next(items.map((d) => new ListItemModel(d.id || `sky-list-data-in-memory-provider-item-${++idIndex$3}`, d)));
+            });
+        }
+    }
+    count() {
+        return this.items.pipe(map((items) => items.length));
+    }
+    get(request) {
+        return this.filteredItems(request).pipe(map((result) => {
+            if (request.pageNumber && request.pageSize) {
+                const itemStart = (request.pageNumber - 1) * request.pageSize;
+                const pagedResult = result.slice(itemStart, itemStart + request.pageSize);
+                return new ListDataResponseModel({
+                    count: result.length,
+                    items: pagedResult,
+                });
+            }
+            else {
+                return new ListDataResponseModel({
+                    count: result.length,
+                    items: result,
+                });
+            }
+        }));
+    }
+    filteredItems(request) {
+        const showSelectedId = ['show-selected'];
+        return this.items.pipe(map((items) => {
+            let dataChanged = false;
+            let search = request.search;
+            const sort = request.sort;
+            let filters = request.filters;
+            if (this.lastItems === undefined || this.lastItems !== items) {
+                dataChanged = true;
+                this.lastItems = items;
+            }
+            let searchChanged = false;
+            let filtersChanged = false;
+            if (request.isToolbarDisabled) {
+                searchChanged = true;
+                search = new ListSearchModel();
+                filters = filters.filter((f) => showSelectedId.indexOf(f.name) >= 0);
+                filtersChanged = true;
+            }
+            else {
+                if (this.lastSearch === undefined || this.lastSearch !== search) {
+                    searchChanged = true;
+                }
+                if (this.lastFilters === undefined || this.lastFilters !== filters) {
+                    filtersChanged = true;
+                }
+            }
+            this.lastSearch = search;
+            this.lastFilters = filters;
+            let result = items;
+            // Apply filters.
+            if (!dataChanged &&
+                !filtersChanged &&
+                this.lastFilterResults !== undefined) {
+                result = this.lastFilterResults;
+            }
+            else if (filters && filters.length > 0) {
+                result = result.filter((item) => {
+                    for (let i = 0; i < filters.length; i++) {
+                        const filter = filters[i];
+                        if (filter.value === undefined ||
+                            filter.value === '' ||
+                            filter.value === false ||
+                            filter.value === filter.defaultValue) {
+                            continue;
+                        }
+                        if (!filter.filterFunction(item, filter.value)) {
+                            return false;
+                        }
+                    }
+                    return true;
+                });
+                this.lastFilterResults = result;
+            }
+            else {
+                this.lastFilterResults = undefined;
+            }
+            // Apply search.
+            /* istanbul ignore next */
+            if (!dataChanged &&
+                !searchChanged &&
+                this.lastSearchResults !== undefined &&
+                !filtersChanged) {
+                result = this.lastSearchResults;
+            }
+            else if (search &&
+                search.searchText !== undefined &&
+                search.searchText.length > 0) {
+                const searchText = search.searchText.toLowerCase();
+                let searchFunctions;
+                if (this.searchFunction !== undefined) {
+                    searchFunctions = [this.searchFunction];
+                }
+                else {
+                    searchFunctions = search.functions;
+                }
+                result = result.filter((item) => {
+                    let isMatch = false;
+                    for (let i = 0; i < searchFunctions.length; i++) {
+                        const searchFunction = searchFunctions[i];
+                        const searchResult = searchFunction(item.data, searchText);
+                        if ((typeof searchResult === 'string' &&
+                            searchResult.indexOf(searchText) !== -1) ||
+                            searchResult === true) {
+                            isMatch = true;
+                            break;
+                        }
+                    }
+                    return isMatch;
+                });
+                this.lastSearchResults = result;
+            }
+            else {
+                this.lastSearchResults = undefined;
+            }
+            // Apply sort.
+            if (sort && sort.fieldSelectors.length > 0) {
+                result = result
+                    .slice()
+                    .sort((item1, item2) => {
+                    let compareResult = 0;
+                    for (let i = 0; i < sort.fieldSelectors.length; i++) {
+                        const selector = sort.fieldSelectors[i];
+                        const value1 = getData(item1.data, selector.fieldSelector);
+                        const value2 = getData(item2.data, selector.fieldSelector);
+                        compareResult = compare(value1, value2);
+                        if (selector.descending && compareResult !== 0) {
+                            compareResult *= -1;
+                        }
+                        if (compareResult !== 0) {
+                            break;
+                        }
+                    }
+                    return compareResult;
+                });
+            }
+            return result;
+        }));
+    }
+}
+
+let idIndex$2 = 0;
+/**
+ * @internal
+ */
+class ListViewComponent {
+    constructor(state, defaultName) {
+        this.viewId = `sky-list-view-cmp-${++idIndex$2}`;
+        this.state = state;
+        this.viewName = defaultName;
+        /* istanbul ignore next */
+        this.hasToolbar = this.state.pipe(map((s) => s.toolbar.exists));
+        this.active = this.state.pipe(map((s) => s.views.active === this.viewId));
+        this.active
+            .pipe(distinctUntilChanged())
+            .subscribe((isActive) => isActive ? this.onViewActive() : this.onViewInactive());
+    }
+    get id() {
+        return this.viewId;
+    }
+    get label() {
+        return this.viewName;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onViewActive() { }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onViewInactive() { }
+}
+
+/**
+ * @internal
+ */
+class ListItemsLoadAction {
+    constructor(items, refresh = false, dataChanged = true, count) {
+        this.items = items;
+        this.refresh = refresh;
+        this.dataChanged = dataChanged;
+        this.count = count;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListItemsSetLoadingAction {
+    constructor(loading = true) {
+        this.loading = loading;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListFiltersUpdateAction {
+    constructor(filters) {
+        this.filters = filters;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSearchSetFieldSelectorsAction {
+    constructor(fieldSelectors = []) {
+        this.fieldSelectors = fieldSelectors;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSearchSetFunctionsAction {
+    constructor(functions = []) {
+        this.functions = functions;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSearchSetOptionsAction {
+    constructor(searchTextAction, setFieldSelectorsAction, setFunctionsAction) {
+        this.searchTextAction = searchTextAction;
+        this.setFieldSelectorsAction = setFieldSelectorsAction;
+        this.setFunctionsAction = setFunctionsAction;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSearchSetSearchTextAction {
+    constructor(searchText) {
+        this.searchText = searchText;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSelectedSetItemsSelectedAction {
+    constructor(items, selected = false, refresh = true) {
+        this.items = items;
+        this.selected = selected;
+        this.refresh = refresh;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSortSetAvailableAction {
+    constructor(available) {
+        this.available = available;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSortSetFieldSelectorsAction {
+    constructor(fieldSelectors) {
+        this.fieldSelectors = fieldSelectors;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSortSetGlobalAction {
+    constructor(global) {
+        this.global = global;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarItemsDisableAction {
+    constructor(disable) {
+        this.disable = disable;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarItemsLoadAction {
+    constructor(items, index = -1) {
+        this.items = items;
+        this.index = index;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarItemsRemoveAction {
+    constructor(ids) {
+        this.ids = ids;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarSetExistsAction {
+    constructor(exists) {
+        this.exists = exists;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarShowMultiselectToolbarAction {
+    constructor(exists) {
+        this.exists = exists;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsSetActiveAction {
+    constructor(view) {
+        this.view = view;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListStateOrchestrator extends StateOrchestrator {
+}
+/**
+ * @internal
+ */
+class ListStateDispatcher extends StateDispatcher {
+    viewsSetActive(id) {
+        this.next(new ListViewsSetActiveAction(id));
+    }
+    toolbarExists(exists) {
+        this.next(new ListToolbarSetExistsAction(exists));
+    }
+    toolbarSetDisabled(disabled) {
+        this.next(new ListToolbarItemsDisableAction(disabled));
+    }
+    toolbarAddItems(items, index = -1) {
+        this.next(new ListToolbarItemsLoadAction(items, index));
+    }
+    toolbarRemoveItems(ids) {
+        this.next(new ListToolbarItemsRemoveAction(ids));
+    }
+    toolbarShowMultiselectToolbar(show) {
+        this.next(new ListToolbarShowMultiselectToolbarAction(show));
+    }
+    searchSetFunctions(sortFunctions) {
+        this.next(new ListSearchSetFunctionsAction(sortFunctions));
+    }
+    /* istanbul ignore next */
+    searchSetFieldSelectors(fieldSelectors) {
+        this.next(new ListSearchSetFieldSelectorsAction(fieldSelectors));
+    }
+    searchSetText(searchText) {
+        this.next(new ListSearchSetSearchTextAction(searchText));
+    }
+    searchSetOptions(searchOptions) {
+        this.next(new ListSearchSetOptionsAction(new ListSearchSetSearchTextAction(searchOptions.searchText), new ListSearchSetFieldSelectorsAction(searchOptions.fieldSelectors), new ListSearchSetFunctionsAction(searchOptions.functions)));
+    }
+    sortSetAvailable(sortLabels) {
+        this.next(new ListSortSetAvailableAction(sortLabels));
+    }
+    sortSetFieldSelectors(fieldSelectors) {
+        this.next(new ListSortSetFieldSelectorsAction(fieldSelectors));
+    }
+    sortSetGlobal(sortLabels) {
+        this.next(new ListSortSetGlobalAction(sortLabels));
+    }
+    filtersUpdate(filters) {
+        this.next(new ListFiltersUpdateAction(filters));
+    }
+    setSelected(selectedIds, selected, refresh = false) {
+        this.next(new ListSelectedSetItemsSelectedAction(selectedIds, selected, refresh));
+    }
+}
+ListStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+ListStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListStateDispatcher, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class ListFiltersOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListFiltersUpdateAction, this.update);
+    }
+    update(state, action) {
+        return [...action.filters];
+    }
+}
+
+/**
+ * @internal
+ */
+class ListItemsSetSelectedAction {
+    constructor(items, 
+    /* istanbul ignore next */
+    selected = false, refresh = true) {
+        this.items = items;
+        this.selected = selected;
+        this.refresh = refresh;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListItemsOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListItemsSetLoadingAction, this.setLoading)
+            .register(ListItemsLoadAction, this.load)
+            .register(ListItemsSetSelectedAction, this.setItemsSelected);
+    }
+    setLoading(state, action) {
+        return new AsyncList(state.items, state.lastUpdate, action.loading, state.count);
+    }
+    load(state, action) {
+        const newListItems = action.items.map((g) => new ListItemModel(g.id, g.data, g.isSelected));
+        const resultItems = action.refresh
+            ? [...newListItems]
+            : [...state.items, ...newListItems];
+        const count = action.count === undefined ? resultItems.length : action.count;
+        return new AsyncList(resultItems, action.dataChanged ? Date.now() : state.lastUpdate, false, count);
+    }
+    setItemsSelected(state, action) {
+        /* istanbul ignore next */
+        const newSelectedIds = action.items || [];
+        const newListItemModels = this.cloneListItemModelArray(state.items);
+        if (action.refresh) {
+            newListItemModels.forEach((item) => (item.isSelected = undefined));
+        }
+        newSelectedIds.map((s) => {
+            const newItem = newListItemModels.find((i) => i.id === s);
+            /* istanbul ignore next */
+            if (newItem) {
+                newItem.isSelected = action.selected;
+            }
+        });
+        return new AsyncList(newListItemModels, Date.now(), state.loading, state.count);
+    }
+    cloneListItemModelArray(source) {
+        const newListItems = [];
+        source.forEach((item) => {
+            newListItems.push(new ListItemModel(item.id, Object.assign({}, item.data), item.isSelected));
+        });
+        return newListItems;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListPagingModel {
+    constructor(data) {
+        if (data !== undefined) {
+            this.itemsPerPage = data.itemsPerPage || 10;
+            this.maxDisplayedPages = data.maxDisplayedPages || 5;
+            this.pageCount = data.pageCount || 0;
+            this.pageNumber = data.pageNumber || 1;
+        }
+    }
+}
+
+/**
+ * Contains data about the selected items in the list.
+ */
+class ListSelectedModel {
+    constructor() {
+        this.selectedIdMap = new Map();
+    }
+}
+
+/**
+ * Specifies a set of fields to sort by.
+ */
+class ListSortModel {
+    constructor(data) {
+        /**
+         * Specifies the list of available views to sort.
+         */
+        this.available = [];
+        /**
+         * Specifies whether the sort applies to all list views.
+         */
+        this.global = [];
+        /**
+         * Specifies the fields to sort.
+         * For information about `ListSortFieldSelectorModel`, see the
+         * [shared classes for lists](https://developer.blackbaud.com/skyux-list-builder-common/docs/list-builder-common).
+         */
+        this.fieldSelectors = [];
+        if (data) {
+            this.available = data.available;
+            this.global = data.global;
+            this.fieldSelectors = data.fieldSelectors;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarModel {
+    constructor(data) {
+        this.items = [];
+        this.showMultiselectToolbar = false;
+        if (data) {
+            this.exists = data.exists;
+            this.disabled = data.disabled;
+            this.items = data.items;
+            this.type = data.type;
+            this.showMultiselectToolbar = data.showMultiselectToolbar;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsModel {
+    constructor(data) {
+        this.views = [];
+        if (data) {
+            this.active = data.active;
+            this.views = data.views;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListStateModel {
+    constructor() {
+        this.filters = [];
+        this.items = new AsyncList();
+        this.paging = new ListPagingModel();
+        this.search = new ListSearchModel();
+        this.selected = new AsyncItem();
+        this.sort = new ListSortModel();
+        this.toolbar = new ListToolbarModel();
+        this.views = new ListViewsModel();
+        this.selected.item = new ListSelectedModel();
+    }
+}
+
+/**
+ * @internal
+ */
+class ListPagingSetItemsPerPageAction {
+    constructor(itemsPerPage) {
+        this.itemsPerPage = itemsPerPage;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListPagingSetMaxPagesAction {
+    constructor(maxPages) {
+        this.maxPages = maxPages;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListPagingSetPageNumberAction {
+    constructor(pageNumber) {
+        this.pageNumber = pageNumber;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListPagingOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListPagingSetMaxPagesAction, this.setMaxPages)
+            .register(ListPagingSetItemsPerPageAction, this.setItemsPerPage)
+            .register(ListPagingSetPageNumberAction, this.setPageNumber);
+    }
+    setMaxPages(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { maxDisplayedPages: Number(action.maxPages) }));
+    }
+    setItemsPerPage(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { itemsPerPage: Number(action.itemsPerPage) }));
+    }
+    setPageNumber(state, action) {
+        return new ListPagingModel(Object.assign({}, state, { pageNumber: Number(action.pageNumber) }));
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSearchOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListSearchSetSearchTextAction, this.setSearchText)
+            .register(ListSearchSetFunctionsAction, this.setFunctions)
+            .register(ListSearchSetFieldSelectorsAction, this.setFieldSelectors)
+            .register(ListSearchSetOptionsAction, this.setOptions);
+    }
+    setSearchText(state, action) {
+        return new ListSearchModel(Object.assign({}, state, {
+            searchText: action.searchText ? action.searchText : '',
+        }));
+    }
+    setFunctions(state, action) {
+        return new ListSearchModel(Object.assign({}, state, { functions: [...action.functions] }));
+    }
+    setFieldSelectors(state, action) {
+        return new ListSearchModel(Object.assign({}, state, { fieldSelectors: [...action.fieldSelectors] }));
+    }
+    setOptions(state, action) {
+        let result = state;
+        /* istanbul ignore else */
+        if (action.searchTextAction) {
+            result = this.setSearchText(result, action.searchTextAction);
+        }
+        /* istanbul ignore else */
+        if (action.setFieldSelectorsAction) {
+            result = this.setFieldSelectors(result, action.setFieldSelectorsAction);
+        }
+        /* istanbul ignore else */
+        if (action.setFunctionsAction) {
+            result = this.setFunctions(result, action.setFunctionsAction);
+        }
+        return result;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSelectedLoadAction {
+    constructor(items) {
+        this.items = items;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSelectedSetItemSelectedAction {
+    constructor(id, selected) {
+        this.id = id;
+        this.selected = selected;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSelectedSetLoadingAction {
+    constructor(loading = true) {
+        this.loading = loading;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSelectedOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListSelectedSetLoadingAction, this.setLoading)
+            .register(ListSelectedSetItemSelectedAction, this.setItemSelected)
+            .register(ListSelectedSetItemsSelectedAction, this.setItemsSelected)
+            .register(ListSelectedLoadAction, this.load);
+    }
+    setLoading(state, action) {
+        return new AsyncItem(state.item, state.lastUpdate, action.loading);
+    }
+    load(state, action) {
+        const newSelected = new ListSelectedModel();
+        action.items.map((s) => newSelected.selectedIdMap.set(s, true));
+        return new AsyncItem(Object.assign({}, state.item, newSelected), Date.now(), false);
+    }
+    setItemSelected(state, action) {
+        const newSelected = this.cloneListSelectedModel(state.item);
+        newSelected.selectedIdMap.set(action.id, action.selected);
+        return new AsyncItem(newSelected, state.lastUpdate, state.loading);
+    }
+    setItemsSelected(state, action) {
+        const newSelectedIds = action.items || [];
+        const newListSelectedModel = action.refresh
+            ? new ListSelectedModel()
+            : this.cloneListSelectedModel(state.item);
+        if (newSelectedIds instanceof Observable) {
+            newSelectedIds.pipe(take(1)).subscribe((selectedIds) => {
+                selectedIds.map((s) => newListSelectedModel.selectedIdMap.set(s, action.selected));
+            });
+        }
+        else {
+            newSelectedIds.map((s) => newListSelectedModel.selectedIdMap.set(s, action.selected));
+        }
+        return new AsyncItem(newListSelectedModel, state.lastUpdate, state.loading);
+    }
+    cloneListSelectedModel(source) {
+        const newListItems = new ListSelectedModel();
+        newListItems.selectedIdMap = new Map(source.selectedIdMap);
+        return newListItems;
+    }
+}
+
+/**
+ * These properties are a work in progress, and we do not recommend using them.
+ */
+class ListSortLabelModel {
+    constructor(data) {
+        /**
+         * Indicates whether to sort all fields.
+         * @default false
+         */
+        this.global = false;
+        /**
+         * Indicates whether to sort in descending order.
+         * @default false
+         */
+        this.descending = false;
+        if (data) {
+            this.text = data.text;
+            this.fieldType = data.fieldType;
+            this.fieldSelector = data.fieldSelector;
+            this.global = data.global;
+            this.descending = data.descending;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListSortOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListSortSetFieldSelectorsAction, this.setFieldSelectors)
+            .register(ListSortSetAvailableAction, this.setAvailable)
+            .register(ListSortSetGlobalAction, this.setGlobal);
+    }
+    setFieldSelectors(state, action) {
+        return new ListSortModel(Object.assign({}, state, { fieldSelectors: action.fieldSelectors }));
+    }
+    setAvailable(state, action) {
+        const newAvailable = action.available.map((available) => new ListSortLabelModel(available));
+        return new ListSortModel(Object.assign({}, state, { available: newAvailable }));
+    }
+    setGlobal(state, action) {
+        const newGlobal = action.global.map((global) => new ListSortLabelModel(global));
+        return new ListSortModel(Object.assign({}, state, { global: newGlobal }));
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarSetTypeAction {
+    constructor(type) {
+        this.type = type;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarItemModel {
+    constructor(data) {
+        this.index = -1;
+        if (data) {
+            this.index = data.index;
+            this.template = data.template;
+            this.location = data.location;
+            this.view = data.view;
+            this.id = data.id;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListToolbarSetExistsAction, this.setExists)
+            .register(ListToolbarItemsDisableAction, this.setDisabled)
+            .register(ListToolbarItemsLoadAction, this.load)
+            .register(ListToolbarSetTypeAction, this.setType)
+            .register(ListToolbarItemsRemoveAction, this.remove)
+            .register(ListToolbarShowMultiselectToolbarAction, this.showMultiselectToolbar);
+    }
+    setExists(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.exists = action.exists;
+        return newModel;
+    }
+    setDisabled(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.disabled = action.disable;
+        return newModel;
+    }
+    setType(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.type = action.type;
+        return newModel;
+    }
+    load(state, action) {
+        const newModel = new ListToolbarModel(state);
+        const newListItems = action.items.map((item) => {
+            /**
+             * NOTE: Originally this function went off the action index and item models did not include
+             * the index. We changed this but must leave functionality to convert the action index for
+             * backwards compatibility.
+             */
+            if (!item.index) {
+                item.index = action.index;
+            }
+            return new ListToolbarItemModel(item);
+        });
+        let items = [...state.items, ...newListItems];
+        items = items.sort((a, b) => {
+            if (a.index < b.index) {
+                return -1;
+            }
+            else if (a.index > b.index) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        });
+        newModel.items = items;
+        return newModel;
+    }
+    remove(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.items = newModel.items.filter((item) => {
+            return action.ids.indexOf(item.id) === -1;
+        });
+        return newModel;
+    }
+    showMultiselectToolbar(state, action) {
+        const newModel = new ListToolbarModel(state);
+        newModel.showMultiselectToolbar = action.exists;
+        return newModel;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsLoadAction {
+    constructor(views) {
+        this.views = views;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListViewsOrchestrator extends ListStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListViewsSetActiveAction, this.setActive).register(ListViewsLoadAction, this.load);
+    }
+    setActive(state, action) {
+        return new ListViewsModel(Object.assign({}, state, { active: action.view }));
+    }
+    load(state, action) {
+        return new ListViewsModel(Object.assign({}, state, { views: action.views }));
+    }
+}
+
+/**
+ * @internal
+ */
+class ListState extends StateNode {
+    constructor(dispatcher) {
+        super(new ListStateModel(), dispatcher);
+        this.register('filters', ListFiltersOrchestrator)
+            .register('items', ListItemsOrchestrator)
+            .register('paging', ListPagingOrchestrator)
+            .register('search', ListSearchOrchestrator)
+            .register('sort', ListSortOrchestrator)
+            .register('toolbar', ListToolbarOrchestrator)
+            .register('views', ListViewsOrchestrator)
+            .register('selected', ListSelectedOrchestrator)
+            .begin();
+    }
+}
+ListState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListState, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+ListState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListState, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; } });
+
+/**
+ * @internal
+ */
+class ListViewModel {
+    constructor(id, name) {
+        this.id = id;
+        this.name = name;
+    }
+}
+
+let idIndex$1 = 0;
+class SkyListComponent {
+    constructor(state, dispatcher) {
+        this.state = state;
+        this.dispatcher = dispatcher;
+        this.id = `sky-list-cmp-${++idIndex$1}`;
+        /**
+         * Specifies the data to display. The list component requires this property or the
+         * `dataProvider` property. For checklist or multiselect grids, each row requires an
+         * `id` property to manage selected items with the `selectedIds` input and the
+         * `selectedIdsChange` event. If you do not provide an `id`, the list automatically
+         * generates one. To update data in your view outside of a `dataProvider`, you must use
+         * an observable instead of a static array.
+         */
+        this.data = [];
+        /**
+         * Specifies a set of filters to apply to list data.
+         * These filters create a filter summary when the list includes the
+         * [`sky-list-filter-summary`](https://developer.blackbaud.com/skyux/components/list/filters)
+         * component.
+         */
+        this.appliedFilters = [];
+        /**
+         * For list views that support item selection, emits the selected entries.
+         */
+        this.selectedIdsChange = new EventEmitter();
+        /**
+         * Emits the filters applied to the list.
+         */
+        this.appliedFiltersChange = new EventEmitter();
+        this.dataFirstLoad = false;
+        this.lastSelectedIds = [];
+        this.lastFilters = [];
+        this.ngUnsubscribe = new Subject();
+    }
+    ngAfterContentInit() {
+        if (this.data && this.dataProvider && this.initialTotal) {
+            this.dataFirstLoad = true;
+        }
+        if (this.listViews.length > 0) {
+            const defaultView = this.defaultView === undefined
+                ? this.listViews.first
+                : this.defaultView;
+            this.dispatcher.next(new ListViewsLoadAction(this.listViews.map((v) => new ListViewModel(v.id, v.label))));
+            // activate the default view
+            this.dispatcher.next(new ListViewsSetActiveAction(defaultView.id));
+        }
+        else {
+            return;
+        }
+        // set sort fields
+        getValue(this.sortFields, (sortFields) => {
+            let sortArray;
+            if (!Array.isArray(sortFields) && sortFields) {
+                sortArray = [sortFields];
+            }
+            else {
+                sortArray = sortFields;
+            }
+            this.dispatcher.next(new ListSortSetFieldSelectorsAction(sortArray || []));
+        });
+        this.displayedItems.subscribe((result) => {
+            this.dispatcher.next(new ListItemsSetLoadingAction());
+            this.dispatcher.next(new ListItemsLoadAction(result.items, true, true, result.count));
+        });
+        // Watch for selection changes.
+        this.state
+            .pipe(map((current) => current.selected), takeUntil(this.ngUnsubscribe), distinctUntilChanged())
+            .subscribe((selected) => {
+            // Update lastSelectedIds to help us retain user selections.
+            const selectedIdsList = [];
+            selected.item.selectedIdMap.forEach((value, key) => {
+                if (value === true) {
+                    selectedIdsList.push(key);
+                }
+            });
+            // If changes are distinct, emit selectedIdsChange.
+            const distinctChanges = !this.arraysEqual(this.lastSelectedIds, selectedIdsList);
+            if (this.selectedIdsChange.observers.length > 0 && distinctChanges) {
+                this.selectedIdsChange.emit(selected.item.selectedIdMap);
+            }
+            this.lastSelectedIds = selectedIdsList;
+        });
+        if (this.appliedFiltersChange.observers.length > 0) {
+            this.state
+                .pipe(map((current) => current.filters), takeUntil(this.ngUnsubscribe), skip(1))
+                .subscribe((filters) => {
+                /**
+                 * We are doing this instead of a distinctUntilChange due to memory allocation issues
+                 * with the javascript array. To fix fully the array should be changed to an object in
+                 * a breaking change.
+                 */
+                if (!this.arraysEqual(filters, this.lastFilters)) {
+                    this.lastFilters = filters.slice(0);
+                    this.appliedFiltersChange.emit(filters);
+                }
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['appliedFilters'] &&
+            changes['appliedFilters'].currentValue !==
+                changes['appliedFilters'].previousValue) {
+            this.state.pipe(take(1)).subscribe((currentState) => {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
+                    this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+                }
+                this.dispatcher.filtersUpdate(this.appliedFilters);
+            });
+        }
+        if (changes['selectedIds']) {
+            // Only send selection changes to dispatcher if changes are distinct.
+            const newSelectedIds = changes['selectedIds'].currentValue;
+            if (!this.arraysEqual(newSelectedIds, this.lastSelectedIds)) {
+                this.dispatcher.setSelected(newSelectedIds, true, true);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    refreshDisplayedItems() {
+        this.displayedItems.pipe(take(1)).subscribe((result) => {
+            this.dispatcher.next(new ListItemsSetLoadingAction());
+            this.dispatcher.next(new ListItemsLoadAction(result.items, true, true, result.count));
+        });
+    }
+    get displayedItems() {
+        if (!this.data && !this.dataProvider) {
+            throw new Error('List requires data or dataProvider to be set.');
+        }
+        let data = this.data;
+        if (!isObservable(data)) {
+            data = of(this.data);
+        }
+        if (!this.dataProvider) {
+            this.dataProvider = new SkyListInMemoryDataProvider(data, this.searchFunction);
+        }
+        let selectedIds = this.selectedIds || of([]);
+        if (!isObservable(selectedIds)) {
+            selectedIds = of(selectedIds);
+        }
+        let selectedChanged = false;
+        // This subject is used to cancel previous request to the list's data provider when a new change
+        // to the list's state occurs. In a future breaking change this should be replaced or coupled
+        // with adding a debounce time to the Observable which watches for state changes.
+        const cancelLastRequest = new Subject();
+        return combineLatest([
+            this.state.pipe(map((s) => s.filters), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.search), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.sort.fieldSelectors), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.paging.itemsPerPage), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.paging.pageNumber), distinctUntilChanged()),
+            this.state.pipe(map((s) => s.toolbar.disabled), distinctUntilChanged()),
+            selectedIds.pipe(distinctUntilChanged(), map((selected) => {
+                selectedChanged = true;
+                return selected;
+            })),
+            data.pipe(distinctUntilChanged()),
+        ], (filters, search, sortFieldSelectors, itemsPerPage, pageNumber, isToolbarDisabled, selected, itemsData) => {
+            cancelLastRequest.next();
+            cancelLastRequest.complete();
+            if (selectedChanged) {
+                this.dispatcher.next(new ListSelectedSetLoadingAction());
+                this.dispatcher.next(new ListSelectedLoadAction(selected));
+                this.dispatcher.next(new ListSelectedSetLoadingAction(false));
+                selectedChanged = false;
+            }
+            let response;
+            if (this.dataFirstLoad) {
+                this.dataFirstLoad = false;
+                const initialItems = itemsData.map((d) => new ListItemModel(d.id || `sky-list-item-model-${++idIndex$1}`, d));
+                response = of(new ListDataResponseModel({
+                    count: this.initialTotal,
+                    items: initialItems,
+                })).pipe(takeUntil(cancelLastRequest));
+            }
+            else {
+                response = this.dataProvider
+                    .get(new ListDataRequestModel({
+                    filters: filters,
+                    pageSize: itemsPerPage,
+                    pageNumber: pageNumber,
+                    search: search,
+                    sort: new ListSortModel({ fieldSelectors: sortFieldSelectors }),
+                    isToolbarDisabled: isToolbarDisabled,
+                }))
+                    .pipe(takeUntil(cancelLastRequest));
+            }
+            return response;
+        }).pipe(takeUntil(this.ngUnsubscribe), 
+        // Retain user selections from previous state.
+        // This is only necessary for grids component (based on item.isSelected).
+        map((response) => {
+            return response.pipe(map((listDataResponseModel) => {
+                return new ListDataResponseModel({
+                    count: listDataResponseModel.count,
+                    items: this.getItemsAndRetainSelections(listDataResponseModel.items, this.lastSelectedIds),
+                });
+            }));
+        }), flatMap((value) => value));
+    }
+    get selectedItems() {
+        return combineLatest(this.state.pipe(map((current) => current.items.items), distinctUntilChanged()), this.state.pipe(map((current) => current.selected), distinctUntilChanged()), (items, selected) => {
+            return items.filter((i) => selected.item.selectedIdMap.get(i.id));
+        }).pipe(takeUntil(this.ngUnsubscribe));
+    }
+    get lastUpdate() {
+        return this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.items.lastUpdate ? new Date(s.items.lastUpdate) : undefined));
+    }
+    get views() {
+        return this.listViews.toArray();
+    }
+    get itemCount() {
+        return this.dataProvider.count();
+    }
+    getItemsAndRetainSelections(newList, selectedIds) {
+        const updatedListModel = newList.slice();
+        updatedListModel.forEach((item) => {
+            item.isSelected = selectedIds.indexOf(item.id) > -1 ? true : false;
+        });
+        return updatedListModel;
+    }
+    arraysEqual(arrayA, arrayB) {
+        /* istanbul ignore next */
+        if (arrayA === arrayB) {
+            return true;
+        }
+        if (arrayA === undefined || arrayB === undefined) {
+            return false;
+        }
+        if (arrayA.length !== arrayB.length) {
+            return false;
+        }
+        for (let i = 0; i < arrayA.length; ++i) {
+            if (arrayA[i] !== arrayB[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+SkyListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListComponent, selector: "sky-list", inputs: { data: "data", dataProvider: "dataProvider", defaultView: "defaultView", initialTotal: "initialTotal", selectedIds: "selectedIds", sortFields: "sortFields", appliedFilters: "appliedFilters", searchFunction: ["search", "searchFunction"] }, outputs: { selectedIdsChange: "selectedIdsChange", appliedFiltersChange: "appliedFiltersChange" }, providers: [ListState, ListStateDispatcher], queries: [{ propertyName: "listViews", predicate: ListViewComponent }], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list',
+                    template: '<ng-content></ng-content>',
+                    providers: [ListState, ListStateDispatcher],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { data: [{
+                type: Input
+            }], dataProvider: [{
+                type: Input
+            }], defaultView: [{
+                type: Input
+            }], initialTotal: [{
+                type: Input
+            }], selectedIds: [{
+                type: Input
+            }], sortFields: [{
+                type: Input
+            }], appliedFilters: [{
+                type: Input
+            }], selectedIdsChange: [{
+                type: Output
+            }], appliedFiltersChange: [{
+                type: Output
+            }], searchFunction: [{
+                type: Input,
+                args: ['search']
+            }], listViews: [{
+                type: ContentChildren,
+                args: [ListViewComponent]
+            }] } });
+
+class SkyListModule {
+}
+SkyListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListModule, declarations: [SkyListComponent], imports: [CommonModule], exports: [SkyListComponent] });
+SkyListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyListComponent],
+                    imports: [CommonModule],
+                    exports: [SkyListComponent],
+                }]
+        }] });
+
+class ListFilterModel {
+    constructor(data) {
+        /**
+         * Indicates whether users can dismiss the filter's summary item.
+         * @default true
+         */
+        this.dismissible = true;
+        if (data) {
+            this.name = data.name;
+            this.label = data.label;
+            this.filterFunction = data.filterFunction;
+            this.value = data.value;
+            this.dismissible = data.dismissible;
+            this.defaultValue = data.defaultValue;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class SkyListFilterInlineModel {
+    constructor(data) {
+        this.onChange = new EventEmitter();
+        if (data) {
+            this.name = data.name;
+            this.filterFunction = data.filterFunction;
+            this.value = data.value;
+            this.template = data.template;
+            this.defaultValue = data.defaultValue;
+        }
+    }
+    changed(value) {
+        this.value = value;
+        this.onChange.emit(value);
+    }
+}
+
+/**
+ * Contains a filter button for the list toolbar. Place a
+ * [`sky-filter-button`](https://developer.blackbaud.com/skyux/components/filter)
+ * component inside this component to open a modal with filtering options.
+ * To apply filter options, use the
+ * [list component's](https://developer.blackbaud.com/skyux/components/list/overview#list-properties)
+ * `appliedFilters` property.
+ */
+class SkyListFilterButtonComponent {
+    constructor(dispatcher) {
+        this.dispatcher = dispatcher;
+        this.filterButtonItemToolbarIndex = 5000;
+    }
+    ngAfterViewInit() {
+        this.dispatcher.toolbarAddItems([
+            new ListToolbarItemModel({
+                template: this.filterButtonTemplate,
+                location: 'left',
+                index: this.filterButtonItemToolbarIndex,
+            }),
+        ]);
+    }
+}
+SkyListFilterButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterButtonComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListFilterButtonComponent, selector: "sky-list-filter-button", viewQueries: [{ propertyName: "filterButtonTemplate", first: true, predicate: ["filterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-filter-button', template: "<ng-template #filterButton>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { filterButtonTemplate: [{
+                type: ViewChild,
+                args: ['filterButton', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyListFilterInlineItemRendererComponent {
+    ngOnInit() {
+        /* istanbul ignore else */
+        /* sanity check */
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
+    }
+}
+SkyListFilterInlineItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: { template: "template", filter: "filter" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-inline-item-renderer',
+                    template: '<ng-template #container></ng-template>',
+                }]
+        }], propDecorators: { template: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+/**
+ * Creates a filter in the list's inline filter area.
+ */
+class SkyListFilterInlineItemComponent {
+    constructor() {
+        this.onChange = new EventEmitter();
+    }
+    ngOnInit() {
+        if (this.name === undefined || this.name.length === 0) {
+            throw new Error('Inline filter requires a name.');
+        }
+    }
+    get template() {
+        return this.templates.length > 0
+            ? this.templates.first
+            : this.templateInput;
+    }
+}
+SkyListFilterInlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListFilterInlineItemComponent, selector: "sky-list-filter-inline-item", inputs: { name: "name", value: "value", defaultValue: "defaultValue", filterFunction: ["filter", "filterFunction"], templateInput: ["template", "templateInput"] }, queries: [{ propertyName: "templates", predicate: TemplateRef }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-filter-inline-item',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], filterFunction: [{
+                type: Input,
+                args: ['filter']
+            }], templateInput: [{
+                type: Input,
+                args: ['template']
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * Creates an inline filter area for the list. Place each filter
+ * in a `sky-list-filter-inline-item` component.
+ */
+class SkyListFilterInlineComponent {
+    constructor(dispatcher, state) {
+        this.dispatcher = dispatcher;
+        this.state = state;
+        this.inlineFilters = [];
+    }
+    ngAfterContentInit() {
+        this.inlineFilters = this.filters.map((filter) => {
+            return new SkyListFilterInlineModel({
+                name: filter.name,
+                filterFunction: filter.filterFunction,
+                template: filter.template,
+                value: filter.value,
+                defaultValue: filter.defaultValue,
+            });
+        });
+        this.inlineFilters.forEach((filter) => {
+            filter.onChange.subscribe((value) => {
+                this.applyFilters();
+            });
+        });
+        this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+    }
+    applyFilters() {
+        this.state.pipe(take(1)).subscribe((currentState) => {
+            if (currentState.paging.pageNumber &&
+                currentState.paging.pageNumber !== 1) {
+                this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+            }
+            this.dispatcher.filtersUpdate(this.getFilterModelFromInline(this.inlineFilters));
+        });
+    }
+    getFilterModelFromInline(inlineFilters) {
+        return inlineFilters.map((filter) => {
+            return new ListFilterModel({
+                name: filter.name,
+                value: filter.value,
+                filterFunction: filter.filterFunction,
+                defaultValue: filter.defaultValue,
+            });
+        });
+    }
+}
+SkyListFilterInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content></ng-content>\n\n<sky-filter-inline>\n  <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n    <sky-list-filter-inline-item-renderer\n      [template]=\"filter.template\"\n      [filter]=\"filter\"\n    >\n    </sky-list-filter-inline-item-renderer>\n  </sky-filter-inline-item>\n</sky-filter-inline>\n", components: [{ type: i3.λ2, selector: "sky-filter-inline" }, { type: i3.λ3, selector: "sky-filter-inline-item" }, { type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-filter-inline', 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: ContentChildren,
+                args: [SkyListFilterInlineItemComponent]
+            }] } });
+
+/**
+ * Creates a filter summary based on the
+ * [list component's](https://developer.blackbaud.com/skyux/components/list/overview#list-properties)
+ * `appliedFilters` property. Place this component within the
+ * [`sky-list-toolbar`](https://developer.blackbaud.com/skyux/components/list/toolbar) component.
+ */
+class SkyListFilterSummaryComponent {
+    constructor(state, dispatcher) {
+        this.state = state;
+        this.dispatcher = dispatcher;
+        /**
+         * Emits a `ListFilterModel` when users select a summary item. A common use case is
+         * to open a filter modal when this event is received.
+         */
+        this.summaryItemClick = new EventEmitter();
+    }
+    ngAfterContentInit() {
+        // The setTimeout here is to ensure we avoid any ExpressionChangedAfterItHasBeenCheckedError issues.
+        setTimeout(() => {
+            this.appliedFilters = this.state.pipe(map((state) => {
+                return state.filters.filter((filter) => {
+                    return (filter.value !== '' &&
+                        filter.value !== undefined &&
+                        filter.value !== false &&
+                        filter.value !== filter.defaultValue);
+                });
+            }));
+        });
+    }
+    filterSummaryItemDismiss(index) {
+        this.appliedFilters.pipe(take(1)).subscribe((filters) => {
+            filters.splice(index, 1);
+            this.dispatcher.filtersUpdate(filters.slice());
+        });
+    }
+    filterSummaryItemClick(item) {
+        this.summaryItemClick.emit(item);
+    }
+}
+SkyListFilterSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListFilterSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n  <sky-filter-summary-item\n    *ngFor=\"let item of appliedFilters | async; let i = index\"\n    (dismiss)=\"filterSummaryItemDismiss(i)\"\n    (itemClick)=\"filterSummaryItemClick(item)\"\n    [dismissible]=\"item.dismissible\"\n  >\n    {{ item.label || item.value }}\n  </sky-filter-summary-item>\n</sky-filter-summary>\n", components: [{ type: i3.λ5, selector: "sky-filter-summary" }, { type: i3.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-filter-summary', template: "<sky-filter-summary>\n  <sky-filter-summary-item\n    *ngFor=\"let item of appliedFilters | async; let i = index\"\n    (dismiss)=\"filterSummaryItemDismiss(i)\"\n    (itemClick)=\"filterSummaryItemClick(item)\"\n    [dismissible]=\"item.dismissible\"\n  >\n    {{ item.label || item.value }}\n  </sky-filter-summary-item>\n</sky-filter-summary>\n" }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { summaryItemClick: [{
+                type: Output
+            }] } });
+
+class SkyListFiltersModule {
+}
+SkyListFiltersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListFiltersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFiltersModule, declarations: [SkyListFilterButtonComponent,
+        SkyListFilterSummaryComponent,
+        SkyListFilterInlineItemComponent,
+        SkyListFilterInlineComponent,
+        SkyListFilterInlineItemRendererComponent], imports: [CommonModule, SkyFilterModule], exports: [SkyListFilterButtonComponent,
+        SkyListFilterSummaryComponent,
+        SkyListFilterInlineItemComponent,
+        SkyListFilterInlineComponent] });
+SkyListFiltersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFiltersModule, imports: [[CommonModule, SkyFilterModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListFiltersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListFilterButtonComponent,
+                        SkyListFilterSummaryComponent,
+                        SkyListFilterInlineItemComponent,
+                        SkyListFilterInlineComponent,
+                        SkyListFilterInlineItemRendererComponent,
+                    ],
+                    imports: [CommonModule, SkyFilterModule],
+                    exports: [
+                        SkyListFilterButtonComponent,
+                        SkyListFilterSummaryComponent,
+                        SkyListFilterInlineItemComponent,
+                        SkyListFilterInlineComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Provides a SKY UX-themed pagination control to display list data across multiple pages.
+ * @internal
+ */
+class ListPagingComponent {
+    constructor(state, dispatcher) {
+        this.initialized = new BehaviorSubject(false);
+        this.state = state;
+        this.dispatcher = dispatcher;
+    }
+}
+
+/* istanbul ignore next */
+const listPagingComponentRef = forwardRef(() => SkyListPagingComponent);
+/**
+ * Displays a pagination control for a SKY UX-themed list of data.
+ */
+class SkyListPagingComponent extends ListPagingComponent {
+    constructor(state, dispatcher) {
+        super(state, dispatcher);
+        /**
+         * Specifies the number of list items per page.
+         * @default 10
+         */
+        this.pageSize = 10;
+        /**
+         * Specifies the maximum pages to display.
+         * @default 5
+         */
+        this.maxPages = 5;
+        /**
+         * Specifies the current page number.
+         * @default 1
+         */
+        this.pageNumber = 1;
+    }
+    ngOnInit() {
+        this.currentPageNumber = this.state.pipe(map((s) => s.paging.pageNumber));
+        this.maxDisplayedPages = this.state.pipe(map((s) => s.paging.maxDisplayedPages));
+        this.itemsPerPage = this.state.pipe(map((s) => s.paging.itemsPerPage));
+        this.itemCount = this.state.pipe(map((s) => {
+            return s.items;
+        }), scan((previousValue, newValue) => {
+            if (previousValue.lastUpdate > newValue.lastUpdate) {
+                return previousValue;
+            }
+            else {
+                return newValue;
+            }
+        }), map((result) => {
+            return result.count;
+        }), distinctUntilChanged());
+        // subscribe to or use inputs
+        getValue(this.pageSize, (pageSize) => this.dispatcher.next(new ListPagingSetItemsPerPageAction(Number(pageSize))));
+        getValue(this.maxPages, (maxPages) => this.dispatcher.next(new ListPagingSetMaxPagesAction(Number(maxPages))));
+        getValue(this.pageNumber, (pageNumber) => this.dispatcher.next(new ListPagingSetPageNumberAction(Number(pageNumber))));
+    }
+    pageChange(currentPage) {
+        // Paging must be updated after list data has been updated.
+        // Adding a setTimeout will pull it out of the stream.
+        setTimeout(() => {
+            this.dispatcher.next(new ListPagingSetPageNumberAction(Number(currentPage)));
+        });
+    }
+}
+SkyListPagingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListPagingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListPagingComponent, selector: "sky-list-paging", inputs: { pageSize: "pageSize", maxPages: "maxPages", pageNumber: "pageNumber" }, providers: [
+        { provide: ListPagingComponent, useExisting: listPagingComponentRef },
+    ], usesInheritance: true, ngImport: i0, template: "<sky-paging\n  [pageSize]=\"itemsPerPage | async\"\n  [maxPages]=\"maxDisplayedPages | async\"\n  [currentPage]=\"currentPageNumber | async\"\n  [itemCount]=\"itemCount | async\"\n  (currentPageChange)=\"pageChange($event)\"\n>\n</sky-paging>\n", components: [{ type: i3.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-paging', providers: [
+                        { provide: ListPagingComponent, useExisting: listPagingComponentRef },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: ListState }, { type: ListStateDispatcher }]; }, propDecorators: { pageSize: [{
+                type: Input
+            }], maxPages: [{
+                type: Input
+            }], pageNumber: [{
+                type: Input
+            }] } });
+
+class SkyListPagingModule {
+}
+SkyListPagingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListPagingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingModule, declarations: [SkyListPagingComponent], imports: [CommonModule, SkyPagingModule], exports: [SkyListPagingComponent] });
+SkyListPagingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingModule, imports: [[CommonModule, SkyPagingModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListPagingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SkyListPagingComponent],
+                    imports: [CommonModule, SkyPagingModule],
+                    exports: [SkyListPagingComponent],
+                }]
+        }] });
+
+/**
+ * NOTICE: DO NOT MODIFY THIS FILE!
+ * The contents of this file were automatically generated by
+ * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-list-builder' schematic.
+ * To update this file, simply rerun the command.
+ */
+const RESOURCES = {
+    'EN-US': {
+        skyux_list_show_secondary_actions_button: { message: 'More' },
+        skyux_list_multiselect_clear_all: { message: 'Clear all' },
+        skyux_list_mutliselect_select_all: { message: 'Select all' },
+        skyux_list_mutliselect_show_selected: {
+            message: 'Only show selected items',
+        },
+        skyux_list_view_switcher_dropdown_title: { message: 'Select view' },
+    },
+};
+class SkyListBuilderResourcesProvider {
+    getString(localeInfo, name) {
+        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
+    }
+}
+/**
+ * Import into any component library module that needs to use resource strings.
+ */
+class SkyListBuilderResourcesModule {
+}
+SkyListBuilderResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListBuilderResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListBuilderResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListBuilderResourcesModule, exports: [SkyI18nModule] });
+SkyListBuilderResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListBuilderResourcesModule, providers: [
+        {
+            provide: SKY_LIB_RESOURCES_PROVIDERS,
+            useClass: SkyListBuilderResourcesProvider,
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListBuilderResourcesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [SkyI18nModule],
+                    providers: [
+                        {
+                            provide: SKY_LIB_RESOURCES_PROVIDERS,
+                            useClass: SkyListBuilderResourcesProvider,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyListSecondaryActionsService {
+    constructor() {
+        this.secondaryActionsCount = 0;
+        this.secondaryActionsSubject = new BehaviorSubject(0);
+        this.actionsStream = new BehaviorSubject([]);
+        this.actions = [];
+    }
+    addSecondaryAction(action) {
+        this.secondaryActionsCount++;
+        this.secondaryActionsSubject.next(this.secondaryActionsCount);
+        this.actions.push(action);
+        this.actionsStream.next(this.actions);
+    }
+    removeSecondaryAction(action) {
+        this.secondaryActionsCount--;
+        this.secondaryActionsSubject.next(this.secondaryActionsCount);
+        this.actions = this.actions.filter((existingItem) => existingItem !== action);
+        this.actionsStream.next(this.actions);
+    }
+    ngOnDestroy() {
+        this.secondaryActionsSubject.complete();
+        this.actionsStream.complete();
+    }
+}
+SkyListSecondaryActionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyListSecondaryActionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Adds actions to the secondary actions dropdown in the list toolbar.
+ */
+class SkyListSecondaryActionComponent {
+    constructor(actionService) {
+        this.actionService = actionService;
+    }
+    ngAfterContentInit() {
+        this.actionService.addSecondaryAction({
+            template: this.templateRef,
+        });
+    }
+}
+SkyListSecondaryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionComponent, deps: [{ token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListSecondaryActionComponent, selector: "sky-list-secondary-action", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["listSecondaryAction"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-secondary-action', template: "<ng-template #listSecondaryAction>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: SkyListSecondaryActionsService }]; }, propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: ['listSecondaryAction', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+// Note: this component is needed to ensure any reactive styles placed in the element have
+// their host to be based off of. Without this component the host is not written via the dispatcher.
+/**
+ * @internal
+ */
+class SkyListSecondaryActionsHostComponent {
+    constructor(changeDetector, actionService) {
+        this.changeDetector = changeDetector;
+        this.actionService = actionService;
+        this.dropdownHidden = false;
+        this.actions = [];
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.actionService.actionsStream
+            .pipe(takeUntil(this.ngUnsubscribe), distinctUntilChanged())
+            .subscribe((actions) => {
+            const hasSecondaryActions = actions.length > 0;
+            this.dropdownHidden = !hasSecondaryActions;
+            this.actions = actions;
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+}
+SkyListSecondaryActionsHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionsHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host", ngImport: i0, template: "<div\n  class=\"sky-list-secondary-actions\"\n  [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n  <sky-dropdown\n    [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n    [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n  >\n    <sky-dropdown-button>\n      <sky-icon icon=\"ellipsis-h\"> </sky-icon>\n      <span class=\"sky-list-secondary-actions-btn-text\">\n        {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n      </span>\n    </sky-dropdown-button>\n    <sky-dropdown-menu>\n      <sky-dropdown-item *ngFor=\"let action of actions\">\n        <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n      </sky-dropdown-item>\n    </sky-dropdown-menu>\n  </sky-dropdown>\n</div>\n<ng-content> </ng-content>\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], components: [{ type: i2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "dismissOnBlur", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { type: i2.λ2, selector: "sky-dropdown-button" }, { type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { type: i2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsHostComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-secondary-actions-host', changeDetection: 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyListSecondaryActionsService }]; } });
+
+/**
+ * Adds a dropdown to the list toolbar for secondary actions. If the dropdown does not
+ * include actions, the secondary actions dropdown is hidden.
+ */
+class SkyListSecondaryActionsComponent {
+    constructor(dispatcher) {
+        this.dispatcher = dispatcher;
+        this.actions = [];
+        this.secondaryActionsItemToolbarIndex = 5000;
+    }
+    ngAfterViewInit() {
+        const secondaryActionItem = new ListToolbarItemModel({
+            id: 'secondary-actions',
+            template: this.secondaryActionsTemplate,
+            location: 'center',
+            index: this.secondaryActionsItemToolbarIndex,
+        });
+        this.dispatcher.toolbarAddItems([secondaryActionItem]);
+    }
+}
+SkyListSecondaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsComponent, deps: [{ token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListSecondaryActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListSecondaryActionsComponent, selector: "sky-list-secondary-actions", providers: [SkyListSecondaryActionsService], viewQueries: [{ propertyName: "secondaryActionsTemplate", first: true, predicate: ["secondaryActions"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #secondaryActions>\n  <sky-list-secondary-actions-host>\n    <ng-content></ng-content>\n  </sky-list-secondary-actions-host>\n</ng-template>\n", components: [{ type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-secondary-actions', providers: [SkyListSecondaryActionsService], changeDetection: 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" }]
+        }], ctorParameters: function () { return [{ type: ListStateDispatcher }]; }, propDecorators: { secondaryActionsTemplate: [{
+                type: ViewChild,
+                args: ['secondaryActions', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyListSecondaryActionsModule {
+}
+SkyListSecondaryActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListSecondaryActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsModule, declarations: [SkyListSecondaryActionsComponent,
+        SkyListSecondaryActionsHostComponent,
+        SkyListSecondaryActionComponent], imports: [CommonModule,
+        SkyDropdownModule,
+        SkyI18nModule,
+        SkyIconModule,
+        SkyListBuilderResourcesModule], exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent] });
+SkyListSecondaryActionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsModule, imports: [[
+            CommonModule,
+            SkyDropdownModule,
+            SkyI18nModule,
+            SkyIconModule,
+            SkyListBuilderResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListSecondaryActionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListSecondaryActionsComponent,
+                        SkyListSecondaryActionsHostComponent,
+                        SkyListSecondaryActionComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyDropdownModule,
+                        SkyI18nModule,
+                        SkyIconModule,
+                        SkyListBuilderResourcesModule,
+                    ],
+                    exports: [SkyListSecondaryActionsComponent, SkyListSecondaryActionComponent],
+                }]
+        }] });
+
+/**
+ * @internal
+ */
+class SkyListToolbarItemRendererComponent {
+    ngOnInit() {
+        if (this.template !== undefined) {
+            this.container.createEmbeddedView(this.template, this);
+        }
+    }
+}
+SkyListToolbarItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: { template: "template" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarItemRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-item-renderer',
+                    template: '<ng-template #container></ng-template>',
+                }]
+        }], propDecorators: { template: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', {
+                        read: ViewContainerRef,
+                        static: true,
+                    }]
+            }] } });
+
+let uniqueId = 0;
+/**
+ * @internal
+ */
+class SkyListMultiselectToolbarComponent {
+    constructor(state, dispatcher) {
+        this.state = state;
+        this.dispatcher = dispatcher;
+        this.showOnlySelected = false;
+        this.multiselectToolbarId = `sky-list-multiselect-toolbar-${uniqueId++}`;
+        this.selectedIdMap = new Map();
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.state
+            .pipe(map((t) => t.selected.item), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.selectedMapEqual))
+            .subscribe((model) => {
+            this.selectedIdMap = model.selectedIdMap;
+            if (this.showOnlySelected) {
+                this.reapplyFilter(true);
+            }
+        });
+        // If 'show-selected' filter is programatically set from a child component (e.g. checkilst),
+        // make sure the checked state of the 'show-selected' checkbox stays in sync.
+        this.state
+            .pipe(map((t) => t.filters), takeUntil(this.ngUnsubscribe), distinctUntilChanged(this.showSelectedValuesEqual))
+            .subscribe((filters) => {
+            const showSelectedFilter = filters.find((filter) => filter.name === 'show-selected');
+            if (showSelectedFilter) {
+                this.showOnlySelected = showSelectedFilter.value === 'true';
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    selectAll() {
+        this.state
+            .pipe(map((state) => state.items.items), take(1))
+            .subscribe((items) => {
+            this.dispatcher.setSelected(items.map((item) => item.id), true);
+            if (this.showOnlySelected) {
+                this.reapplyFilter(this.showOnlySelected);
+            }
+        });
+    }
+    clearSelections() {
+        this.state
+            .pipe(map((state) => state.items.items), take(1))
+            .subscribe((items) => {
+            this.dispatcher.setSelected(items.map((item) => item.id), false);
+            if (this.showOnlySelected) {
+                this.reapplyFilter(this.showOnlySelected);
+            }
+        });
+    }
+    changeVisibleItems(change) {
+        this.showOnlySelected = change.checked;
+        this.reapplyFilter(change.checked);
+    }
+    reapplyFilter(isSelected) {
+        this.state
+            .pipe(map((state) => state.filters), take(1))
+            .subscribe((filters) => {
+            filters = filters.filter((filter) => filter.name !== 'show-selected');
+            filters.push(this.getShowSelectedFilter(isSelected));
+            this.dispatcher.filtersUpdate(filters);
+        });
+        // If "show selected" is checked and paging is enabled, go to page one.
+        /* istanbul ignore else */
+        if (isSelected) {
+            this.state.pipe(take(1)).subscribe((currentState) => {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
+                    this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+                }
+            });
+        }
+        this.dispatcher.toolbarSetDisabled(isSelected);
+    }
+    getShowSelectedFilter(isSelected) {
+        return new ListFilterModel({
+            name: 'show-selected',
+            value: isSelected.toString(),
+            filterFunction: (model, showOnlySelected) => {
+                /* istanbul ignore else */
+                if (showOnlySelected.toString() !== false.toString()) {
+                    return this.selectedIdMap.get(model.id);
+                }
+            },
+            defaultValue: false.toString(),
+        });
+    }
+    showSelectedValuesEqual(prev, next) {
+        const prevShowSelectedFilter = prev.find((filter) => filter.name === 'show-selected');
+        const nextShowSelectedFilter = next.find((filter) => filter.name === 'show-selected');
+        // Both undefined.
+        if (!prevShowSelectedFilter && !nextShowSelectedFilter) {
+            return true;
+        }
+        // Only one undefined.
+        if ((prevShowSelectedFilter && !nextShowSelectedFilter) ||
+            (!prevShowSelectedFilter && nextShowSelectedFilter)) {
+            return false;
+        }
+        // Defined, but with different "value".
+        return prevShowSelectedFilter.value === nextShowSelectedFilter.value;
+    }
+    selectedMapEqual(prev, next) {
+        if (prev.selectedIdMap.size !== next.selectedIdMap.size) {
+            return false;
+        }
+        for (let i = 0; i < next.selectedIdMap.size; i++) {
+            const key = Array.from(next.selectedIdMap.keys())[i];
+            const value = next.selectedIdMap.get(key);
+            /* istanbul ignore next */
+            if (value !== prev.selectedIdMap.get(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+SkyListMultiselectToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListMultiselectToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n  <sky-toolbar-section>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-item>\n      <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n      </sky-list-toolbar-item-renderer>\n    </sky-toolbar-item>\n    <sky-toolbar-view-actions>\n      <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n    </sky-toolbar-view-actions>\n  </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-select-all'\"\n    (click)=\"selectAll(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_mutliselect_select_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n  <button\n    class=\"sky-btn sky-btn-link\"\n    type=\"button\"\n    [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n    (click)=\"clearSelections(); $event.preventDefault()\"\n  >\n    {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n  </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n  <sky-checkbox\n    [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n    [checked]=\"showOnlySelected\"\n    (change)=\"changeVisibleItems($event)\"\n  >\n    <sky-checkbox-label>\n      {{ 'skyux_list_mutliselect_show_selected' | skyLibResources }}\n    </sky-checkbox-label>\n  </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar +) .sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search +) .sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], components: [{ type: i3$2.λ37, selector: "sky-toolbar" }, { type: i3$2.λ38, selector: "sky-toolbar-section" }, { type: i3$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3$2.λ40, selector: "sky-toolbar-view-actions" }, { type: i5$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i5$1.λ4, selector: "sky-checkbox-label" }], directives: [{ type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i5.SkyLibResourcesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-multiselect-toolbar', 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: Input
+            }] } });
+
+let idIndex = 0;
+/**
+ * Defines a toolbar item for the list toolbar.
+ */
+class SkyListToolbarItemComponent {
+    constructor() {
+        /**
+         * Specifies the ID of the item.
+         */
+        this.id = `sky-list-toolbar-item-${++idIndex}`;
+        /**
+         * Specifies the index of the item at the given item location.
+         * @default -1
+         */
+        this.index = -1;
+        /**
+         * Specifies the toolbar location of the item. The valid options are `"left"`,
+         * `"center"`, and `"right"`.
+         * @default "left"
+         */
+        this.location = 'left';
+    }
+    get template() {
+        return this.templates.length > 0 ? this.templates.first : undefined;
+    }
+}
+SkyListToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarItemComponent, selector: "sky-list-toolbar-item", inputs: { id: "id", index: "index", location: "location" }, queries: [{ propertyName: "templates", predicate: TemplateRef }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-item',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], location: [{
+                type: Input
+            }], templates: [{
+                type: ContentChildren,
+                args: [TemplateRef]
+            }] } });
+
+/**
+ * Displays custom actions in the toolbar beside to the search bar.
+ */
+class SkyListToolbarSearchActionsComponent {
+}
+SkyListToolbarSearchActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarSearchActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarSearchActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarSearchActionsComponent, selector: "sky-list-toolbar-search-actions", ngImport: i0, template: "<div class=\"sky-list-toolbar-search-actions\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-list-toolbar-search-actions{margin-left:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarSearchActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-toolbar-search-actions', changeDetection: 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"] }]
+        }] });
+
+/**
+ * Adds a sort dropdown to the list toolbar.
+ */
+class SkyListToolbarSortComponent {
+}
+SkyListToolbarSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarSortComponent, selector: "sky-list-toolbar-sort", inputs: { label: "label", field: "field", type: "type", descending: "descending" }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-list-toolbar-sort',
+                    template: '',
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], field: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], descending: [{
+                type: Input
+            }] } });
+
+/**
+ * Adds a section on the right side of the toolbar for items that substantially change
+ * or affect the view of the list. This includes simple filters and view switchers.
+ * If the view section includes more than one item, simple filters appear on the left
+ * and view switchers appear on the right.
+ */
+class SkyListToolbarViewActionsComponent {
+}
+SkyListToolbarViewActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarViewActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarViewActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarViewActionsComponent, selector: "sky-list-toolbar-view-actions", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host::ng-deep>:not(:last-child){margin-right:5px}.sky-list-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarViewActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-toolbar-view-actions', template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host::ng-deep>:not(:last-child){margin-right:5px}.sky-list-toolbar-view-actions ::ng-deep>:not(:last-child){margin-right:5px}\n"] }]
+        }] });
+
+/**
+ * @internal
+ */
+class ListToolbarConfigSetSearchEnabledAction {
+    constructor(enabled) {
+        this.enabled = enabled;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarConfigSetSortSelectorEnabledAction {
+    /* istanbul ignore next */
+    constructor(enabled = true) {
+        this.enabled = enabled;
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarConfigModel {
+    constructor(data) {
+        this.searchEnabled = true;
+        this.sortSelectorEnabled = true;
+        if (data) {
+            this.searchEnabled = data.searchEnabled;
+            this.sortSelectorEnabled = data.sortSelectorEnabled;
+        }
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarStateModel {
+    constructor() {
+        this.config = new ListToolbarConfigModel();
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarStateDispatcher extends StateDispatcher {
+}
+ListToolbarStateDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarStateDispatcher, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+ListToolbarStateDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarStateDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarStateDispatcher, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @internal
+ */
+class ListToolbarStateOrchestrator extends StateOrchestrator {
+}
+
+/**
+ * @internal
+ */
+class ListToolbarConfigOrchestrator extends ListToolbarStateOrchestrator {
+    /* istanbul ignore next */
+    constructor() {
+        super();
+        this.register(ListToolbarConfigSetSearchEnabledAction, this.setSearchEnabled).register(ListToolbarConfigSetSortSelectorEnabledAction, this.setSortSelectorEnabled);
+    }
+    setSearchEnabled(state, action) {
+        return new ListToolbarConfigModel(Object.assign({}, state, { searchEnabled: action.enabled }));
+    }
+    setSortSelectorEnabled(state, action) {
+        return new ListToolbarConfigModel(Object.assign({}, state, { sortSelectorEnabled: action.enabled }));
+    }
+}
+
+/**
+ * @internal
+ */
+class ListToolbarState extends StateNode {
+    constructor(initialState, dispatcher) {
+        super(initialState, dispatcher);
+        this.register('config', ListToolbarConfigOrchestrator).begin();
+    }
+}
+ListToolbarState.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarState, deps: [{ token: ListToolbarStateModel }, { token: ListToolbarStateDispatcher }], target: i0.ɵɵFactoryTarget.Injectable });
+ListToolbarState.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarState });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListToolbarState, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ListToolbarStateModel }, { type: ListToolbarStateDispatcher }]; } });
+
+let nextId = 0;
+/**
+ * Displays a toolbar for a SKY UX-themed list of data.
+ */
+class SkyListToolbarComponent {
+    constructor(changeDetector, state, dispatcher, toolbarState, toolbarDispatcher) {
+        this.changeDetector = changeDetector;
+        this.state = state;
+        this.dispatcher = dispatcher;
+        this.toolbarState = toolbarState;
+        this.toolbarDispatcher = toolbarDispatcher;
+        /**
+         * 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"
+         */
+        this.toolbarType = 'standard';
+        this.isToolbarDisabled = false;
+        this.inlineFilterBarExpanded = false;
+        this.hasAdditionalToolbarSection = false;
+        this.hasViewActions = false;
+        this.filterButtonId = `sky-list-toolbar-filter-button-${++nextId}`;
+        this.listFilterInlineId = `sky-list-toolbar-filter-inline-${++nextId}`;
+        /**
+         * Fires when users submit a search.
+         * @internal
+         */
+        this.searchApplied = new Subject();
+        this.customItemIds = [];
+        this.hasSortSelectors = false;
+        this.inlineFiltersItemToolbarIndex = 5000;
+        this.sortSelectorItemToolbarIndex = 6000;
+        this.ngUnsubscribe = new Subject();
+    }
+    /**
+     * Indicates whether to use the in-memory search.
+     * Setting this to `false` will allow consumers to run their own searches remotely,
+     * and push new values to the list component by updating the `data` property.
+     * @default true
+     * @internal
+     */
+    set inMemorySearchEnabled(value) {
+        this._inMemorySearchEnabled = value;
+    }
+    get inMemorySearchEnabled() {
+        if (this._inMemorySearchEnabled === undefined) {
+            return true;
+        }
+        return this._inMemorySearchEnabled;
+    }
+    get isFilterBarDisplayed() {
+        return (!this.isToolbarDisabled &&
+            this.hasInlineFilters &&
+            this.inlineFilterBarExpanded);
+    }
+    get filterButtonAriaControls() {
+        return this.isFilterBarDisplayed ? this.listFilterInlineId : undefined;
+    }
+    ngOnInit() {
+        this.dispatcher.toolbarExists(true);
+        getValue(this.searchText, (searchText) => {
+            this.updateSearchText(searchText);
+        });
+        getValue(this.searchEnabled, (searchEnabled) => {
+            this.toolbarDispatcher.next(new ListToolbarConfigSetSearchEnabledAction(searchEnabled === undefined ? true : searchEnabled));
+        });
+        getValue(this.toolbarType, (type) => {
+            this.dispatcher.next(new ListToolbarSetTypeAction(this.toolbarType));
+        });
+        getValue(this.sortSelectorEnabled, (sortSelectorEnabled) => {
+            this.toolbarDispatcher.next(new ListToolbarConfigSetSortSelectorEnabledAction(sortSelectorEnabled === undefined ? true : sortSelectorEnabled));
+        });
+        this.sortSelectors = this.getSortSelectors();
+        // Initialize the sort toolbar item if necessary
+        this.sortSelectors
+            .pipe(takeUntil(this.ngUnsubscribe), distinctUntilChanged())
+            .subscribe((currentSort) => {
+            if (currentSort.length > 0 && !this.hasSortSelectors) {
+                this.hasSortSelectors = true;
+                this.dispatcher.toolbarAddItems([
+                    new ListToolbarItemModel({
+                        id: 'sort-selector',
+                        template: this.sortSelectorTemplate,
+                        location: 'left',
+                        index: this.sortSelectorItemToolbarIndex,
+                    }),
+                ]);
+            }
+            else if (currentSort.length < 1 && this.hasSortSelectors) {
+                this.hasSortSelectors = false;
+                this.dispatcher.toolbarRemoveItems(['sort-selector']);
+            }
+        });
+        this.searchTextInput = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.search.searchText), distinctUntilChanged());
+        this.view = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.views.active), distinctUntilChanged());
+        this.watchTemplates();
+        this.type = this.state.pipe(takeUntil(this.ngUnsubscribe), map((state) => state.toolbar.type), distinctUntilChanged());
+        this.type.pipe(takeUntil(this.ngUnsubscribe)).subscribe((toolbarType) => {
+            if (toolbarType === 'search') {
+                this.dispatcher.toolbarRemoveItems(['search']);
+            }
+            else {
+                this.dispatcher.toolbarAddItems([
+                    new ListToolbarItemModel({
+                        id: 'search',
+                        template: this.searchTemplate,
+                        location: 'right',
+                    }),
+                ]);
+            }
+        });
+        this.isSearchEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.config), distinctUntilChanged(), map((c) => c.searchEnabled));
+        this.state
+            .pipe(map((s) => s.toolbar), takeUntil(this.ngUnsubscribe), distinctUntilChanged(), map((c) => c.disabled))
+            .subscribe((isDisabled) => (this.isToolbarDisabled = isDisabled));
+        this.isSortSelectorEnabled = this.toolbarState.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.config), distinctUntilChanged(), map((c) => c.sortSelectorEnabled));
+        this.isMultiselectEnabled = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.toolbar), distinctUntilChanged(), map((t) => t.showMultiselectToolbar));
+        this.hasAppliedFilters = this.state.pipe(takeUntil(this.ngUnsubscribe), map((s) => s.filters), distinctUntilChanged(), map((filters) => {
+            const activeFilters = filters.filter((f) => {
+                return (f.value !== '' &&
+                    f.value !== undefined &&
+                    f.value !== false &&
+                    f.value !== f.defaultValue);
+            });
+            return activeFilters.length > 0;
+        }));
+        this.state.pipe(takeUntil(this.ngUnsubscribe)).subscribe((current) => {
+            this.hasAdditionalToolbarSection = current.toolbar.items.length > 0;
+            this.changeDetector.detectChanges();
+        });
+    }
+    ngAfterContentInit() {
+        // Inject custom toolbar items.
+        this.toolbarItems.forEach((toolbarItem) => {
+            this.dispatcher.toolbarAddItems([new ListToolbarItemModel(toolbarItem)]);
+            this.customItemIds.push(toolbarItem.id);
+        });
+        this.toolbarItems.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((newItems) => {
+            newItems.forEach((item) => {
+                if (this.customItemIds.indexOf(item.id) < 0) {
+                    this.dispatcher.toolbarAddItems([new ListToolbarItemModel(item)]);
+                    this.customItemIds.push(item.id);
+                }
+            });
+            const itemsToRemove = [];
+            this.customItemIds.forEach((itemId, index) => {
+                if (!newItems.find((item) => item.id === itemId)) {
+                    itemsToRemove.push(itemId);
+                    this.customItemIds.splice(index, 1);
+                }
+            });
+            this.dispatcher.toolbarRemoveItems(itemsToRemove);
+        });
+        const sortModels = this.toolbarSorts.map((sort) => new ListSortLabelModel({
+            text: sort.label,
+            fieldSelector: sort.field,
+            fieldType: sort.type,
+            global: true,
+            descending: sort.descending,
+        }));
+        this.dispatcher.sortSetGlobal(sortModels);
+        // Add inline filters.
+        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,
+                }),
+            ]);
+        }
+        // Check for view actions
+        this.hasViewActions = this.viewActions.length > 0;
+    }
+    ngOnDestroy() {
+        this.searchApplied.complete();
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    setSort(sort) {
+        this.state.pipe(take(1)).subscribe((currentState) => {
+            if (currentState.paging.pageNumber &&
+                currentState.paging.pageNumber !== 1) {
+                this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+            }
+            this.dispatcher.sortSetFieldSelectors([
+                { fieldSelector: sort.fieldSelector, descending: sort.descending },
+            ]);
+        });
+    }
+    inlineFilterButtonClick() {
+        this.inlineFilterBarExpanded = !this.inlineFilterBarExpanded;
+    }
+    updateSearchText(searchText) {
+        this.searchApplied.next(searchText);
+        if (this.inMemorySearchEnabled) {
+            this.state.pipe(take(1)).subscribe((currentState) => {
+                if (currentState.paging.pageNumber &&
+                    currentState.paging.pageNumber !== 1) {
+                    this.dispatcher.next(new ListPagingSetPageNumberAction(Number(1)));
+                }
+                this.dispatcher.searchSetText(searchText);
+            });
+        }
+    }
+    itemIsInView(itemView, activeView) {
+        return itemView === undefined || itemView === activeView;
+    }
+    getSortSelectors() {
+        return combineLatest(this.state.pipe(map((s) => s.sort.available), distinctUntilChanged()), this.state.pipe(map((s) => s.sort.global), distinctUntilChanged()), this.state.pipe(map((s) => s.sort.fieldSelectors), distinctUntilChanged()), (available, global, fieldSelectors) => {
+            // Get sorts that are in the global that are not in the available
+            const sorts = global.filter((g) => available.filter((a) => a.fieldSelector === g.fieldSelector)
+                .length === 0);
+            const resultSortSelectors = [...sorts, ...available].map((sortLabels) => {
+                const fs = fieldSelectors.filter((f) => {
+                    return (f.fieldSelector === sortLabels.fieldSelector &&
+                        f.descending === sortLabels.descending);
+                });
+                let selected = false;
+                if (fs.length > 0) {
+                    selected = true;
+                }
+                return {
+                    sort: sortLabels,
+                    selected: selected,
+                };
+            });
+            return resultSortSelectors;
+        }).pipe(takeUntil(this.ngUnsubscribe));
+    }
+    watchTemplates() {
+        combineLatest(this.state.pipe(map((s) => s.toolbar), distinctUntilChanged()), this.view.pipe(distinctUntilChanged()), (toolbar, view) => {
+            const items = toolbar.items.filter((i) => {
+                return this.itemIsInView(i.view, view);
+            });
+            const templates = {};
+            items.forEach((item) => {
+                templates[item.location] = templates[item.location] || [];
+                templates[item.location].push(item);
+            });
+            return templates;
+        })
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((value) => {
+            this.leftTemplates = value.left;
+            this.centerTemplates = value.center;
+            this.rightTemplates = value.right;
+            this.changeDetector.markForCheck();
+        });
+    }
+}
+SkyListToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ListState }, { token: ListStateDispatcher }, { token: ListToolbarState }, { token: ListToolbarStateDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+SkyListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SkyListToolbarComponent, selector: "sky-list-toolbar", inputs: { inMemorySearchEnabled: "inMemorySearchEnabled", placeholder: "placeholder", searchEnabled: "searchEnabled", sortSelectorEnabled: "sortSelectorEnabled", toolbarType: "toolbarType", searchText: "searchText" }, providers: [
+        ListToolbarState,
+        ListToolbarStateDispatcher,
+        ListToolbarStateModel,
+    ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: SkySearchComponent, descendants: true, read: SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-list-toolbar-container\">\n  <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n    <sky-toolbar-section>\n      <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n      <sky-toolbar-item\n        *ngFor=\"let item of rightTemplates\"\n        [attr.sky-toolbar-id]=\"item.id\"\n      >\n        <sky-list-toolbar-item-renderer\n          [attr.sky-cmp-id]=\"item.id\"\n          [template]=\"item.template\"\n        >\n        </sky-list-toolbar-item-renderer>\n      </sky-toolbar-item>\n\n      <ng-content></ng-content>\n\n      <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n        <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n      </sky-toolbar-view-actions>\n    </sky-toolbar-section>\n\n    <sky-toolbar-section\n      *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n    >\n      <ng-content select=\"sky-list-filter-summary\"> </ng-content>\n    </sky-toolbar-section>\n  </sky-toolbar>\n\n  <div\n    *ngIf=\"\n      (type | async) === 'search' &&\n      ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n    \"\n    class=\"sky-list-toolbar-search\"\n  >\n    <sky-toolbar>\n      <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n        <sky-toolbar-item>\n          <sky-list-toolbar-item-renderer\n            sky-cmp-id=\"search\"\n            [template]=\"search\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n      </sky-toolbar-section>\n      <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n        <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n          <sky-list-toolbar-item-renderer\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <sky-toolbar-item\n          *ngFor=\"let item of rightTemplates\"\n          [attr.sky-toolbar-id]=\"item.id\"\n        >\n          <sky-list-toolbar-item-renderer\n            *ngIf=\"item.id !== 'search'\"\n            [attr.sky-cmp-id]=\"item.id\"\n            [template]=\"item.template\"\n          >\n          </sky-list-toolbar-item-renderer>\n        </sky-toolbar-item>\n        <ng-content></ng-content>\n\n        <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n          <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\n        </sky-toolbar-view-actions>\n      </sky-toolbar-section>\n    </sky-toolbar>\n  </div>\n  <div\n    *ngIf=\"isFilterBarDisplayed\"\n    [attr.aria-labelledby]=\"filterButtonId\"\n    [id]=\"listFilterInlineId\"\n  >\n    <ng-content select=\"sky-list-filter-inline\"> </ng-content>\n  </div>\n  <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n  </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n  <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n    <sky-search\n      [disabled]=\"isToolbarDisabled\"\n      [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n      [placeholderText]=\"placeholder\"\n      [searchText]=\"searchTextInput | async\"\n      (searchApply)=\"updateSearchText($event)\"\n    >\n    </sky-search>\n    <ng-content select=\"sky-list-toolbar-search-actions\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #sortSelector>\n  <div\n    *ngIf=\"\n      (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n    \"\n    class=\"sky-toolbar-item-sort-container\"\n  >\n    <sky-sort [showButtonText]=\"true\">\n      <sky-sort-item\n        *ngFor=\"let item of sortSelectors | async\"\n        [active]=\"item.selected\"\n        (itemSelect)=\"setSort(item.sort)\"\n      >\n        {{ item.sort.text }}\n      </sky-sort-item>\n    </sky-sort>\n  </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n  <sky-filter-button\n    [active]=\"hasAppliedFilters | async\"\n    [ariaControls]=\"filterButtonAriaControls\"\n    [ariaExpanded]=\"inlineFilterBarExpanded\"\n    [disabled]=\"isToolbarDisabled\"\n    [filterButtonId]=\"filterButtonId\"\n    [showButtonText]=\"true\"\n    (filterButtonClick)=\"inlineFilterButtonClick()\"\n  >\n  </sky-filter-button>\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], components: [{ type: i3$2.λ37, selector: "sky-toolbar" }, { type: i3$2.λ38, selector: "sky-toolbar-section" }, { type: i3$2.λ39, selector: "sky-toolbar-item" }, { type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { type: i3$2.λ40, selector: "sky-toolbar-view-actions" }, { type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { type: i3.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { type: i3.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { type: i3.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-list-toolbar', providers: [
+                        ListToolbarState,
+                        ListToolbarStateDispatcher,
+                        ListToolbarStateModel,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }]; }, propDecorators: { inMemorySearchEnabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], searchEnabled: [{
+                type: Input
+            }], searchComponent: [{
+                type: ViewChild,
+                args: [SkySearchComponent, {
+                        read: SkySearchComponent,
+                        static: false,
+                    }]
+            }], sortSelectorEnabled: [{
+                type: Input
+            }], toolbarType: [{
+                type: Input
+            }], searchText: [{
+                type: Input
+            }], toolbarItems: [{
+                type: ContentChildren,
+                args: [SkyListToolbarItemComponent]
+            }], toolbarSorts: [{
+                type: ContentChildren,
+                args: [SkyListToolbarSortComponent]
+            }], filterSummary: [{
+                type: ContentChildren,
+                args: [SkyListFilterSummaryComponent]
+            }], inlineFilter: [{
+                type: ContentChildren,
+                args: [SkyListFilterInlineComponent]
+            }], viewActions: [{
+                type: ContentChildren,
+                args: [SkyListToolbarViewActionsComponent]
+            }], searchTemplate: [{
+                type: ViewChild,
+                args: ['search', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], sortSelectorTemplate: [{
+                type: ViewChild,
+                args: ['sortSelector', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }], inlineFilterButtonTemplate: [{
+                type: ViewChild,
+                args: ['inlineFilterButton', {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+class SkyListToolbarModule {
+}
+SkyListToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyListToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarModule, declarations: [SkyListToolbarComponent,
+        SkyListToolbarItemComponent,
+        SkyListToolbarItemRendererComponent,
+        SkyListMultiselectToolbarComponent,
+        SkyListToolbarSearchActionsComponent,
+        SkyListToolbarSortComponent,
+        SkyListToolbarViewActionsComponent], imports: [CommonModule,
+        SkyCheckboxModule,
+        SkyI18nModule,
+        SkyToolbarModule,
+        SkySearchModule,
+        SkySortModule,
+        SkyFilterModule,
+        SkyListFiltersModule,
+        SkyIconModule,
+        SkyListBuilderResourcesModule], exports: [SkyListToolbarComponent,
+        SkyListToolbarItemComponent,
+        SkyListToolbarSearchActionsComponent,
+        SkyListToolbarSortComponent,
+        SkyListToolbarViewActionsComponent] });
+SkyListToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarModule, imports: [[
+            CommonModule,
+            SkyCheckboxModule,
+            SkyI18nModule,
+            SkyToolbarModule,
+            SkySearchModule,
+            SkySortModule,
+            SkyFilterModule,
+            SkyListFiltersModule,
+            SkyIconModule,
+            SkyListBuilderResourcesModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SkyListToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SkyListToolbarComponent,
+                        SkyListToolbarItemComponent,
+                        SkyListToolbarItemRendererComponent,
+                        SkyListMultiselectToolbarComponent,
+                        SkyListToolbarSearchActionsComponent,
+                        SkyListToolbarSortComponent,
+                        SkyListToolbarViewActionsComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        SkyCheckboxModule,
+                        SkyI18nModule,
+                        SkyToolbarModule,
+                        SkySearchModule,
+                        SkySortModule,
+                        SkyFilterModule,
+                        SkyListFiltersModule,
+                        SkyIconModule,
+                        SkyListBuilderResourcesModule,
+                    ],
+                    exports: [
+                        SkyListToolbarComponent,
+                        SkyListToolbarItemComponent,
+                        SkyListToolbarSearchActionsComponent,
+                        SkyListToolbarSortComponent,
+                        SkyListToolbarViewActionsComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ListDataProvider, ListDataRequestModel, ListDataResponseModel, ListFilterModel, ListFiltersOrchestrator, ListFiltersUpdateAction, ListItemsLoadAction, ListItemsOrchestrator, ListItemsSetLoadingAction, ListItemsSetSelectedAction, ListPagingModel, ListPagingOrchestrator, ListPagingSetItemsPerPageAction, ListPagingSetMaxPagesAction, ListPagingSetPageNumberAction, ListSearchModel, ListSearchOrchestrator, ListSearchSetFieldSelectorsAction, ListSearchSetFunctionsAction, ListSearchSetOptionsAction, ListSearchSetSearchTextAction, ListSelectedLoadAction, ListSelectedModel, ListSelectedOrchestrator, ListSelectedSetItemSelectedAction, ListSelectedSetItemsSelectedAction, ListSelectedSetLoadingAction, ListSortLabelModel, ListSortModel, ListSortOrchestrator, ListSortSetAvailableAction, ListSortSetFieldSelectorsAction, ListSortSetGlobalAction, ListState, ListStateDispatcher, ListStateModel, ListStateOrchestrator, ListToolbarItemModel, ListToolbarItemsDisableAction, ListToolbarItemsLoadAction, ListToolbarItemsRemoveAction, ListToolbarModel, ListToolbarOrchestrator, ListToolbarSetExistsAction, ListToolbarSetTypeAction, ListToolbarShowMultiselectToolbarAction, ListViewComponent, ListViewModel, ListViewsLoadAction, ListViewsModel, ListViewsOrchestrator, ListViewsSetActiveAction, SkyListComponent, SkyListFilterInlineModel, SkyListFiltersModule, SkyListInMemoryDataProvider, SkyListModule, SkyListPagingModule, SkyListSecondaryActionsComponent, SkyListSecondaryActionsModule, SkyListToolbarComponent, SkyListToolbarModule, SkyListFilterButtonComponent as λ1, SkyListToolbarViewActionsComponent as λ10, SkyListToolbarSearchActionsComponent as λ11, SkyListFilterSummaryComponent as λ2, SkyListFilterInlineItemComponent as λ3, SkyListFilterInlineComponent as λ4, SkyListPagingComponent as λ5, SkyListSecondaryActionComponent as λ6, SkyListSecondaryActionsComponent as λ7, SkyListToolbarItemComponent as λ8, SkyListToolbarSortComponent as λ9 };
+//# sourceMappingURL=skyux-list-builder.mjs.map