@internetarchive/collection-browser 2.4.1-e2e-test-2 → 2.5.0

package/dist/src/collection-facets/more-facets-content.js

@@ -1,261 +1,308 @@
-import { __decorate } from "tslib";
-/* eslint-disable dot-notation */
-/* eslint-disable lit-a11y/click-events-have-key-events */
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { AggregationSortType, } from '@internetarchive/search-service';
-import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, } from '../models';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './more-facets-pagination';
-import './facets-template';
-import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
-import './toggle-switch';
-import { srOnlyStyle } from '../styles/sr-only';
-let MoreFacetsContent = class MoreFacetsContent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortedBy = AggregationSortType.COUNT;
-        this.facetGroup = [];
-        this.facetGroupTitle = '';
-        this.pageNumber = 1;
-        /**
-         * Facets are loading on popup
-         */
-        this.facetsLoading = true;
-        this.paginationSize = 0;
-        this.facetsType = 'modal';
-        this.facetsPerPage = 35;
-    }
-    updated(changed) {
-        if (changed.has('facetKey') ||
-            changed.has('facetAggregationKey') ||
-            changed.has('query') ||
-            changed.has('searchType') ||
-            changed.has('filterMap')) {
-            this.facetsLoading = true;
-            this.pageNumber = 1;
-            this.sortedBy = defaultFacetSort[this.facetKey];
-            this.updateSpecificFacets();
-        }
-        if (changed.has('pageNumber')) {
-            this.facetGroup = this.aggregationFacetGroups;
-        }
-    }
-    firstUpdated() {
-        this.setupEscapeListeners();
-    }
-    /**
-     * Close more facets modal on Escape click
-     */
-    setupEscapeListeners() {
-        if (this.modalManager) {
-            document.addEventListener('keydown', (e) => {
-                var _a;
-                if (e.key === 'Escape') {
-                    (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
-                }
-            });
-        }
-        else {
-            document.removeEventListener('keydown', () => { });
-        }
-    }
-    /**
-     * Whether facet requests are for the search_results page type (either defaulted or explicitly).
-     */
-    get isSearchResultsPage() {
-        var _a;
-        // Default page type is search_results when none is specified, so we check
-        // for undefined as well.
-        const pageType = (_a = this.pageSpecifierParams) === null || _a === void 0 ? void 0 : _a.pageType;
-        return pageType === undefined || pageType === 'search_results';
-    }
-    /**
-     * Get specific facets data from search-service API based of currently query params
-     * - this.aggregations - hold result of search service and being used for further processing.
-     */
-    async updateSpecificFacets() {
-        var _a, _b, _c, _d, _e, _f;
-        const trimmedQuery = (_a = this.query) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!trimmedQuery && this.isSearchResultsPage)
-            return; // The search page _requires_ a query
-        const aggregations = {
-            simpleParams: [this.facetAggregationKey],
-        };
-        const aggregationsSize = 65535; // todo - do we want to have all the records at once?
-        const params = {
-            ...this.pageSpecifierParams,
-            query: trimmedQuery || '',
-            filters: this.filterMap,
-            aggregations,
-            aggregationsSize,
-            rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
-        };
-        const results = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
-        this.aggregations = (_c = results === null || results === void 0 ? void 0 : results.success) === null || _c === void 0 ? void 0 : _c.response.aggregations;
-        this.facetGroup = this.aggregationFacetGroups;
-        this.facetsLoading = false;
-        const collectionTitles = (_e = (_d = results === null || results === void 0 ? void 0 : results.success) === null || _d === void 0 ? void 0 : _d.response) === null || _e === void 0 ? void 0 : _e.collectionTitles;
-        if (collectionTitles) {
-            for (const [id, title] of Object.entries(collectionTitles)) {
-                (_f = this.collectionTitles) === null || _f === void 0 ? void 0 : _f.set(id, title);
-            }
-        }
-    }
-    pageNumberClicked(e) {
-        var _a, _b;
-        const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
-        if (page) {
-            this.pageNumber = Number(page);
-        }
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.moreFacetsPageChange,
-            label: `${this.pageNumber}`,
-        });
-    }
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    get mergedFacets() {
-        var _a;
-        const facetGroups = [];
-        const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
-        const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
-        // if the user selected a facet, but it's not in the aggregation, we add it as-is
-        if (selectedFacetGroup && !aggregateFacetGroup) {
-            facetGroups.push(selectedFacetGroup);
-            return facetGroups;
-        }
-        // if we don't have an aggregate facet group, don't add this to the list
-        if (!aggregateFacetGroup)
-            return facetGroups;
-        // start with either the selected group if we have one, or the aggregate group
-        const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
-        // attach the counts to the selected buckets
-        const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
-            const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
-            return selectedBucket
-                ? {
-                    ...bucket,
-                    count: selectedBucket.count,
-                }
-                : bucket;
-        })) !== null && _a !== void 0 ? _a : [];
-        // append any additional buckets that were not selected
-        aggregateFacetGroup.buckets.forEach(bucket => {
-            const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
-            if (existingBucket)
-                return;
-            bucketsWithCount.push(bucket);
-        });
-        facetGroup.buckets = bucketsWithCount;
-        facetGroups.push(facetGroup);
-        return facetGroups;
-    }
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    get selectedFacetGroups() {
-        if (!this.selectedFacets)
-            return [];
-        const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
-            const option = key;
-            const title = facetTitles[option];
-            const buckets = Object.entries(selectedFacets).map(([value, data]) => {
-                const displayText = value;
-                return {
-                    displayText,
-                    key: value,
-                    count: data === null || data === void 0 ? void 0 : data.count,
-                    state: data === null || data === void 0 ? void 0 : data.state,
-                };
-            });
-            return {
-                title,
-                key: option,
-                buckets,
-            };
-        });
-        return facetGroups;
-    }
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    get aggregationFacetGroups() {
-        var _a;
-        const facetGroups = [];
-        Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, aggregation]) => {
-            // the year_histogram data is in a different format so can't be handled here
-            if (key === 'year_histogram')
-                return;
-            const option = key;
-            this.facetGroupTitle = facetTitles[option];
-            // sort facets in specific order
-            let castedBuckets = aggregation.getSortedBuckets(this.sortedBy);
-            if (option === 'collection') {
-                // we are not showing fav- collections or certain deemphasized collections in facets
-                castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => {
-                    var _a;
-                    const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
-                    return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
-                });
-            }
-            // find length and pagination size for modal pagination
-            const { length } = Object.keys(castedBuckets);
-            this.paginationSize = Math.ceil(length / this.facetsPerPage);
-            // render only items which will be visible as per this.facetsPerPage
-            const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
-            const facetBucket = bucketsMaxSix.map(bucket => {
-                const bucketKey = bucket.key;
-                return {
-                    displayText: `${bucket.key}`,
-                    key: `${bucketKey}`,
-                    count: bucket.doc_count,
-                    state: 'none',
-                };
-            });
-            const group = {
-                title: this.facetGroupTitle,
-                key: option,
-                buckets: facetBucket,
-            };
-            facetGroups.push(group);
-        });
-        return facetGroups;
-    }
-    get getMoreFacetsTemplate() {
-        var _a;
+import { __decorate } from "tslib";
+/* eslint-disable dot-notation */
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AggregationSortType, } from '@internetarchive/search-service';
+import { msg } from '@lit/localize';
+import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, } from '../models';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
+import './toggle-switch';
+import { srOnlyStyle } from '../styles/sr-only';
+import { mergeSelectedFacets, sortBucketsBySelectionState, updateSelectedFacetBucket, } from '../utils/facet-utils';
+let MoreFacetsContent = class MoreFacetsContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Maximum number of facets to show per page within the modal.
+         */
+        this.facetsPerPage = 35;
+        /**
+         * Whether we are waiting for facet data to load.
+         * We begin with this set to true so that we show an initial loading indicator.
+         */
+        this.facetsLoading = true;
+        this.sortedBy = AggregationSortType.COUNT;
+        /**
+         * An object holding any changes the patron has made to their facet selections
+         * within the modal dialog but which they have not yet applied. These are
+         * eventually merged into the existing `selectedFacets` when the patron applies
+         * their changes, or discarded if they cancel/close the dialog.
+         */
+        this.unappliedFacetChanges = getDefaultSelectedFacets();
+        /**
+         * Which page of facets we are showing.
+         */
+        this.pageNumber = 1;
+    }
+    willUpdate(changed) {
+        if (changed.has('aggregations') ||
+            changed.has('facetsPerPage') ||
+            changed.has('sortedBy') ||
+            changed.has('selectedFacets') ||
+            changed.has('unappliedFacetChanges')) {
+            // Convert the merged selected facets & aggregations into a facet group, and
+            // store it for reuse across pages.
+            this.facetGroup = this.mergedFacets;
+        }
+    }
+    updated(changed) {
+        // If any of the search properties change, it triggers a facet fetch
+        if (changed.has('facetKey') ||
+            changed.has('query') ||
+            changed.has('searchType') ||
+            changed.has('filterMap')) {
+            this.facetsLoading = true;
+            this.pageNumber = 1;
+            this.sortedBy = defaultFacetSort[this.facetKey];
+            this.updateSpecificFacets();
+        }
+    }
+    firstUpdated() {
+        this.setupEscapeListeners();
+    }
+    /**
+     * Close more facets modal on Escape click
+     */
+    setupEscapeListeners() {
+        if (this.modalManager) {
+            document.addEventListener('keydown', (e) => {
+                var _a;
+                if (e.key === 'Escape') {
+                    (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+                }
+            });
+        }
+        else {
+            document.removeEventListener('keydown', () => { });
+        }
+    }
+    /**
+     * Whether facet requests are for the search_results page type (either defaulted or explicitly).
+     */
+    get isSearchResultsPage() {
+        var _a;
+        // Default page type is search_results when none is specified, so we check
+        // for undefined as well.
+        const pageType = (_a = this.pageSpecifierParams) === null || _a === void 0 ? void 0 : _a.pageType;
+        return pageType === undefined || pageType === 'search_results';
+    }
+    /**
+     * Get specific facets data from search-service API based of currently query params
+     * - this.aggregations - hold result of search service and being used for further processing.
+     */
+    async updateSpecificFacets() {
+        var _a, _b, _c, _d, _e, _f;
+        if (!this.facetKey)
+            return; // Can't fetch facets if we don't know what type of facets we need!
+        const trimmedQuery = (_a = this.query) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!trimmedQuery && this.isSearchResultsPage)
+            return; // The search page _requires_ a query
+        const aggregations = {
+            simpleParams: [this.facetKey],
+        };
+        const aggregationsSize = 65535; // todo - do we want to have all the records at once?
+        const params = {
+            ...this.pageSpecifierParams,
+            query: trimmedQuery || '',
+            filters: this.filterMap,
+            aggregations,
+            aggregationsSize,
+            rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
+        };
+        const results = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
+        this.aggregations = (_c = results === null || results === void 0 ? void 0 : results.success) === null || _c === void 0 ? void 0 : _c.response.aggregations;
+        this.facetsLoading = false;
+        const collectionTitles = (_e = (_d = results === null || results === void 0 ? void 0 : results.success) === null || _d === void 0 ? void 0 : _d.response) === null || _e === void 0 ? void 0 : _e.collectionTitles;
+        if (collectionTitles) {
+            for (const [id, title] of Object.entries(collectionTitles)) {
+                (_f = this.collectionTitles) === null || _f === void 0 ? void 0 : _f.set(id, title);
+            }
+        }
+    }
+    /**
+     * Handler for page number changes from the pagination widget.
+     */
+    pageNumberClicked(e) {
+        var _a, _b;
+        const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
+        if (page) {
+            this.pageNumber = Number(page);
+        }
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+            category: analyticsCategories.default,
+            action: analyticsActions.moreFacetsPageChange,
+            label: `${this.pageNumber}`,
+        });
+    }
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    get mergedFacets() {
+        var _a;
+        if (!this.facetKey || !this.selectedFacets)
+            return undefined;
+        const { selectedFacetGroup, aggregationFacetGroup } = this;
+        const unappliedFacetBuckets = Object.values(this.unappliedFacetChanges[this.facetKey]);
+        // If we don't have any aggregations, then there is nothing to show yet
+        if (!aggregationFacetGroup)
+            return undefined;
+        // Start with either the selected group if we have one, or the aggregate group otherwise
+        const facetGroup = { ...(selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregationFacetGroup) };
+        // Attach the counts to the selected buckets
+        const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
+            const selectedBucket = aggregationFacetGroup.buckets.find(b => b.key === bucket.key);
+            return selectedBucket
+                ? {
+                    ...bucket,
+                    count: selectedBucket.count,
+                }
+                : bucket;
+        })) !== null && _a !== void 0 ? _a : [];
+        // Sort the buckets by selection state
+        // We do this *prior* to considering unapplied selections, because we want the facets
+        // to remain in position when they are selected/unselected, rather than re-sort themselves.
+        sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);
+        // Append any additional buckets that were not selected
+        aggregationFacetGroup.buckets.forEach(bucket => {
+            const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
+            if (existingBucket)
+                return;
+            bucketsWithCount.push(bucket);
+        });
+        // Apply any unapplied selections that appear on this page
+        for (const bucket of unappliedFacetBuckets) {
+            const existingBucketIndex = bucketsWithCount.findIndex(b => b.key === bucket.key);
+            if (existingBucketIndex >= 0) {
+                bucketsWithCount[existingBucketIndex] = { ...bucket };
+            }
+        }
+        facetGroup.buckets = bucketsWithCount;
+        return facetGroup;
+    }
+    /**
+     * Converts the selected facets for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    get selectedFacetGroup() {
+        if (!this.selectedFacets || !this.facetKey)
+            return undefined;
+        const selectedFacetsForKey = this.selectedFacets[this.facetKey];
+        if (!selectedFacetsForKey)
+            return undefined;
+        const facetGroupTitle = facetTitles[this.facetKey];
+        const buckets = Object.entries(selectedFacetsForKey).map(([value, data]) => {
+            const displayText = value;
+            return {
+                displayText,
+                key: value,
+                count: data === null || data === void 0 ? void 0 : data.count,
+                state: data === null || data === void 0 ? void 0 : data.state,
+            };
+        });
+        return {
+            title: facetGroupTitle,
+            key: this.facetKey,
+            buckets,
+        };
+    }
+    /**
+     * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    get aggregationFacetGroup() {
+        if (!this.aggregations || !this.facetKey)
+            return undefined;
+        const currentAggregation = this.aggregations[this.facetKey];
+        if (!currentAggregation)
+            return undefined;
+        const facetGroupTitle = facetTitles[this.facetKey];
+        // Order the facets according to the current sort option
+        let sortedBuckets = currentAggregation.getSortedBuckets(this.sortedBy);
+        if (this.facetKey === 'collection') {
+            // we are not showing fav- collections or certain deemphasized collections in facets
+            sortedBuckets = sortedBuckets === null || sortedBuckets === void 0 ? void 0 : sortedBuckets.filter(bucket => {
+                var _a;
+                const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
+                return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
+            });
+        }
+        // Construct the array of facet buckets from the aggregation buckets
+        const facetBuckets = sortedBuckets.map(bucket => {
+            const bucketKeyStr = `${bucket.key}`;
+            return {
+                displayText: `${bucketKeyStr}`,
+                key: `${bucketKeyStr}`,
+                count: bucket.doc_count,
+                state: 'none',
+            };
+        });
+        return {
+            title: facetGroupTitle,
+            key: this.facetKey,
+            buckets: facetBuckets,
+        };
+    }
+    /**
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     */
+    get facetGroupForCurrentPage() {
+        const { facetGroup } = this;
+        if (!facetGroup)
+            return undefined;
+        // Slice out only the current page of facet buckets
+        const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
+        const truncatedBuckets = facetGroup.buckets.slice(firstBucketIndexOnPage, firstBucketIndexOnPage + this.facetsPerPage);
+        return {
+            ...facetGroup,
+            buckets: truncatedBuckets,
+        };
+    }
+    get moreFacetsTemplate() {
         return html `
       <facets-template
-        .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
+        .facetGroup=${this.facetGroupForCurrentPage}
         .selectedFacets=${this.selectedFacets}
-        .renderOn=${'modal'}
         .collectionTitles=${this.collectionTitles}
-        @selectedFacetsChanged=${(e) => {
-            this.selectedFacets = e.detail;
+        @facetClick=${(e) => {
+            if (this.facetKey) {
+                this.unappliedFacetChanges = updateSelectedFacetBucket(this.unappliedFacetChanges, this.facetKey, e.detail.bucket);
+            }
         }}
       ></facets-template>
-    `;
-    }
-    get loaderTemplate() {
+    `;
+    }
+    get loaderTemplate() {
         return html `<div class="facets-loader">
       <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
-    </div> `;
-    }
-    // render pagination if more then 1 page
-    get facetsPaginationTemplate() {
-        return this.paginationSize > 1
+    </div> `;
+    }
+    /**
+     * How many pages of facets to show in the modal pagination widget
+     */
+    get paginationSize() {
+        var _a;
+        if (!this.aggregations || !this.facetKey)
+            return 0;
+        // Calculate the appropriate number of pages to show in the modal pagination widget
+        const length = (_a = this.aggregations[this.facetKey]) === null || _a === void 0 ? void 0 : _a.buckets.length;
+        return Math.ceil(length / this.facetsPerPage);
+    }
+    // render pagination if more then 1 page
+    get facetsPaginationTemplate() {
+        return this.paginationSize > 1
             ? html `<more-facets-pagination
           .size=${this.paginationSize}
           .currentPage=${1}
           @pageNumberClicked=${this.pageNumberClicked}
-        ></more-facets-pagination>`
-            : nothing;
-    }
-    get footerTemplate() {
-        if (this.paginationSize > 0) {
+        ></more-facets-pagination>`
+            : nothing;
+    }
+    get footerTemplate() {
+        if (this.paginationSize > 0) {
             return html `${this.facetsPaginationTemplate}
         <div class="footer">
           <button
@@ -272,92 +319,87 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           >
             Apply filters
           </button>
-        </div> `;
-        }
-        return nothing;
-    }
-    sortFacetAggregation(facetSortType) {
-        this.sortedBy = facetSortType;
-        this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
-    }
-    get getModalHeaderTemplate() {
-        var _a;
-        const facetSort = (_a = this.sortedBy) !== null && _a !== void 0 ? _a : defaultFacetSort[this.facetKey];
-        const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
-        return html `<span class="sr-only">More facets for:</span>
+        </div> `;
+        }
+        return nothing;
+    }
+    sortFacetAggregation(facetSortType) {
+        this.sortedBy = facetSortType;
+        this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
+    }
+    get modalHeaderTemplate() {
+        var _a, _b, _c;
+        const facetSort = (_a = this.sortedBy) !== null && _a !== void 0 ? _a : defaultFacetSort[this.facetKey];
+        const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
+        return html `<span class="sr-only">${msg('More facets for:')}</span>
       <span class="title">
-        ${this.facetGroupTitle}
+        ${(_b = this.facetGroup) === null || _b === void 0 ? void 0 : _b.title}
 
-        <label class="sort-label">Sort by:</label>
-        ${this.facetKey
+        <label class="sort-label">${msg('Sort by:')}</label>
+        ${this.facetKey
             ? html `<toggle-switch
               class="sort-toggle"
               leftValue=${AggregationSortType.COUNT}
               leftLabel="Count"
               rightValue=${valueFacetSort[this.facetKey]}
-              rightLabel=${this.facetGroupTitle}
+              rightLabel=${(_c = this.facetGroup) === null || _c === void 0 ? void 0 : _c.title}
               side=${defaultSwitchSide}
-              @change=${(e) => {
-                this.sortFacetAggregation(Number(e.detail));
+              @change=${(e) => {
+                this.sortFacetAggregation(Number(e.detail));
             }}
-            ></toggle-switch>`
+            ></toggle-switch>`
             : nothing}
-      </span>`;
-    }
-    render() {
+      </span>`;
+    }
+    render() {
         return html `
-      ${this.facetsLoading
-            ? this.loaderTemplate
+      ${this.facetsLoading
+            ? this.loaderTemplate
             : html `
             <section id="more-facets">
-              <div class="header-content">${this.getModalHeaderTemplate}</div>
-              <div class="facets-content">${this.getMoreFacetsTemplate}</div>
+              <div class="header-content">${this.modalHeaderTemplate}</div>
+              <div class="facets-content">${this.moreFacetsTemplate}</div>
               ${this.footerTemplate}
             </section>
           `}
-    `;
-    }
-    applySearchFacetsClicked() {
-        var _a, _b;
-        const event = new CustomEvent('facetsChanged', {
-            detail: this.selectedFacets,
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(event);
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
-            category: analyticsCategories.default,
-            action: `${analyticsActions.applyMoreFacetsModal}`,
-            label: `${this.facetKey}`,
-        });
-    }
-    cancelClick() {
-        var _a, _b;
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.closeMoreFacetsModal,
-            label: `${this.facetKey}`,
-        });
-    }
-    static get styles() {
-        const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
-        return [
-            srOnlyStyle,
+    `;
+    }
+    applySearchFacetsClicked() {
+        var _a, _b;
+        const mergedSelections = mergeSelectedFacets(this.selectedFacets, this.unappliedFacetChanges);
+        const event = new CustomEvent('facetsChanged', {
+            detail: mergedSelections,
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+        // Reset the unapplied changes back to default, now that they have been applied
+        this.unappliedFacetChanges = getDefaultSelectedFacets();
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+            category: analyticsCategories.default,
+            action: `${analyticsActions.applyMoreFacetsModal}`,
+            label: `${this.facetKey}`,
+        });
+    }
+    cancelClick() {
+        var _a, _b;
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+            category: analyticsCategories.default,
+            action: analyticsActions.closeMoreFacetsModal,
+            label: `${this.facetKey}`,
+        });
+    }
+    static get styles() {
+        const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
+        return [
+            srOnlyStyle,
             css `
-        @media (max-width: 560px) {
-          section#more-facets {
-            max-height: 450px;
-          }
-          .facets-content {
-            overflow-y: auto;
-            height: 300px;
-          }
-        }
         section#more-facets {
           overflow: auto;
           padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
+          --facetsColumnCount: 3;
         }
         .header-content .title {
           display: block;
@@ -409,69 +451,74 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           text-align: center;
           margin-top: 10px;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], MoreFacetsContent.prototype, "facetKey", void 0);
-__decorate([
-    property({ type: String })
-], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
-__decorate([
-    property({ type: String })
-], MoreFacetsContent.prototype, "query", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "filterMap", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "searchService", void 0);
-__decorate([
-    property({ type: String })
-], MoreFacetsContent.prototype, "searchType", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "pageSpecifierParams", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "collectionTitles", void 0);
-__decorate([
-    property({ type: Object })
-], MoreFacetsContent.prototype, "selectedFacets", void 0);
-__decorate([
-    property({ type: String })
-], MoreFacetsContent.prototype, "sortedBy", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], MoreFacetsContent.prototype, "analyticsHandler", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "aggregations", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "facetGroup", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "pageNumber", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "facetsLoading", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "paginationSize", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "facetsType", void 0);
-MoreFacetsContent = __decorate([
-    customElement('more-facets-content')
-], MoreFacetsContent);
-export { MoreFacetsContent };
+
+        @media (max-width: 560px) {
+          section#more-facets {
+            max-height: 450px;
+            --facetsColumnCount: 1;
+          }
+          .facets-content {
+            overflow-y: auto;
+            height: 300px;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "facetKey", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "query", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "filterMap", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "searchType", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "pageSpecifierParams", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "collectionTitles", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsContent.prototype, "facetsPerPage", void 0);
+__decorate([
+    property({ type: Boolean })
+], MoreFacetsContent.prototype, "facetsLoading", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "sortedBy", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "searchService", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], MoreFacetsContent.prototype, "analyticsHandler", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "aggregations", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetGroup", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "unappliedFacetChanges", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "pageNumber", void 0);
+MoreFacetsContent = __decorate([
+    customElement('more-facets-content')
+], MoreFacetsContent);
+export { MoreFacetsContent };
 //# sourceMappingURL=more-facets-content.js.map