@internetarchive/collection-browser 1.14.6-alpha.0 → 1.14.6-alpha2

package/dist/src/collection-browser.js

@@ -1,298 +1,298 @@
-import { __decorate } from "tslib";
-/* eslint-disable import/no-duplicates */
-import { html, css, LitElement, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { FilterConstraint, FilterMapBuilder, SearchType, } from '@internetarchive/search-service';
-import '@internetarchive/infinite-scroller';
-import './tiles/tile-dispatcher';
-import './tiles/collection-browser-loading-tile';
-import './sort-filter-bar/sort-filter-bar';
-import './manage/manage-bar';
-import './collection-facets';
-import './circular-activity-indicator';
-import { SortField, getDefaultSelectedFacets, prefixFilterAggregationKeys, sortOptionFromAPIString, SORT_OPTIONS, } from './models';
-import { RestorationStateHandler, } from './restoration-state-handler';
-import chevronIcon from './assets/img/icons/chevron';
-import './empty-placeholder';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
-import { sha1 } from './utils/sha1';
-import { formatDate } from './utils/format-date';
-let CollectionBrowser = class CollectionBrowser extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.baseImageUrl = 'https://archive.org';
-        this.searchType = SearchType.METADATA;
-        this.sortParam = null;
-        this.defaultSortParam = null;
-        this.selectedSort = SortField.default;
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = null;
-        this.sortDirection = null;
-        this.pageSize = 50;
-        this.showHistogramDatePicker = false;
-        this.collectionPagePath = '/details/';
-        this.parentCollections = [];
-        /** describes where this component is being used */
-        this.searchContext = analyticsCategories.default;
-        this.pageContext = 'search';
-        this.restorationStateHandler = new RestorationStateHandler({
-            context: this.pageContext,
-        });
-        this.mobileBreakpoint = 600;
-        this.loggedIn = false;
-        this.modalManager = undefined;
-        /**
-         * If item management UI active
-         */
-        this.isManageView = false;
-        /**
-         * The page that the consumer wants to load.
-         */
-        this.initialPageNumber = 1;
-        /**
-         * This the the number of pages that we want to show.
-         *
-         * The data isn't necessarily loaded for all of the pages, but this lets us
-         * know how many cells we should render.
-         */
-        this.pagesToRender = this.initialPageNumber;
-        /**
-         * Whether the initial page fetch for a new query is currently in progress.
-         */
-        this.searchResultsLoading = false;
-        this.facetsLoading = false;
-        this.fullYearAggregationLoading = false;
-        this.mobileView = false;
-        this.mobileFacetsVisible = false;
-        this.defaultSortField = SortField.relevance;
-        this.defaultSortDirection = null;
-        this.placeholderType = null;
-        this.prefixFilterCountMap = {};
-        /**
-         * When we're animated scrolling to the page, we don't want to fetch
-         * all of the pages as it scrolls so this lets us know if we're scrolling
-         */
-        this.isScrollingToCell = false;
-        /**
-         * When we've reached the end of the data, stop trying to fetch more
-         */
-        this.endOfDataReached = false;
-        /**
-         * When page width resizes from desktop to mobile, set true to
-         * disable expand/collapse transition when loading.
-         */
-        this.isResizeToMobile = false;
-        this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
-        /**
-         * The results per page so we can paginate.
-         *
-         * This allows us to start in the middle of the search results and
-         * fetch data before or after the current page. If we don't have a key
-         * for the previous/next page, we'll fetch the next/previous page to populate it
-         */
-        this.dataSource = {};
-        /**
-         * How many tiles to offset the data source by, to account for any removed tiles.
-         */
-        this.tileModelOffset = 0;
-        /**
-         * Updates the height of the left column according to its position on the page.
-         * Arrow function ensures proper `this` binding.
-         */
-        this.updateLeftColumnHeight = () => {
-            var _a, _b, _c, _d, _e;
-            if (this.mobileView) {
-                (_b = (_a = this.leftColumn) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('height');
-            }
-            else {
-                const clientTop = (_c = this.leftColumn) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top;
-                (_e = (_d = this.leftColumn) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.setProperty('height', `${window.innerHeight - (clientTop !== null && clientTop !== void 0 ? clientTop : 0) - 3}px`);
-            }
-        };
-        /**
-         * Toggles whether the fade-out is visible at the bottom of the facets.
-         * It should only be visible if the facets are not scrolled to the bottom.
-         * Arrow function ensures proper `this` binding.
-         */
-        this.updateFacetFadeOut = (entries) => {
-            var _a, _b;
-            const fadeElmt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('facets-bottom-fade');
-            fadeElmt === null || fadeElmt === void 0 ? void 0 : fadeElmt.classList.toggle('hidden', (_b = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _b === void 0 ? void 0 : _b.isIntersecting);
-        };
-        // we only want to scroll on the very first query change
-        // so this keeps track of whether we've already set the initial query
-        this.initialQueryChangeHappened = false;
-        this.historyPopOccurred = false;
-        /**
-         * Internal property to store the private value backing the `initialSearchComplete` getter.
-         */
-        this._initialSearchCompletePromise = new Promise(res => {
-            this._initialSearchCompleteResolver = res;
-        });
-        // this maps the query to the pages being fetched for that query
-        this.pageFetchesInProgress = {};
-    }
-    tileModelAtCellIndex(index) {
-        var _a;
-        const offsetIndex = index + this.tileModelOffset;
-        const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
-        const itemIndex = offsetIndex % this.pageSize;
-        const model = (_a = this.dataSource[pageNumber]) === null || _a === void 0 ? void 0 : _a[itemIndex];
-        /**
-         * If we encounter a model we don't have yet and we're not in the middle of an
-         * automated scroll, fetch the page and just return undefined.
-         * The datasource will be updated once the page is loaded and the cell will be rendered.
-         *
-         * We disable it during the automated scroll since we may fetch pages for cells the
-         * user may never see.
-         */
-        if (!model && !this.isScrollingToCell) {
-            this.fetchPage(pageNumber);
-        }
-        return model;
-    }
-    get sortFilterQueries() {
-        const queries = [this.titleQuery, this.creatorQuery];
-        return queries.filter(q => q).join(' AND ');
-    }
-    // this is the total number of tiles we expect if
-    // the data returned is a full page worth
-    // this is useful for putting in placeholders for the expected number of tiles
-    get estimatedTileCount() {
-        return this.pagesToRender * this.pageSize;
-    }
-    /**
-     * Returns a promise resolving to a unique string that persists for the current browser session.
-     * Used in generating unique IDs for search requests, so that multiple requests coming from the
-     * same browser session can be identified.
-     */
-    async getSessionId() {
-        try {
-            const storedSessionId = sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.getItem('cb-session');
-            if (storedSessionId) {
-                return storedSessionId;
-            }
-            // If we enter this method a second time while a first session ID is already being generated,
-            // ensure we produce the same ID from both calls instead of generating another one.
-            if (this.sessionIdGenPromise) {
-                return this.sessionIdGenPromise;
-            }
-            this.sessionIdGenPromise = sha1(Math.random().toString());
-            const newSessionId = await this.sessionIdGenPromise;
-            sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.setItem('cb-session', newSessionId);
-            return newSessionId;
-        }
-        catch (err) {
-            // Either we can't generate the hash or we're restricted from accessing sessionStorage
-            return '';
-        }
-    }
-    /**
-     * Go to the given page of results
-     *
-     * @param pageNumber
-     */
-    goToPage(pageNumber) {
-        this.initialPageNumber = pageNumber;
-        this.pagesToRender = pageNumber;
-        return this.scrollToPage(pageNumber);
-    }
-    /**
-     * Clears all selected/negated facets, date ranges, and letter filters.
-     *
-     * By default, the current sort field/direction are not cleared,
-     * but this can be overridden by setting the `sort` option to `true`.
-     *
-     * Similarly, it is possible to finely control what is cleared by
-     * setting any of the `facets`, `dateRange`, or `letterFilters` flags
-     * in the options object.
-     */
-    clearFilters({ facets = true, dateRange = true, letterFilters = true, sort = false, } = {}) {
-        // Don't bother clearing facets if none are checked, so that we don't
-        // trigger unnecessary update cycles.
-        if (facets && this.hasCheckedFacets) {
-            this.selectedFacets = getDefaultSelectedFacets();
-        }
-        if (dateRange) {
-            this.minSelectedDate = undefined;
-            this.maxSelectedDate = undefined;
-        }
-        if (letterFilters) {
-            this.selectedTitleFilter = null;
-            this.selectedCreatorFilter = null;
-        }
-        if (sort) {
-            this.sortParam = null;
-            this.sortDirection = null;
-            this.selectedSort = SortField.default;
-        }
-    }
-    /**
-     * Returns true if the current value of `this.selectedFacets` contains
-     * any facet buckets than have been selected or negated, or false otherwise.
-     */
-    get hasCheckedFacets() {
-        if (!this.selectedFacets)
-            return false;
-        for (const facetGroup of Object.values(this.selectedFacets)) {
-            for (const bucket of Object.values(facetGroup)) {
-                if (bucket.state !== 'none')
-                    return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Returns true if there are any currently selected/negated facet buckets,
-     * any selected date range, or any selected letter filters. False otherwise.
-     *
-     * Ignores sorting options.
-     */
-    get hasActiveFilters() {
-        return !!(this.hasCheckedFacets ||
-            this.minSelectedDate ||
-            this.maxSelectedDate ||
-            this.selectedTitleFilter ||
-            this.selectedCreatorFilter);
-    }
-    render() {
-        this.setPlaceholderType();
+import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
+import { html, css, LitElement, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FilterConstraint, FilterMapBuilder, SearchType, } from '@internetarchive/search-service';
+import '@internetarchive/infinite-scroller';
+import './tiles/tile-dispatcher';
+import './tiles/collection-browser-loading-tile';
+import './sort-filter-bar/sort-filter-bar';
+import './manage/manage-bar';
+import './collection-facets';
+import './circular-activity-indicator';
+import { SortField, getDefaultSelectedFacets, prefixFilterAggregationKeys, sortOptionFromAPIString, SORT_OPTIONS, } from './models';
+import { RestorationStateHandler, } from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
+import './empty-placeholder';
+import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+import { srOnlyStyle } from './styles/sr-only';
+import { sha1 } from './utils/sha1';
+import { formatDate } from './utils/format-date';
+let CollectionBrowser = class CollectionBrowser extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseImageUrl = 'https://archive.org';
+        this.searchType = SearchType.METADATA;
+        this.sortParam = null;
+        this.defaultSortParam = null;
+        this.selectedSort = SortField.default;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.sortDirection = null;
+        this.pageSize = 50;
+        this.showHistogramDatePicker = false;
+        this.collectionPagePath = '/details/';
+        this.parentCollections = [];
+        /** describes where this component is being used */
+        this.searchContext = analyticsCategories.default;
+        this.pageContext = 'search';
+        this.restorationStateHandler = new RestorationStateHandler({
+            context: this.pageContext,
+        });
+        this.mobileBreakpoint = 600;
+        this.loggedIn = false;
+        this.modalManager = undefined;
+        /**
+         * If item management UI active
+         */
+        this.isManageView = false;
+        /**
+         * The page that the consumer wants to load.
+         */
+        this.initialPageNumber = 1;
+        /**
+         * This the the number of pages that we want to show.
+         *
+         * The data isn't necessarily loaded for all of the pages, but this lets us
+         * know how many cells we should render.
+         */
+        this.pagesToRender = this.initialPageNumber;
+        /**
+         * Whether the initial page fetch for a new query is currently in progress.
+         */
+        this.searchResultsLoading = false;
+        this.facetsLoading = false;
+        this.fullYearAggregationLoading = false;
+        this.mobileView = false;
+        this.mobileFacetsVisible = false;
+        this.defaultSortField = SortField.relevance;
+        this.defaultSortDirection = null;
+        this.placeholderType = null;
+        this.prefixFilterCountMap = {};
+        /**
+         * When we're animated scrolling to the page, we don't want to fetch
+         * all of the pages as it scrolls so this lets us know if we're scrolling
+         */
+        this.isScrollingToCell = false;
+        /**
+         * When we've reached the end of the data, stop trying to fetch more
+         */
+        this.endOfDataReached = false;
+        /**
+         * When page width resizes from desktop to mobile, set true to
+         * disable expand/collapse transition when loading.
+         */
+        this.isResizeToMobile = false;
+        this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
+        /**
+         * The results per page so we can paginate.
+         *
+         * This allows us to start in the middle of the search results and
+         * fetch data before or after the current page. If we don't have a key
+         * for the previous/next page, we'll fetch the next/previous page to populate it
+         */
+        this.dataSource = {};
+        /**
+         * How many tiles to offset the data source by, to account for any removed tiles.
+         */
+        this.tileModelOffset = 0;
+        /**
+         * Updates the height of the left column according to its position on the page.
+         * Arrow function ensures proper `this` binding.
+         */
+        this.updateLeftColumnHeight = () => {
+            var _a, _b, _c, _d, _e;
+            if (this.mobileView) {
+                (_b = (_a = this.leftColumn) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('height');
+            }
+            else {
+                const clientTop = (_c = this.leftColumn) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top;
+                (_e = (_d = this.leftColumn) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.setProperty('height', `${window.innerHeight - (clientTop !== null && clientTop !== void 0 ? clientTop : 0) - 3}px`);
+            }
+        };
+        /**
+         * Toggles whether the fade-out is visible at the bottom of the facets.
+         * It should only be visible if the facets are not scrolled to the bottom.
+         * Arrow function ensures proper `this` binding.
+         */
+        this.updateFacetFadeOut = (entries) => {
+            var _a, _b;
+            const fadeElmt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('facets-bottom-fade');
+            fadeElmt === null || fadeElmt === void 0 ? void 0 : fadeElmt.classList.toggle('hidden', (_b = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+        };
+        // we only want to scroll on the very first query change
+        // so this keeps track of whether we've already set the initial query
+        this.initialQueryChangeHappened = false;
+        this.historyPopOccurred = false;
+        /**
+         * Internal property to store the private value backing the `initialSearchComplete` getter.
+         */
+        this._initialSearchCompletePromise = new Promise(res => {
+            this._initialSearchCompleteResolver = res;
+        });
+        // this maps the query to the pages being fetched for that query
+        this.pageFetchesInProgress = {};
+    }
+    tileModelAtCellIndex(index) {
+        var _a;
+        const offsetIndex = index + this.tileModelOffset;
+        const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
+        const itemIndex = offsetIndex % this.pageSize;
+        const model = (_a = this.dataSource[pageNumber]) === null || _a === void 0 ? void 0 : _a[itemIndex];
+        /**
+         * If we encounter a model we don't have yet and we're not in the middle of an
+         * automated scroll, fetch the page and just return undefined.
+         * The datasource will be updated once the page is loaded and the cell will be rendered.
+         *
+         * We disable it during the automated scroll since we may fetch pages for cells the
+         * user may never see.
+         */
+        if (!model && !this.isScrollingToCell) {
+            this.fetchPage(pageNumber);
+        }
+        return model;
+    }
+    get sortFilterQueries() {
+        const queries = [this.titleQuery, this.creatorQuery];
+        return queries.filter(q => q).join(' AND ');
+    }
+    // this is the total number of tiles we expect if
+    // the data returned is a full page worth
+    // this is useful for putting in placeholders for the expected number of tiles
+    get estimatedTileCount() {
+        return this.pagesToRender * this.pageSize;
+    }
+    /**
+     * Returns a promise resolving to a unique string that persists for the current browser session.
+     * Used in generating unique IDs for search requests, so that multiple requests coming from the
+     * same browser session can be identified.
+     */
+    async getSessionId() {
+        try {
+            const storedSessionId = sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.getItem('cb-session');
+            if (storedSessionId) {
+                return storedSessionId;
+            }
+            // If we enter this method a second time while a first session ID is already being generated,
+            // ensure we produce the same ID from both calls instead of generating another one.
+            if (this.sessionIdGenPromise) {
+                return this.sessionIdGenPromise;
+            }
+            this.sessionIdGenPromise = sha1(Math.random().toString());
+            const newSessionId = await this.sessionIdGenPromise;
+            sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.setItem('cb-session', newSessionId);
+            return newSessionId;
+        }
+        catch (err) {
+            // Either we can't generate the hash or we're restricted from accessing sessionStorage
+            return '';
+        }
+    }
+    /**
+     * Go to the given page of results
+     *
+     * @param pageNumber
+     */
+    goToPage(pageNumber) {
+        this.initialPageNumber = pageNumber;
+        this.pagesToRender = pageNumber;
+        return this.scrollToPage(pageNumber);
+    }
+    /**
+     * Clears all selected/negated facets, date ranges, and letter filters.
+     *
+     * By default, the current sort field/direction are not cleared,
+     * but this can be overridden by setting the `sort` option to `true`.
+     *
+     * Similarly, it is possible to finely control what is cleared by
+     * setting any of the `facets`, `dateRange`, or `letterFilters` flags
+     * in the options object.
+     */
+    clearFilters({ facets = true, dateRange = true, letterFilters = true, sort = false, } = {}) {
+        // Don't bother clearing facets if none are checked, so that we don't
+        // trigger unnecessary update cycles.
+        if (facets && this.hasCheckedFacets) {
+            this.selectedFacets = getDefaultSelectedFacets();
+        }
+        if (dateRange) {
+            this.minSelectedDate = undefined;
+            this.maxSelectedDate = undefined;
+        }
+        if (letterFilters) {
+            this.selectedTitleFilter = null;
+            this.selectedCreatorFilter = null;
+        }
+        if (sort) {
+            this.sortParam = null;
+            this.sortDirection = null;
+            this.selectedSort = SortField.default;
+        }
+    }
+    /**
+     * Returns true if the current value of `this.selectedFacets` contains
+     * any facet buckets than have been selected or negated, or false otherwise.
+     */
+    get hasCheckedFacets() {
+        if (!this.selectedFacets)
+            return false;
+        for (const facetGroup of Object.values(this.selectedFacets)) {
+            for (const bucket of Object.values(facetGroup)) {
+                if (bucket.state !== 'none')
+                    return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Returns true if there are any currently selected/negated facet buckets,
+     * any selected date range, or any selected letter filters. False otherwise.
+     *
+     * Ignores sorting options.
+     */
+    get hasActiveFilters() {
+        return !!(this.hasCheckedFacets ||
+            this.minSelectedDate ||
+            this.maxSelectedDate ||
+            this.selectedTitleFilter ||
+            this.selectedCreatorFilter);
+    }
+    render() {
+        this.setPlaceholderType();
         return html `
       <div
         id="content-container"
         class=${this.mobileView ? 'mobile' : 'desktop'}
       >
-        ${this.placeholderType
-            ? this.emptyPlaceholderTemplate
+        ${this.placeholderType
+            ? this.emptyPlaceholderTemplate
             : this.collectionBrowserTemplate}
       </div>
-    `;
-    }
-    setPlaceholderType() {
-        var _a;
-        const hasQuery = !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
-        const isCollection = !!this.withinCollection;
-        const noResults = !this.searchResultsLoading &&
-            (this.totalResults === 0 || !this.searchService);
-        this.placeholderType = null;
-        if (!hasQuery && !isCollection) {
-            this.placeholderType = 'empty-query';
-        }
-        else if (noResults) {
-            // Within a collection, no query + no results means the collection simply has no viewable items.
-            // Otherwise, we must have a user query that produced 0 results.
-            this.placeholderType =
-                !hasQuery && isCollection ? 'empty-collection' : 'no-results';
-        }
-        if (this.queryErrorMessage) {
-            this.placeholderType =
-                !hasQuery && isCollection ? 'collection-error' : 'query-error';
-        }
-    }
-    get emptyPlaceholderTemplate() {
-        var _a;
+    `;
+    }
+    setPlaceholderType() {
+        var _a;
+        const hasQuery = !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
+        const isCollection = !!this.withinCollection;
+        const noResults = !this.searchResultsLoading &&
+            (this.totalResults === 0 || !this.searchService);
+        this.placeholderType = null;
+        if (!hasQuery && !isCollection) {
+            this.placeholderType = 'empty-query';
+        }
+        else if (noResults) {
+            // Within a collection, no query + no results means the collection simply has no viewable items.
+            // Otherwise, we must have a user query that produced 0 results.
+            this.placeholderType =
+                !hasQuery && isCollection ? 'empty-collection' : 'no-results';
+        }
+        if (this.queryErrorMessage) {
+            this.placeholderType =
+                !hasQuery && isCollection ? 'collection-error' : 'query-error';
+        }
+    }
+    get emptyPlaceholderTemplate() {
+        var _a;
         return html `
       <empty-placeholder
         .placeholderType=${this.placeholderType}
@@ -302,47 +302,47 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .baseNavigationUrl=${this.baseNavigationUrl}
       ></empty-placeholder>
       ${this.infiniteScrollerTemplate}
-    `;
-    }
-    /**
-     * Top-level template for rendering the left (facets) and right (results) columns.
-     */
-    get collectionBrowserTemplate() {
+    `;
+    }
+    /**
+     * Top-level template for rendering the left (facets) and right (results) columns.
+     */
+    get collectionBrowserTemplate() {
         return html `
       <div id="left-column-scroll-sentinel"></div>
       ${this.leftColumnTemplate} ${this.rightColumnTemplate}
-    `;
-    }
-    /**
-     * Template for either the mobile or desktop version of the left column, depending
-     * on current component state.
-     */
-    get leftColumnTemplate() {
-        if (this.mobileView) {
-            return this.mobileLeftColumnTemplate;
-        }
-        return this.desktopLeftColumnTemplate;
-    }
-    /**
-     * Template for the mobile version of the "left column" (which in this case, appears
-     * *above* the search results rather than beside them), for rendering the
-     * accordion-style facets.
-     */
-    get mobileLeftColumnTemplate() {
+    `;
+    }
+    /**
+     * Template for either the mobile or desktop version of the left column, depending
+     * on current component state.
+     */
+    get leftColumnTemplate() {
+        if (this.mobileView) {
+            return this.mobileLeftColumnTemplate;
+        }
+        return this.desktopLeftColumnTemplate;
+    }
+    /**
+     * Template for the mobile version of the "left column" (which in this case, appears
+     * *above* the search results rather than beside them), for rendering the
+     * accordion-style facets.
+     */
+    get mobileLeftColumnTemplate() {
         return html `
       <div
         id="left-column"
         class="column${this.isResizeToMobile ? ' preload' : ''}"
       >
         ${this.resultsCountTemplate}
-        <div id="facets-header-container">${this.mobileFacetsTemplate}</div>
+        <div id="facets-header-container">${this.mobileListTemplate} ${this.mobileFacetsTemplate}</div>
       </div>
-    `;
-    }
-    /**
-     * Template for the desktop version of the left column, displaying the facets sidebar.
-     */
-    get desktopLeftColumnTemplate() {
+    `;
+    }
+    /**
+     * Template for the desktop version of the left column, displaying the facets sidebar.
+     */
+    get desktopLeftColumnTemplate() {
         return html `
       <div id="left-column" class="column">
         <div id="facet-top-view">
@@ -359,17 +359,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         </div>
         <div id="facets-bottom-fade"></div>
       </div>
-    `;
-    }
-    /**
-     * Template for the "X Results" count at the top of the search results.
-     * Changes to the "Searching..." label if the search results are still loading.
-     */
-    get resultsCountTemplate() {
-        var _a;
-        const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
-        const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
-        const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
+    `;
+    }
+    /**
+     * Template for the "X Results" count at the top of the search results.
+     * Changes to the "Searching..." label if the search results are still loading.
+     */
+    get resultsCountTemplate() {
+        var _a;
+        const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
+        const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
+        const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
         return html `
       <div id="results-total">
         <span id="big-results-count">
@@ -379,26 +379,29 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           ${shouldShowSearching ? nothing : resultsLabel}
         </span>
       </div>
-    `;
-    }
-    /**
-     * Template for the right column of the collection browser, where the result
-     * tiles and sort/filter bar are shown.
-     */
-    get rightColumnTemplate() {
+    `;
+    }
+    /**
+     * Template for the right column of the collection browser, where the result
+     * tiles and sort/filter bar are shown.
+     */
+    get rightColumnTemplate() {
         return html `
       <div id="right-column" class="column">
-        ${this.isManageView
-            ? this.manageBarTemplate
+        <div id="cb-top-view">
+          <slot name="cb-top-slot"></slot>
+        </div>
+        ${this.isManageView
+            ? this.manageBarTemplate
             : this.sortFilterBarTemplate}
-        ${this.displayMode === `list-compact`
-            ? this.listHeaderTemplate
+        ${this.displayMode === `list-compact`
+            ? this.listHeaderTemplate
             : nothing}
         ${this.infiniteScrollerTemplate}
       </div>
-    `;
-    }
-    get infiniteScrollerTemplate() {
+    `;
+    }
+    get infiniteScrollerTemplate() {
         return html `<infinite-scroller
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
@@ -407,17 +410,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
       @visibleCellsChanged=${this.visibleCellsChanged}
-    ></infinite-scroller>`;
-    }
-    get infiniteScrollerClasses() {
-        var _a;
-        return classMap({
-            [(_a = this.displayMode) !== null && _a !== void 0 ? _a : '']: !!this.displayMode,
-            hidden: !!this.placeholderType,
-        });
-    }
-    get sortFilterBarTemplate() {
-        var _a;
+    ></infinite-scroller>`;
+    }
+    get infiniteScrollerClasses() {
+        var _a;
+        return classMap({
+            [(_a = this.displayMode) !== null && _a !== void 0 ? _a : '']: !!this.displayMode,
+            hidden: !!this.placeholderType,
+        });
+    }
+    get sortFilterBarTemplate() {
+        var _a;
         return html `
       <sort-filter-bar
         .defaultSortField=${this.defaultSortField}
@@ -437,9 +440,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         @creatorLetterChanged=${this.creatorLetterSelected}
       >
       </sort-filter-bar>
-    `;
-    }
-    get manageBarTemplate() {
+    `;
+    }
+    get manageBarTemplate() {
         return html `
       <manage-bar
         showSelectAll
@@ -447,249 +450,249 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         @removeItems=${this.handleRemoveItems}
         @selectAll=${this.checkAllTiles}
         @unselectAll=${this.uncheckAllTiles}
-        @cancel=${() => {
-            this.isManageView = false;
-            this.uncheckAllTiles();
+        @cancel=${() => {
+            this.isManageView = false;
+            this.uncheckAllTiles();
         }}
       ></manage-bar>
-    `;
-    }
-    /**
-     * Handler for when the user requests to remove all checked items via the manage bar.
-     * Emits an `itemRemovalRequested` event with all checked tile models.
-     */
-    handleRemoveItems() {
-        this.dispatchEvent(new CustomEvent('itemRemovalRequested', {
-            detail: {
-                items: this.checkedTileModels.map(model => ({
-                    ...model,
-                    date: formatDate(model.datePublished, 'long'),
-                })),
-            },
-        }));
-    }
-    /**
-     * Removes all tile models that are currently checked & adjusts the paging
-     * of the data source to account for any new gaps in the data.
-     */
-    removeCheckedTiles() {
-        // To make sure our data source remains page-aligned, we will offset our data source by
-        // the number of removed tiles, so that we can just add the offset when the infinite
-        // scroller queries for cell contents.
-        // This only matters while we're still viewing the same set of results. If the user changes
-        // their query/filters/sort, then the data source is overwritten and the offset cleared.
-        const { checkedTileModels, uncheckedTileModels } = this;
-        const numChecked = checkedTileModels.length;
-        if (numChecked === 0)
-            return;
-        this.tileModelOffset += numChecked;
-        const newDataSource = {};
-        // Which page the remaining tile models start on, post-offset
-        let offsetPageNumber = Math.floor(this.tileModelOffset / this.pageSize) + 1;
-        let indexOnPage = this.tileModelOffset % this.pageSize;
-        // Fill the pages up to that point with empty models
-        for (let page = 1; page <= offsetPageNumber; page += 1) {
-            const remainingHidden = this.tileModelOffset - this.pageSize * (page - 1);
-            const offsetCellsOnPage = Math.min(this.pageSize, remainingHidden);
-            newDataSource[page] = Array(offsetCellsOnPage).fill(undefined);
-        }
-        // Shift all the remaining tiles into their new positions in the data source
-        for (const model of uncheckedTileModels) {
-            if (!newDataSource[offsetPageNumber])
-                newDataSource[offsetPageNumber] = [];
-            newDataSource[offsetPageNumber].push(model);
-            indexOnPage += 1;
-            if (indexOnPage >= this.pageSize) {
-                offsetPageNumber += 1;
-                indexOnPage = 0;
-            }
-        }
-        // Swap in the new data source and update the infinite scroller
-        this.dataSource = newDataSource;
-        if (this.totalResults)
-            this.totalResults -= numChecked;
-        if (this.infiniteScroller) {
-            this.infiniteScroller.itemCount -= numChecked;
-            this.infiniteScroller.refreshAllVisibleCells();
-        }
-    }
-    /**
-     * Checks every tile's management checkbox
-     */
-    checkAllTiles() {
-        this.mapDataSource(model => ({ ...model, checked: true }));
-    }
-    /**
-     * Unchecks every tile's management checkbox
-     */
-    uncheckAllTiles() {
-        this.mapDataSource(model => ({ ...model, checked: false }));
-    }
-    /**
-     * Applies the given map function to all of the tile models in every page of the data
-     * source. This method updates the data source object in immutable fashion.
-     *
-     * @param mapFn A callback function to apply on each tile model, as with Array.map
-     */
-    mapDataSource(mapFn) {
-        var _a;
-        this.dataSource = Object.fromEntries(Object.entries(this.dataSource).map(([page, tileModels]) => [
-            page,
-            tileModels.map((model, index, array) => model ? mapFn(model, index, array) : model),
-        ]));
-        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
-    }
-    /**
-     * An array of all the tile models whose management checkboxes are checked
-     */
-    get checkedTileModels() {
-        return this.getFilteredTileModels(model => model.checked);
-    }
-    /**
-     * An array of all the tile models whose management checkboxes are unchecked
-     */
-    get uncheckedTileModels() {
-        return this.getFilteredTileModels(model => !model.checked);
-    }
-    /**
-     * Returns a flattened, filtered array of all the tile models in the data source
-     * for which the given predicate returns a truthy value.
-     *
-     * @param predicate A callback function to apply on each tile model, as with Array.filter
-     * @returns A filtered array of tile models satisfying the predicate
-     */
-    getFilteredTileModels(predicate) {
-        return Object.values(this.dataSource)
-            .flat()
-            .filter((model, index, array) => model ? predicate(model, index, array) : false);
-    }
-    userChangedSort(e) {
-        var _a;
-        const { selectedSort, sortDirection } = e.detail;
-        this.selectedSort = selectedSort;
-        this.sortDirection = sortDirection;
-        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
-            this.goToPage(1);
-        }
-        this.currentPage = 1;
-    }
-    sendSortByAnalytics(prevSortDirection) {
-        var _a;
-        const directionCleared = prevSortDirection && !this.sortDirection;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.sortBy,
-            label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
-        });
-    }
-    selectedSortChanged() {
-        var _a;
-        const sortOption = SORT_OPTIONS[this.selectedSort];
-        if (!sortOption.handledBySearchService) {
-            this.sortParam = null;
-            return;
-        }
-        // If the sort option specified in the URL is unrecognized, we just use it as-is
-        const urlSortParam = new URL(window.location.href).searchParams.get('sort');
-        const sortField = (_a = sortOption.searchServiceKey) !== null && _a !== void 0 ? _a : urlSortParam === null || urlSortParam === void 0 ? void 0 : urlSortParam.replace(/^-/, '');
-        // If the sort direction is still null at this point, then we assume ascending
-        // (i.e., it was unrecognized and had no directional flag)
-        if (!this.sortDirection)
-            this.sortDirection = 'asc';
-        if (!sortField)
-            return;
-        this.sortParam = { field: sortField, direction: this.sortDirection };
-        // Lazy-load the alphabet counts for title/creator sort bar as needed
-        this.updatePrefixFiltersForCurrentSort();
-    }
-    displayModeChanged(e) {
-        var _a;
-        this.displayMode = e.detail.displayMode;
-        if (this.displayMode) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-                category: this.searchContext,
-                action: analyticsActions.displayMode,
-                label: this.displayMode,
-            });
-        }
-    }
-    /**
-     * Returns a query clause identifying the currently selected title filter,
-     * e.g., `firstTitle:X`.
-     */
-    get titleQuery() {
-        return this.selectedTitleFilter
-            ? `firstTitle:${this.selectedTitleFilter}`
-            : undefined;
-    }
-    /**
-     * Returns a query clause identifying the currently selected creator filter,
-     * e.g., `firstCreator:X`.
-     */
-    get creatorQuery() {
-        return this.selectedCreatorFilter
-            ? `firstCreator:${this.selectedCreatorFilter}`
-            : undefined;
-    }
-    /**
-     * Send Analytics when sorting by title's first letter
-     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-     */
-    sendFilterByTitleAnalytics(prevSelectedLetter) {
-        var _a;
-        if (!prevSelectedLetter && !this.selectedTitleFilter) {
-            return;
-        }
-        const cleared = prevSelectedLetter && !this.selectedTitleFilter;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.filterByTitle,
-            label: cleared
-                ? `clear-${prevSelectedLetter}`
-                : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
-        });
-    }
-    /**
-     * Send Analytics when filtering by creator's first letter
-     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-     */
-    sendFilterByCreatorAnalytics(prevSelectedLetter) {
-        var _a;
-        if (!prevSelectedLetter && !this.selectedCreatorFilter) {
-            return;
-        }
-        const cleared = prevSelectedLetter && !this.selectedCreatorFilter;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.filterByCreator,
-            label: cleared
-                ? `clear-${prevSelectedLetter}`
-                : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
-        });
-    }
-    /**
-     * Handler for changes to which letter is selected in the title alphabet bar.
-     */
-    titleLetterSelected(e) {
-        this.selectedCreatorFilter = null;
-        this.selectedTitleFilter = e.detail.selectedLetter;
-    }
-    /**
-     * Handler for changes to which letter is selected in the creator alphabet bar.
-     */
-    creatorLetterSelected(e) {
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = e.detail.selectedLetter;
-    }
-    /**
-     * The full template for how the facets should be structured in mobile view,
-     * including the collapsible container (with header) and the facets themselves.
-     */
-    get mobileFacetsTemplate() {
-        const toggleFacetsVisible = () => {
-            this.isResizeToMobile = false;
-            this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        };
+    `;
+    }
+    /**
+     * Handler for when the user requests to remove all checked items via the manage bar.
+     * Emits an `itemRemovalRequested` event with all checked tile models.
+     */
+    handleRemoveItems() {
+        this.dispatchEvent(new CustomEvent('itemRemovalRequested', {
+            detail: {
+                items: this.checkedTileModels.map(model => ({
+                    ...model,
+                    date: formatDate(model.datePublished, 'long'),
+                })),
+            },
+        }));
+    }
+    /**
+     * Removes all tile models that are currently checked & adjusts the paging
+     * of the data source to account for any new gaps in the data.
+     */
+    removeCheckedTiles() {
+        // To make sure our data source remains page-aligned, we will offset our data source by
+        // the number of removed tiles, so that we can just add the offset when the infinite
+        // scroller queries for cell contents.
+        // This only matters while we're still viewing the same set of results. If the user changes
+        // their query/filters/sort, then the data source is overwritten and the offset cleared.
+        const { checkedTileModels, uncheckedTileModels } = this;
+        const numChecked = checkedTileModels.length;
+        if (numChecked === 0)
+            return;
+        this.tileModelOffset += numChecked;
+        const newDataSource = {};
+        // Which page the remaining tile models start on, post-offset
+        let offsetPageNumber = Math.floor(this.tileModelOffset / this.pageSize) + 1;
+        let indexOnPage = this.tileModelOffset % this.pageSize;
+        // Fill the pages up to that point with empty models
+        for (let page = 1; page <= offsetPageNumber; page += 1) {
+            const remainingHidden = this.tileModelOffset - this.pageSize * (page - 1);
+            const offsetCellsOnPage = Math.min(this.pageSize, remainingHidden);
+            newDataSource[page] = Array(offsetCellsOnPage).fill(undefined);
+        }
+        // Shift all the remaining tiles into their new positions in the data source
+        for (const model of uncheckedTileModels) {
+            if (!newDataSource[offsetPageNumber])
+                newDataSource[offsetPageNumber] = [];
+            newDataSource[offsetPageNumber].push(model);
+            indexOnPage += 1;
+            if (indexOnPage >= this.pageSize) {
+                offsetPageNumber += 1;
+                indexOnPage = 0;
+            }
+        }
+        // Swap in the new data source and update the infinite scroller
+        this.dataSource = newDataSource;
+        if (this.totalResults)
+            this.totalResults -= numChecked;
+        if (this.infiniteScroller) {
+            this.infiniteScroller.itemCount -= numChecked;
+            this.infiniteScroller.refreshAllVisibleCells();
+        }
+    }
+    /**
+     * Checks every tile's management checkbox
+     */
+    checkAllTiles() {
+        this.mapDataSource(model => ({ ...model, checked: true }));
+    }
+    /**
+     * Unchecks every tile's management checkbox
+     */
+    uncheckAllTiles() {
+        this.mapDataSource(model => ({ ...model, checked: false }));
+    }
+    /**
+     * Applies the given map function to all of the tile models in every page of the data
+     * source. This method updates the data source object in immutable fashion.
+     *
+     * @param mapFn A callback function to apply on each tile model, as with Array.map
+     */
+    mapDataSource(mapFn) {
+        var _a;
+        this.dataSource = Object.fromEntries(Object.entries(this.dataSource).map(([page, tileModels]) => [
+            page,
+            tileModels.map((model, index, array) => model ? mapFn(model, index, array) : model),
+        ]));
+        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+    }
+    /**
+     * An array of all the tile models whose management checkboxes are checked
+     */
+    get checkedTileModels() {
+        return this.getFilteredTileModels(model => model.checked);
+    }
+    /**
+     * An array of all the tile models whose management checkboxes are unchecked
+     */
+    get uncheckedTileModels() {
+        return this.getFilteredTileModels(model => !model.checked);
+    }
+    /**
+     * Returns a flattened, filtered array of all the tile models in the data source
+     * for which the given predicate returns a truthy value.
+     *
+     * @param predicate A callback function to apply on each tile model, as with Array.filter
+     * @returns A filtered array of tile models satisfying the predicate
+     */
+    getFilteredTileModels(predicate) {
+        return Object.values(this.dataSource)
+            .flat()
+            .filter((model, index, array) => model ? predicate(model, index, array) : false);
+    }
+    userChangedSort(e) {
+        var _a;
+        const { selectedSort, sortDirection } = e.detail;
+        this.selectedSort = selectedSort;
+        this.sortDirection = sortDirection;
+        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
+            this.goToPage(1);
+        }
+        this.currentPage = 1;
+    }
+    sendSortByAnalytics(prevSortDirection) {
+        var _a;
+        const directionCleared = prevSortDirection && !this.sortDirection;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.sortBy,
+            label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
+        });
+    }
+    selectedSortChanged() {
+        var _a;
+        const sortOption = SORT_OPTIONS[this.selectedSort];
+        if (!sortOption.handledBySearchService) {
+            this.sortParam = null;
+            return;
+        }
+        // If the sort option specified in the URL is unrecognized, we just use it as-is
+        const urlSortParam = new URL(window.location.href).searchParams.get('sort');
+        const sortField = (_a = sortOption.searchServiceKey) !== null && _a !== void 0 ? _a : urlSortParam === null || urlSortParam === void 0 ? void 0 : urlSortParam.replace(/^-/, '');
+        // If the sort direction is still null at this point, then we assume ascending
+        // (i.e., it was unrecognized and had no directional flag)
+        if (!this.sortDirection)
+            this.sortDirection = 'asc';
+        if (!sortField)
+            return;
+        this.sortParam = { field: sortField, direction: this.sortDirection };
+        // Lazy-load the alphabet counts for title/creator sort bar as needed
+        this.updatePrefixFiltersForCurrentSort();
+    }
+    displayModeChanged(e) {
+        var _a;
+        this.displayMode = e.detail.displayMode;
+        if (this.displayMode) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+                category: this.searchContext,
+                action: analyticsActions.displayMode,
+                label: this.displayMode,
+            });
+        }
+    }
+    /**
+     * Returns a query clause identifying the currently selected title filter,
+     * e.g., `firstTitle:X`.
+     */
+    get titleQuery() {
+        return this.selectedTitleFilter
+            ? `firstTitle:${this.selectedTitleFilter}`
+            : undefined;
+    }
+    /**
+     * Returns a query clause identifying the currently selected creator filter,
+     * e.g., `firstCreator:X`.
+     */
+    get creatorQuery() {
+        return this.selectedCreatorFilter
+            ? `firstCreator:${this.selectedCreatorFilter}`
+            : undefined;
+    }
+    /**
+     * Send Analytics when sorting by title's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     */
+    sendFilterByTitleAnalytics(prevSelectedLetter) {
+        var _a;
+        if (!prevSelectedLetter && !this.selectedTitleFilter) {
+            return;
+        }
+        const cleared = prevSelectedLetter && !this.selectedTitleFilter;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.filterByTitle,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
+        });
+    }
+    /**
+     * Send Analytics when filtering by creator's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     */
+    sendFilterByCreatorAnalytics(prevSelectedLetter) {
+        var _a;
+        if (!prevSelectedLetter && !this.selectedCreatorFilter) {
+            return;
+        }
+        const cleared = prevSelectedLetter && !this.selectedCreatorFilter;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.filterByCreator,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
+        });
+    }
+    /**
+     * Handler for changes to which letter is selected in the title alphabet bar.
+     */
+    titleLetterSelected(e) {
+        this.selectedCreatorFilter = null;
+        this.selectedTitleFilter = e.detail.selectedLetter;
+    }
+    /**
+     * Handler for changes to which letter is selected in the creator alphabet bar.
+     */
+    creatorLetterSelected(e) {
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = e.detail.selectedLetter;
+    }
+    /**
+     * The full template for how the facets should be structured in mobile view,
+     * including the collapsible container (with header) and the facets themselves.
+     */
+    get mobileListTemplate() {
+        const toggleFacetsVisible = () => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        };
         return html `
       <details
         id="mobile-filter-collapse"
@@ -698,17 +701,43 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       >
         <summary>
           <span class="collapser-icon">${chevronIcon}</span>
-          <h2>Filters</h2>
+          <h2>Someone Lists</h2>
           ${this.clearFiltersBtnTemplate(true)}
         </summary>
         ${this.facetsTemplate}
       </details>
-    `;
-    }
-    /**
-     * The template for the facets component alone, without any surrounding wrappers.
-     */
-    get facetsTemplate() {
+    `;
+    }
+    /**
+     * The full template for how the facets should be structured in mobile view,
+     * including the collapsible container (with header) and the facets themselves.
+     */
+    get mobileFacetsTemplate() {
+        const toggleFacetsVisible = () => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        };
+        return html `
+      <details
+        id="mobile-filter-collapse"
+        @click=${toggleFacetsVisible}
+        @keyup=${toggleFacetsVisible}
+      >
+        <summary>
+          <span class="collapser-icon">${chevronIcon}</span>
+          <h2>Filters</h2>
+          ${this.clearFiltersBtnTemplate(true)}
+        </summary>
+        <div id="facet-top-view">
+          <slot name="facet-top-slot"></slot>
+        </div>
+      </details>
+    `;
+    }
+    /**
+     * The template for the facets component alone, without any surrounding wrappers.
+     */
+    get facetsTemplate() {
         return html `
       <collection-facets
         @facetsChanged=${this.facetsChanged}
@@ -742,41 +771,41 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .analyticsHandler=${this.analyticsHandler}
       >
       </collection-facets>
-    `;
-    }
-    /**
-     * The HTML template for the "Clear all filters" button, or `nothing` if no
-     * filters are currently active.
-     *
-     * @param mobile Whether to style/shorten the button for mobile view
-     */
-    clearFiltersBtnTemplate(mobile) {
-        if (!this.hasActiveFilters)
-            return nothing;
-        const buttonClasses = classMap({
-            'clear-filters-btn': true,
-            mobile,
-        });
-        const buttonText = mobile ? 'Clear all' : 'Clear all filters';
+    `;
+    }
+    /**
+     * The HTML template for the "Clear all filters" button, or `nothing` if no
+     * filters are currently active.
+     *
+     * @param mobile Whether to style/shorten the button for mobile view
+     */
+    clearFiltersBtnTemplate(mobile) {
+        if (!this.hasActiveFilters)
+            return nothing;
+        const buttonClasses = classMap({
+            'clear-filters-btn': true,
+            mobile,
+        });
+        const buttonText = mobile ? 'Clear all' : 'Clear all filters';
         return html `
       <div class="clear-filters-btn-row">
-        ${mobile
-            ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
+        ${mobile
+            ? html `<span class="clear-filters-btn-separator">&nbsp;</span>`
             : nothing}
         <button class=${buttonClasses} @click=${this.clearFilters}>
           ${buttonText}
         </button>
       </div>
-    `;
-    }
-    get loadingTemplate() {
+    `;
+    }
+    get loadingTemplate() {
         return html `
       <div class="loading-cover">
         <circular-activity-indicator></circular-activity-indicator>
       </div>
-    `;
-    }
-    get listHeaderTemplate() {
+    `;
+    }
+    get listHeaderTemplate() {
         return html `
       <div id="list-header">
         <tile-dispatcher
@@ -789,1063 +818,1063 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         >
         </tile-dispatcher>
       </div>
-    `;
-    }
-    histogramDateRangeUpdated(e) {
-        var _a;
-        const { minDate, maxDate } = e.detail;
-        [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.histogramChanged,
-            label: this.dateRangeQueryClause,
-        });
-    }
-    get dateRangeQueryClause() {
-        if (!this.minSelectedDate || !this.maxSelectedDate) {
-            return undefined;
-        }
-        return `year:[${this.minSelectedDate} TO ${this.maxSelectedDate}]`;
-    }
-    /**
-     * Emits an event indicating a change in whether the manage mode is shown.
-     */
-    emitManageModeChangedEvent() {
-        this.dispatchEvent(new CustomEvent('manageModeChanged', {
-            detail: this.isManageView,
-        }));
-    }
-    firstUpdated() {
-        this.setupStateRestorationObserver();
-        this.restoreState();
-    }
-    updated(changed) {
-        var _a, _b;
-        if (changed.has('placeholderType') && this.placeholderType === null) {
-            if (!this.leftColIntersectionObserver) {
-                this.setupLeftColumnScrollListeners();
-            }
-            if (!this.facetsIntersectionObserver) {
-                this.setupFacetsScrollListeners();
-            }
-            this.updateLeftColumnHeight();
-        }
-        if (changed.has('displayMode') ||
-            changed.has('baseNavigationUrl') ||
-            changed.has('baseImageUrl') ||
-            changed.has('loggedIn')) {
-            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
-        }
-        if (changed.has('baseQuery') ||
-            changed.has('searchType') ||
-            changed.has('withinCollection')) {
-            // Unless this query/search type update is from the initial page load or the
-            // result of hitting the back button,
-            // we need to clear any existing filters since they may no longer be valid for
-            // the new set of search results.
-            if (!this.historyPopOccurred && this.initialQueryChangeHappened) {
-                // Ordinarily, we leave the sort param unchanged between searches.
-                // However, if we are changing the target collection itself, we want the sort cleared too,
-                // since different collections may have different sorting options available.
-                const shouldClearSort = changed.has('withinCollection') &&
-                    !changed.has('selectedSort') &&
-                    !changed.has('sortDirection');
-                // Otherwise, only clear filters that haven't been simultaneously applied in this update
-                this.clearFilters({
-                    sort: shouldClearSort,
-                    facets: !changed.has('selectedFacets'),
-                    dateRange: !(changed.has('minSelectedDate') || changed.has('maxSelectedDate')),
-                    letterFilters: !(changed.has('selectedTitleFilter') ||
-                        changed.has('selectedCreatorFilter')),
-                });
-            }
-        }
-        if (changed.has('baseQuery')) {
-            this.emitBaseQueryChanged();
-        }
-        if (changed.has('searchType')) {
-            this.emitSearchTypeChanged();
-        }
-        if (changed.has('currentPage') || changed.has('displayMode')) {
-            this.persistState();
-        }
-        if (changed.has('baseQuery') ||
-            changed.has('minSelectedDate') ||
-            changed.has('maxSelectedDate') ||
-            changed.has('selectedFacets') ||
-            changed.has('searchService') ||
-            changed.has('withinCollection')) {
-            this.refreshLetterCounts();
-        }
-        if (changed.has('selectedSort') || changed.has('sortDirection')) {
-            const prevSortDirection = changed.get('sortDirection');
-            this.sendSortByAnalytics(prevSortDirection);
-            this.selectedSortChanged();
-        }
-        if (changed.has('selectedTitleFilter')) {
-            this.sendFilterByTitleAnalytics(changed.get('selectedTitleFilter'));
-        }
-        if (changed.has('selectedCreatorFilter')) {
-            this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
-        }
-        if (changed.has('baseQuery') ||
-            changed.has('searchType') ||
-            changed.has('selectedTitleFilter') ||
-            changed.has('selectedCreatorFilter') ||
-            changed.has('minSelectedDate') ||
-            changed.has('maxSelectedDate') ||
-            changed.has('sortParam') ||
-            changed.has('selectedFacets') ||
-            changed.has('searchService') ||
-            changed.has('withinCollection')) {
-            this.handleQueryChange();
-        }
-        if (changed.has('searchResultsLoading')) {
-            this.emitSearchResultsLoadingChanged();
-        }
-        if (changed.has('facetsLoading') &&
-            this.facetsLoading &&
-            this.collectionFacets) {
-            this.collectionFacets.moreLinksVisible =
-                this.searchType !== SearchType.FULLTEXT;
-        }
-        if (changed.has('pagesToRender')) {
-            if (!this.endOfDataReached && this.infiniteScroller) {
-                this.infiniteScroller.itemCount = this.estimatedTileCount;
-            }
-        }
-        if (changed.has('isManageView')) {
-            if (this.isManageView)
-                this.displayMode = 'grid';
-            (_b = this.infiniteScroller) === null || _b === void 0 ? void 0 : _b.refreshAllVisibleCells();
-            this.emitManageModeChangedEvent();
-        }
-        if (changed.has('resizeObserver')) {
-            const oldObserver = changed.get('resizeObserver');
-            if (oldObserver)
-                this.disconnectResizeObserver(oldObserver);
-            this.setupResizeObserver();
-        }
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        if (this.resizeObserver) {
-            this.disconnectResizeObserver(this.resizeObserver);
-        }
-        if (this.boundNavigationHandler) {
-            window.removeEventListener('popstate', this.boundNavigationHandler);
-        }
-        (_a = this.leftColIntersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.facetsIntersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        window.removeEventListener('resize', this.updateLeftColumnHeight);
-    }
-    handleResize(entry) {
-        const previousView = this.mobileView;
-        if (entry.target === this.contentContainer) {
-            this.contentWidth = entry.contentRect.width;
-            this.mobileView =
-                this.contentWidth > 0 && this.contentWidth < this.mobileBreakpoint;
-            // If changing from desktop to mobile disable transition
-            if (this.mobileView && !previousView) {
-                this.isResizeToMobile = true;
-            }
-        }
-        // Ensure the facet sidebar remains sized correctly
-        this.updateLeftColumnHeight();
-    }
-    /**
-     * Sets up listeners for events that may require updating the left column height.
-     */
-    setupLeftColumnScrollListeners() {
-        var _a;
-        // We observe intersections between the left column's scroll sentinel and
-        // the viewport, so that we can ensure the left column is always sized to
-        // match the _available_ viewport height. This should generally be more
-        // performant than listening to scroll events on the page or column.
-        const leftColumnSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#left-column-scroll-sentinel');
-        if (leftColumnSentinel) {
-            this.leftColIntersectionObserver = new IntersectionObserver(this.updateLeftColumnHeight, {
-                threshold: [...Array(101).keys()].map(n => n / 100), // Threshold every 1%
-            });
-            this.leftColIntersectionObserver.observe(leftColumnSentinel);
-        }
-        // We also listen for window resize events, as they are not always captured
-        // by the resize observer and can affect the desired height of the left column.
-        window.addEventListener('resize', this.updateLeftColumnHeight);
-    }
-    /**
-     * Sets up listeners to control whether the facet sidebar shows its bottom fade-out.
-     * Note this uses a separate IntersectionObserver from the left column, because we
-     * don't need granular intersection thresholds for this.
-     */
-    setupFacetsScrollListeners() {
-        var _a;
-        const facetsSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#facets-scroll-sentinel');
-        if (facetsSentinel) {
-            this.facetsIntersectionObserver = new IntersectionObserver(this.updateFacetFadeOut);
-            this.facetsIntersectionObserver.observe(facetsSentinel);
-        }
-    }
-    emitBaseQueryChanged() {
-        this.dispatchEvent(new CustomEvent('baseQueryChanged', {
-            detail: {
-                baseQuery: this.baseQuery,
-            },
-        }));
-    }
-    emitSearchTypeChanged() {
-        this.dispatchEvent(new CustomEvent('searchTypeChanged', {
-            detail: this.searchType,
-        }));
-    }
-    emitEmptyResults() {
-        this.dispatchEvent(new Event('emptyResults'));
-    }
-    disconnectResizeObserver(resizeObserver) {
-        resizeObserver.removeObserver({
-            target: this.contentContainer,
-            handler: this,
-        });
-    }
-    setupResizeObserver() {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.addObserver({
-            target: this.contentContainer,
-            handler: this,
-        });
-    }
-    /**
-     * When the visible cells change from the infinite scroller, we want to emit
-     * which page is currently visible so the consumer can update its UI or the URL
-     *
-     * @param e
-     * @returns
-     */
-    visibleCellsChanged(e) {
-        if (this.isScrollingToCell)
-            return;
-        const { visibleCellIndices } = e.detail;
-        if (visibleCellIndices.length === 0)
-            return;
-        const lastVisibleCellIndex = visibleCellIndices[visibleCellIndices.length - 1];
-        const lastVisibleCellPage = Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
-        if (this.currentPage !== lastVisibleCellPage) {
-            this.currentPage = lastVisibleCellPage;
-        }
-        const event = new CustomEvent('visiblePageChanged', {
-            detail: {
-                pageNumber: lastVisibleCellPage,
-            },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * A Promise which, after each query change, resolves once the fetches for the initial
-     * search have completed. Waits for *both* the hits and aggregations fetches to finish.
-     *
-     * Ensure you await this component's `updateComplete` promise before awaiting this
-     * one, to ensure you do not await an obsolete promise from the previous update.
-     */
-    get initialSearchComplete() {
-        return this._initialSearchCompletePromise;
-    }
-    async handleQueryChange() {
-        var _a;
-        // only reset if the query has actually changed
-        if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
-            return;
-        // If the new state prevents us from updating the search results, don't reset
-        if (!this.canPerformSearch)
-            return;
-        this.previousQueryKey = this.pageFetchQueryKey;
-        this.dataSource = {};
-        this.tileModelOffset = 0;
-        this.totalResults = undefined;
-        this.aggregations = undefined;
-        this.fullYearsHistogramAggregation = undefined;
-        this.pageFetchesInProgress = {};
-        this.endOfDataReached = false;
-        this.pagesToRender =
-            this.initialPageNumber === 1
-                ? 2 // First two pages are batched into one request when starting from page 1
-                : this.initialPageNumber;
-        this.queryErrorMessage = undefined;
-        // Reset the infinite scroller's item count, so that it
-        // shows tile placeholders until the new query's results load in
-        if (this.infiniteScroller) {
-            this.infiniteScroller.itemCount = this.estimatedTileCount;
-            this.infiniteScroller.reload();
-        }
-        if (this.withinCollection && ((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim())) {
-            this.defaultSortField = SortField.relevance;
-            this.defaultSortDirection = null;
-        }
-        if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
-            this.scrollToPage(this.initialPageNumber);
-        }
-        this.initialQueryChangeHappened = true;
-        // if the query changed as part of a window.history pop event, we don't want to
-        // persist the state because it overwrites the forward history
-        if (!this.historyPopOccurred) {
-            this.persistState();
-        }
-        this.historyPopOccurred = false;
-        // Reset the `initialSearchComplete` promise with a new value for the imminent search
-        this._initialSearchCompletePromise = new Promise(res => {
-            this._initialSearchCompleteResolver = res;
-        });
-        // Fire the initial page and facets requests
-        await Promise.all([this.doInitialPageFetch(), this.fetchFacets()]);
-        // Resolve the `initialSearchComplete` promise for this search
-        this._initialSearchCompleteResolver(true);
-    }
-    setupStateRestorationObserver() {
-        if (this.boundNavigationHandler)
-            return;
-        this.boundNavigationHandler = this.historyNavigationHandler.bind(this);
-        // when the user navigates back, we want to update the UI to match the URL
-        window.addEventListener('popstate', this.boundNavigationHandler);
-    }
-    historyNavigationHandler() {
-        this.historyPopOccurred = true;
-        this.restoreState();
-    }
-    restoreState() {
-        var _a, _b, _c, _d, _e;
-        const restorationState = this.restorationStateHandler.getRestorationState();
-        this.displayMode = restorationState.displayMode;
-        if (restorationState.searchType != null)
-            this.searchType = restorationState.searchType;
-        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.default;
-        this.sortDirection = (_b = restorationState.sortDirection) !== null && _b !== void 0 ? _b : null;
-        this.selectedTitleFilter = (_c = restorationState.selectedTitleFilter) !== null && _c !== void 0 ? _c : null;
-        this.selectedCreatorFilter = (_d = restorationState.selectedCreatorFilter) !== null && _d !== void 0 ? _d : null;
-        this.selectedFacets = restorationState.selectedFacets;
-        this.baseQuery = restorationState.baseQuery;
-        this.currentPage = (_e = restorationState.currentPage) !== null && _e !== void 0 ? _e : 1;
-        this.minSelectedDate = restorationState.minSelectedDate;
-        this.maxSelectedDate = restorationState.maxSelectedDate;
-        if (this.currentPage > 1) {
-            this.goToPage(this.currentPage);
-        }
-    }
-    persistState() {
-        var _a, _b, _c, _d;
-        const restorationState = {
-            displayMode: this.displayMode,
-            searchType: this.searchType,
-            selectedSort: this.selectedSort,
-            sortDirection: (_a = this.sortDirection) !== null && _a !== void 0 ? _a : undefined,
-            selectedFacets: (_b = this.selectedFacets) !== null && _b !== void 0 ? _b : getDefaultSelectedFacets(),
-            baseQuery: this.baseQuery,
-            currentPage: this.currentPage,
-            titleQuery: this.titleQuery,
-            creatorQuery: this.creatorQuery,
-            minSelectedDate: this.minSelectedDate,
-            maxSelectedDate: this.maxSelectedDate,
-            selectedTitleFilter: (_c = this.selectedTitleFilter) !== null && _c !== void 0 ? _c : undefined,
-            selectedCreatorFilter: (_d = this.selectedCreatorFilter) !== null && _d !== void 0 ? _d : undefined,
-        };
-        this.restorationStateHandler.persistState(restorationState);
-    }
-    async doInitialPageFetch() {
-        this.searchResultsLoading = true;
-        // Try to batch 2 initial page requests when possible
-        await this.fetchPage(this.initialPageNumber, 2);
-        this.searchResultsLoading = false;
-    }
-    emitSearchResultsLoadingChanged() {
-        this.dispatchEvent(new CustomEvent('searchResultsLoadingChanged', {
-            detail: {
-                loading: this.searchResultsLoading,
-            },
-        }));
-    }
-    /**
-     * Produces a compact unique ID for a search request that can help with debugging
-     * on the backend by making related requests easier to trace through different services.
-     * (e.g., tying the hits/aggregations requests for the same page back to a single hash).
-     *
-     * @param params The search service parameters for the request
-     * @param kind The kind of request (hits-only, aggregations-only, or both)
-     * @returns A Promise resolving to the uid to apply to the request
-     */
-    async requestUID(params, kind) {
-        var _a;
-        const paramsToHash = JSON.stringify({
-            pageType: params.pageType,
-            pageTarget: params.pageTarget,
-            query: params.query,
-            fields: params.fields,
-            filters: params.filters,
-            sort: params.sort,
-            searchType: this.searchType,
-        });
-        const fullQueryHash = (await sha1(paramsToHash)).slice(0, 20); // First 80 bits of SHA-1 are plenty for this
-        const sessionId = (await this.getSessionId()).slice(0, 20); // Likewise
-        const page = (_a = params.page) !== null && _a !== void 0 ? _a : 0;
-        const kindPrefix = kind.charAt(0); // f = full, h = hits, a = aggregations
-        const currentTime = Date.now();
-        return `R:${fullQueryHash}-S:${sessionId}-P:${page}-K:${kindPrefix}-T:${currentTime}`;
-    }
-    /**
-     * Constructs a search service FilterMap object from the combination of
-     * all the currently-applied filters. This includes any facets, letter
-     * filters, and date range.
-     */
-    get filterMap() {
-        const builder = new FilterMapBuilder();
-        // Add the date range, if applicable
-        if (this.minSelectedDate) {
-            builder.addFilter('year', this.minSelectedDate, FilterConstraint.GREATER_OR_EQUAL);
-        }
-        if (this.maxSelectedDate) {
-            builder.addFilter('year', this.maxSelectedDate, FilterConstraint.LESS_OR_EQUAL);
-        }
-        // Add any selected facets
-        if (this.selectedFacets) {
-            for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
-                const { name, values } = this.prepareFacetForFetch(facetName, facetValues);
-                for (const [value, bucket] of Object.entries(values)) {
-                    let constraint;
-                    if (bucket.state === 'selected') {
-                        constraint = FilterConstraint.INCLUDE;
-                    }
-                    else if (bucket.state === 'hidden') {
-                        constraint = FilterConstraint.EXCLUDE;
-                    }
-                    if (constraint) {
-                        builder.addFilter(name, value, constraint);
-                    }
-                }
-            }
-        }
-        // Add any letter filters
-        if (this.selectedTitleFilter) {
-            builder.addFilter('firstTitle', this.selectedTitleFilter, FilterConstraint.INCLUDE);
-        }
-        if (this.selectedCreatorFilter) {
-            builder.addFilter('firstCreator', this.selectedCreatorFilter, FilterConstraint.INCLUDE);
-        }
-        const filterMap = builder.build();
-        return filterMap;
-    }
-    /** The full query, including year facets and date range clauses */
-    get fullQuery() {
-        var _a, _b;
-        let fullQuery = (_b = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
-        const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
-        if (facetQuery) {
-            fullQuery += ` AND ${facetQuery}`;
-        }
-        if (dateRangeQueryClause) {
-            fullQuery += ` AND ${dateRangeQueryClause}`;
-        }
-        if (sortFilterQueries) {
-            fullQuery += ` AND ${sortFilterQueries}`;
-        }
-        return fullQuery.trim();
-    }
-    /**
-     * Generates a query string for the given facets
-     *
-     * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
-     */
-    get facetQuery() {
-        var _a;
-        if (!this.selectedFacets)
-            return undefined;
-        const facetClauses = [];
-        for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
-            facetClauses.push(this.buildFacetClause(facetName, facetValues));
-        }
-        return (_a = this.joinFacetClauses(facetClauses)) === null || _a === void 0 ? void 0 : _a.trim();
-    }
-    /**
-     * Builds an OR-joined facet clause for the given facet name and values.
-     *
-     * E.g., for name `subject` and values
-     * `{ foo: { state: 'selected' }, bar: { state: 'hidden' } }`
-     * this will produce the clause
-     * `subject:("foo" OR -"bar")`.
-     *
-     * @param facetName The facet type (e.g., 'collection')
-     * @param facetValues The facet buckets, mapped by their keys
-     */
-    buildFacetClause(facetName, facetValues) {
-        const { name: facetQueryName, values } = this.prepareFacetForFetch(facetName, facetValues);
-        const facetEntries = Object.entries(values);
-        if (facetEntries.length === 0)
-            return '';
-        const facetValuesArray = [];
-        for (const [key, facetData] of facetEntries) {
-            const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
-            facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
-        }
-        const valueQuery = facetValuesArray.join(` OR `);
-        return `${facetQueryName}:(${valueQuery})`;
-    }
-    /**
-     * Handles some special pre-request normalization steps for certain facet types
-     * that require them.
-     *
-     * @param facetName The name of the facet type (e.g., 'language')
-     * @param facetValues An array of values for that facet type
-     */
-    prepareFacetForFetch(facetName, facetValues) {
-        // eslint-disable-next-line prefer-const
-        let [normalizedName, normalizedValues] = [facetName, facetValues];
-        // The full "search engine" name of the lending field is "lending___status"
-        if (facetName === 'lending') {
-            normalizedName = 'lending___status';
-        }
-        return {
-            name: normalizedName,
-            values: normalizedValues,
-        };
-    }
-    /**
-     * Takes an array of facet clauses, and combines them into a
-     * full AND-joined facet query string. Empty clauses are ignored.
-     */
-    joinFacetClauses(facetClauses) {
-        const nonEmptyFacetClauses = facetClauses.filter(clause => clause.length > 0);
-        return nonEmptyFacetClauses.length > 0
-            ? `(${nonEmptyFacetClauses.join(' AND ')})`
-            : undefined;
-    }
-    facetsChanged(e) {
-        this.selectedFacets = e.detail;
-    }
-    facetClickHandler({ detail: { key, state: facetState, negative }, }) {
-        var _a, _b;
-        if (negative) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-                category: this.searchContext,
-                action: facetState !== 'none'
-                    ? analyticsActions.facetNegativeSelected
-                    : analyticsActions.facetNegativeDeselected,
-                label: key,
-            });
-        }
-        else {
-            (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
-                category: this.searchContext,
-                action: facetState !== 'none'
-                    ? analyticsActions.facetSelected
-                    : analyticsActions.facetDeselected,
-                label: key,
-            });
-        }
-    }
-    async fetchFacets() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!this.canPerformSearch)
-            return;
-        const { facetFetchQueryKey } = this;
-        const sortParams = this.sortParam ? [this.sortParam] : [];
-        const params = {
-            ...this.collectionParams,
-            query: trimmedQuery || '',
-            rows: 0,
-            filters: this.filterMap,
-            // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
-            aggregationsSize: 10,
-            // Note: we don't need an aggregations param to fetch the default aggregations from the PPS.
-            // The default aggregations for the search_results page type should be what we need here.
-        };
-        params.uid = await this.requestUID({ ...params, sort: sortParams }, 'aggregations');
-        this.facetsLoading = true;
-        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
-        const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
-        // This is checking to see if the query has changed since the data was fetched.
-        // If so, we just want to discard this set of aggregations because they are
-        // likely no longer valid for the newer query.
-        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
-        if (queryChangedSinceFetch)
-            return;
-        if (!success) {
-            const errorMsg = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _c === void 0 ? void 0 : _c.message;
-            const detailMsg = (_e = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.message;
-            if (!errorMsg && !detailMsg) {
-                // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
-                (_g = (_f = window === null || window === void 0 ? void 0 : window.Sentry) === null || _f === void 0 ? void 0 : _f.captureMessage) === null || _g === void 0 ? void 0 : _g.call(_f, 'Missing or malformed facet response from backend', 'error');
-            }
-            return;
-        }
-        const { aggregations, collectionTitles } = success.response;
-        this.aggregations = aggregations;
-        if (collectionTitles) {
-            (_h = this.collectionNameCache) === null || _h === void 0 ? void 0 : _h.addKnownTitles(collectionTitles);
-        }
-        else if ((_j = this.aggregations) === null || _j === void 0 ? void 0 : _j.collection) {
-            (_k = this.collectionNameCache) === null || _k === void 0 ? void 0 : _k.preloadIdentifiers(this.aggregations.collection.buckets.map(bucket => { var _a; return (_a = bucket.key) === null || _a === void 0 ? void 0 : _a.toString(); }));
-        }
-        this.fullYearsHistogramAggregation =
-            (_m = (_l = success === null || success === void 0 ? void 0 : success.response) === null || _l === void 0 ? void 0 : _l.aggregations) === null || _m === void 0 ? void 0 : _m.year_histogram;
-        this.facetsLoading = false;
-    }
-    scrollToPage(pageNumber) {
-        return new Promise(resolve => {
-            const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-            // without this setTimeout, Safari just pauses until the `fetchPage` is complete
-            // then scrolls to the cell
-            setTimeout(() => {
-                var _a;
-                this.isScrollingToCell = true;
-                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.scrollToCell(cellIndexToScrollTo, true);
-                // This timeout is to give the scroll animation time to finish
-                // then updating the infinite scroller once we're done scrolling
-                // There's no scroll animation completion callback so we're
-                // giving it 0.5s to finish.
-                setTimeout(() => {
-                    var _a;
-                    this.isScrollingToCell = false;
-                    (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
-                    resolve();
-                }, 500);
-            }, 0);
-        });
-    }
-    /**
-     * Whether sorting by relevance makes sense for the current state.
-     * Currently equivalent to having a non-empty query.
-     */
-    get isRelevanceSortAvailable() {
-        var _a;
-        return !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
-    }
-    /**
-     * Whether a search may be performed in the current state of the component.
-     * This is only true if the search service is defined, and either
-     *   (a) a non-empty query is set, or
-     *   (b) we are on a collection page in metadata search mode.
-     */
-    get canPerformSearch() {
-        var _a;
-        if (!this.searchService)
-            return false;
-        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
-        const hasNonEmptyQuery = !!trimmedQuery;
-        const isCollectionSearch = !!this.withinCollection;
-        const isMetadataSearch = this.searchType === SearchType.METADATA;
-        // Metadata searches within a collection are allowed to have no query.
-        // Otherwise, a non-empty query must be set.
-        return hasNonEmptyQuery || (isCollectionSearch && isMetadataSearch);
-    }
-    /**
-     * Additional params to pass to the search service if targeting a collection page,
-     * or null otherwise.
-     */
-    get collectionParams() {
-        return this.withinCollection
-            ? { pageType: 'collection_details', pageTarget: this.withinCollection }
-            : null;
-    }
-    /**
-     * The query key is a string that uniquely identifies the current search.
-     * It consists of:
-     *  - The current base query
-     *  - The current collection
-     *  - The current search type
-     *  - Any currently-applied facets
-     *  - Any currently-applied date range
-     *  - Any currently-applied prefix filters
-     *  - The current sort options
-     *
-     * This lets us keep track of queries so we don't persist data that's
-     * no longer relevant.
-     */
-    get pageFetchQueryKey() {
-        var _a, _b, _c, _d;
-        const sortField = (_b = (_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : 'none';
-        const sortDirection = (_d = (_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.direction) !== null && _d !== void 0 ? _d : 'none';
-        return `${this.fullQuery}-${this.withinCollection}-${this.searchType}-${sortField}-${sortDirection}`;
-    }
-    /**
-     * Similar to `pageFetchQueryKey` above, but excludes sort fields since they
-     * are not relevant in determining aggregation queries.
-     */
-    get facetFetchQueryKey() {
-        return `${this.fullQuery}-${this.withinCollection}-${this.searchType}`;
-    }
-    /**
-     * Fetches one or more pages of results and updates the data source.
-     *
-     * @param pageNumber The page number to fetch
-     * @param numInitialPages If this is an initial page fetch (`pageNumber = 1`),
-     *  specifies how many pages to batch together in one request. Ignored
-     *  if `pageNumber != 1`, defaulting to a single page.
-     */
-    async fetchPage(pageNumber, numInitialPages = 1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!this.canPerformSearch)
-            return;
-        // if we already have data, don't fetch again
-        if (this.dataSource[pageNumber])
-            return;
-        if (this.endOfDataReached)
-            return;
-        // Batch multiple initial page requests together if needed (e.g., can request
-        // pages 1 and 2 together in a single request).
-        const numPages = pageNumber === 1 ? numInitialPages : 1;
-        const numRows = this.pageSize * numPages;
-        // if a fetch is already in progress for this query and page, don't fetch again
-        const { pageFetchQueryKey } = this;
-        const pageFetches = (_b = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _b !== void 0 ? _b : new Set();
-        if (pageFetches.has(pageNumber))
-            return;
-        for (let i = 0; i < numPages; i += 1) {
-            pageFetches.add(pageNumber + i);
-        }
-        this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
-        const sortParams = this.sortParam ? [this.sortParam] : [];
-        const params = {
-            ...this.collectionParams,
-            query: trimmedQuery || '',
-            page: pageNumber,
-            rows: numRows,
-            sort: sortParams,
-            filters: this.filterMap,
-            aggregations: { omit: true },
-        };
-        params.uid = await this.requestUID(params, 'hits');
-        const searchResponse = await ((_c = this.searchService) === null || _c === void 0 ? void 0 : _c.search(params, this.searchType));
-        const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
-        // This is checking to see if the query has changed since the data was fetched.
-        // If so, we just want to discard the data since there should be a new query
-        // right behind it.
-        const queryChangedSinceFetch = pageFetchQueryKey !== this.pageFetchQueryKey;
-        if (queryChangedSinceFetch)
-            return;
-        if (!success) {
-            const errorMsg = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.message;
-            const detailMsg = (_f = (_e = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _e === void 0 ? void 0 : _e.details) === null || _f === void 0 ? void 0 : _f.message;
-            this.queryErrorMessage = `${errorMsg !== null && errorMsg !== void 0 ? errorMsg : ''}${detailMsg ? `; ${detailMsg}` : ''}`;
-            if (!this.queryErrorMessage) {
-                this.queryErrorMessage = 'Missing or malformed response from backend';
-                // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
-                (_h = (_g = window === null || window === void 0 ? void 0 : window.Sentry) === null || _g === void 0 ? void 0 : _g.captureMessage) === null || _h === void 0 ? void 0 : _h.call(_g, this.queryErrorMessage, 'error');
-            }
-            for (let i = 0; i < numPages; i += 1) {
-                (_j = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _j === void 0 ? void 0 : _j.delete(pageNumber + i);
-            }
-            this.searchResultsLoading = false;
-            return;
-        }
-        this.totalResults = success.response.totalResults - this.tileModelOffset;
-        // display event to offshoot when result count is zero.
-        if (this.totalResults === 0) {
-            this.emitEmptyResults();
-        }
-        if (this.withinCollection) {
-            this.collectionInfo = success.response.collectionExtraInfo;
-            // For collections, we want the UI to respect the default sort option
-            // which can be specified in metadata, or otherwise assumed to be week:desc
-            this.applyDefaultCollectionSort(this.collectionInfo);
-            if (this.collectionInfo) {
-                this.parentCollections = [].concat((_l = (_k = this.collectionInfo.public_metadata) === null || _k === void 0 ? void 0 : _k.collection) !== null && _l !== void 0 ? _l : []);
-            }
-        }
-        const { results, collectionTitles } = success.response;
-        if (results && results.length > 0) {
-            // Load any collection titles present on the response into the cache,
-            // or queue up preload fetches for them if none were present.
-            if (collectionTitles) {
-                (_m = this.collectionNameCache) === null || _m === void 0 ? void 0 : _m.addKnownTitles(collectionTitles);
-            }
-            else {
-                this.preloadCollectionNames(results);
-            }
-            // Update the data source for each returned page
-            for (let i = 0; i < numPages; i += 1) {
-                const pageStartIndex = this.pageSize * i;
-                this.updateDataSource(pageNumber + i, results.slice(pageStartIndex, pageStartIndex + this.pageSize));
-            }
-        }
-        // When we reach the end of the data, we can set the infinite scroller's
-        // item count to the real total number of results (rather than the
-        // temporary estimates based on pages rendered so far).
-        const resultCountDiscrepancy = numRows - results.length;
-        if (resultCountDiscrepancy > 0) {
-            this.endOfDataReached = true;
-            if (this.infiniteScroller) {
-                this.infiniteScroller.itemCount = this.totalResults;
-            }
-        }
-        for (let i = 0; i < numPages; i += 1) {
-            (_o = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _o === void 0 ? void 0 : _o.delete(pageNumber + i);
-        }
-    }
-    preloadCollectionNames(results) {
-        var _a;
-        const collectionIds = results
-            .map(result => { var _a; return (_a = result.collection) === null || _a === void 0 ? void 0 : _a.values; })
-            .flat();
-        const collectionIdsArray = Array.from(new Set(collectionIds));
-        (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
-    }
-    /**
-     * Applies any default sort option for the current collection, by checking
-     * for one in the collection's metadata. If none is found, defaults to sorting
-     * descending by:
-     *  - Date Favorited for fav-* collections
-     *  - Weekly views for all other collections
-     */
-    applyDefaultCollectionSort(collectionInfo) {
-        var _a, _b, _c;
-        if (this.baseQuery) {
-            // If there's a query set, then we default to relevance sorting regardless of
-            // the collection metadata-specified sort.
-            this.defaultSortField = SortField.relevance;
-            this.defaultSortDirection = null;
-            return;
-        }
-        // Favorite collections sort on Date Favorited by default.
-        // Other collections fall back to sorting on weekly views.
-        const baseDefaultSort = ((_b = (_a = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _a === void 0 ? void 0 : _a.identifier) === null || _b === void 0 ? void 0 : _b.startsWith('fav-'))
-            ? '-favoritedate'
-            : '-week';
-        // The collection metadata may override the default sorting with something else
-        const metadataSort = (_c = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _c === void 0 ? void 0 : _c['sort-by'];
-        // Prefer the metadata-specified sort if one exists
-        const defaultSortToApply = metadataSort !== null && metadataSort !== void 0 ? metadataSort : baseDefaultSort;
-        // Account for both -field and field:dir formats
-        let [field, dir] = defaultSortToApply.split(':');
-        if (field.startsWith('-')) {
-            field = field.slice(1);
-            dir = 'desc';
-        }
-        else if (!['asc', 'desc'].includes(dir)) {
-            dir = 'asc';
-        }
-        const sortOption = sortOptionFromAPIString(field);
-        const sortField = sortOption.field;
-        if (sortField && sortField !== SortField.default) {
-            this.defaultSortField = sortField;
-            this.defaultSortDirection = dir;
-            this.defaultSortParam = {
-                field: this.defaultSortField,
-                direction: this.defaultSortDirection,
-            };
-        }
-    }
-    /**
-     * This is useful for determining whether we need to reload the scroller.
-     *
-     * When the fetch completes, we need to reload the scroller if the cells for that
-     * page are visible, but if the page is not currenlty visible, we don't need to reload
-     */
-    get currentVisiblePageNumbers() {
-        var _a, _b;
-        const visibleCells = (_b = (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.getVisibleCellIndices()) !== null && _b !== void 0 ? _b : [];
-        const visiblePages = new Set();
-        visibleCells.forEach(cellIndex => {
-            const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;
-            visiblePages.add(visiblePage);
-        });
-        return Array.from(visiblePages);
-    }
-    /**
-     * Update the datasource from the fetch response
-     *
-     * @param pageNumber
-     * @param results
-     */
-    updateDataSource(pageNumber, results) {
-        var _a;
-        // copy our existing datasource so when we set it below, it gets set
-        // instead of modifying the existing dataSource since object changes
-        // don't trigger a re-render
-        const datasource = { ...this.dataSource };
-        const tiles = [];
-        results === null || results === void 0 ? void 0 : results.forEach(result => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-            if (!result.identifier)
-                return;
-            let loginRequired = false;
-            let contentWarning = false;
-            // Check if item and item in "modifying" collection, setting above flags
-            if (((_a = result.collection) === null || _a === void 0 ? void 0 : _a.values.length) &&
-                ((_b = result.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== 'collection') {
-                for (const collection of (_d = (_c = result.collection) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []) {
-                    if (collection === 'loggedin') {
-                        loginRequired = true;
-                        if (contentWarning)
-                            break;
-                    }
-                    if (collection === 'no-preview') {
-                        contentWarning = true;
-                        if (loginRequired)
-                            break;
-                    }
-                }
-            }
-            tiles.push({
-                averageRating: (_e = result.avg_rating) === null || _e === void 0 ? void 0 : _e.value,
-                checked: false,
-                collections: (_g = (_f = result.collection) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : [],
-                collectionFilesCount: (_j = (_h = result.collection_files_count) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 0,
-                collectionSize: (_l = (_k = result.collection_size) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 0,
-                commentCount: (_o = (_m = result.num_reviews) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 0,
-                creator: (_p = result.creator) === null || _p === void 0 ? void 0 : _p.value,
-                creators: (_r = (_q = result.creator) === null || _q === void 0 ? void 0 : _q.values) !== null && _r !== void 0 ? _r : [],
-                dateAdded: (_s = result.addeddate) === null || _s === void 0 ? void 0 : _s.value,
-                dateArchived: (_t = result.publicdate) === null || _t === void 0 ? void 0 : _t.value,
-                datePublished: (_u = result.date) === null || _u === void 0 ? void 0 : _u.value,
-                dateReviewed: (_v = result.reviewdate) === null || _v === void 0 ? void 0 : _v.value,
-                description: (_w = result.description) === null || _w === void 0 ? void 0 : _w.values.join('\n'),
-                favCount: (_y = (_x = result.num_favorites) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 0,
-                href: this.collapseRepeatedQuotes((_z = result.__href__) === null || _z === void 0 ? void 0 : _z.value),
-                identifier: result.identifier,
-                issue: (_0 = result.issue) === null || _0 === void 0 ? void 0 : _0.value,
-                itemCount: (_2 = (_1 = result.item_count) === null || _1 === void 0 ? void 0 : _1.value) !== null && _2 !== void 0 ? _2 : 0,
-                mediatype: this.getMediatype(result),
-                snippets: (_4 = (_3 = result.highlight) === null || _3 === void 0 ? void 0 : _3.values) !== null && _4 !== void 0 ? _4 : [],
-                source: (_5 = result.source) === null || _5 === void 0 ? void 0 : _5.value,
-                subjects: (_7 = (_6 = result.subject) === null || _6 === void 0 ? void 0 : _6.values) !== null && _7 !== void 0 ? _7 : [],
-                title: (_9 = (_8 = result.title) === null || _8 === void 0 ? void 0 : _8.value) !== null && _9 !== void 0 ? _9 : '',
-                volume: (_10 = result.volume) === null || _10 === void 0 ? void 0 : _10.value,
-                viewCount: (_12 = (_11 = result.downloads) === null || _11 === void 0 ? void 0 : _11.value) !== null && _12 !== void 0 ? _12 : 0,
-                weeklyViewCount: (_13 = result.week) === null || _13 === void 0 ? void 0 : _13.value,
-                loginRequired,
-                contentWarning,
-            });
-        });
-        datasource[pageNumber] = tiles;
-        this.dataSource = datasource;
-        const visiblePages = this.currentVisiblePageNumbers;
-        const needsReload = visiblePages.includes(pageNumber);
-        if (needsReload) {
-            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
-        }
-    }
-    getMediatype(result) {
-        var _a, _b, _c;
-        /**
-         * hit_type == 'favorited_search' is basically a new hit_type
-         * - we are getting from PPS.
-         * - which gives response for fav- collection
-         * - having favorited items like account/collection/item etc..
-         * - as user can also favorite a search result (a search page)
-         * - so we need to have response (having fav- items and fav- search results)
-         *
-         * if backend hit_type == 'favorited_search'
-         * - let's assume a "search" as new mediatype
-         */
-        if (((_a = result === null || result === void 0 ? void 0 : result.rawMetadata) === null || _a === void 0 ? void 0 : _a.hit_type) === 'favorited_search') {
-            return 'search';
-        }
-        return (_c = (_b = result.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 'data';
-    }
-    /**
-     * Returns the input string, but removing one set of quotes from all instances of
-     * ""clauses wrapped in two sets of quotes"". This assumes the quotes are already
-     * URL-encoded.
-     *
-     * This should be a temporary measure to address the fact that the __href__ field
-     * sometimes acquires extra quotation marks during query rewriting. Once there is a
-     * full Lucene parser in place that handles quoted queries correctly, this can likely
-     * be removed.
-     */
-    collapseRepeatedQuotes(str) {
-        return str === null || str === void 0 ? void 0 : str.replace(/%22%22(?!%22%22)(.+?)%22%22/g, '%22$1%22');
-    }
-    /** Fetches the aggregation buckets for the given prefix filter type. */
-    async fetchPrefixFilterBuckets(filterType) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!this.canPerformSearch)
-            return [];
-        const filterAggregationKey = prefixFilterAggregationKeys[filterType];
-        const sortParams = this.sortParam ? [this.sortParam] : [];
-        const params = {
-            ...this.collectionParams,
-            query: trimmedQuery || '',
-            rows: 0,
-            filters: this.filterMap,
-            // Only fetch the firstTitle or firstCreator aggregation
-            aggregations: { simpleParams: [filterAggregationKey] },
-            // Fetch all 26 letter buckets
-            aggregationsSize: 26,
-        };
-        params.uid = await this.requestUID({ ...params, sort: sortParams }, 'aggregations');
-        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
-        return ((_g = (_f = (_e = (_d = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.aggregations) === null || _e === void 0 ? void 0 : _e[filterAggregationKey]) === null || _f === void 0 ? void 0 : _f.buckets) !== null && _g !== void 0 ? _g : []);
-    }
-    /** Fetches and caches the prefix filter counts for the given filter type. */
-    async updatePrefixFilterCounts(filterType) {
-        const { facetFetchQueryKey } = this;
-        const buckets = await this.fetchPrefixFilterBuckets(filterType);
-        // Don't update the filter counts for an outdated query (if it has been changed
-        // since we sent the request)
-        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
-        if (queryChangedSinceFetch)
-            return;
-        // Unpack the aggregation buckets into a simple map like { 'A': 50, 'B': 25, ... }
-        this.prefixFilterCountMap = { ...this.prefixFilterCountMap }; // Clone the object to trigger an update
-        this.prefixFilterCountMap[filterType] = buckets.reduce((acc, bucket) => {
-            acc[bucket.key.toUpperCase()] = bucket.doc_count;
-            return acc;
-        }, {});
-    }
-    /**
-     * Fetches and caches the prefix filter counts for the current sort type,
-     * provided it is one that permits prefix filtering. (If not, this does nothing).
-     */
-    async updatePrefixFiltersForCurrentSort() {
-        if (['title', 'creator'].includes(this.selectedSort)) {
-            const filterType = this.selectedSort;
-            if (!this.prefixFilterCountMap[filterType]) {
-                this.updatePrefixFilterCounts(filterType);
-            }
-        }
-    }
-    /**
-     * Clears the cached letter counts for both title and creator, and
-     * fetches a new set of counts for whichever of them is the currently
-     * selected sort option (which may be neither).
-     *
-     * Call this whenever the counts are invalidated (e.g., by a query change).
-     */
-    refreshLetterCounts() {
-        if (Object.keys(this.prefixFilterCountMap).length > 0) {
-            this.prefixFilterCountMap = {};
-        }
-        this.updatePrefixFiltersForCurrentSort();
-    }
-    /**
-     * Callback when a result is selected
-     */
-    resultSelected(event) {
-        var _a, _b, _c;
-        if (this.isManageView) {
-            // Checked/unchecked state change -- rerender to ensure it propagates
-            // this.mapDataSource(model => ({ ...model }));
-            const cellIndex = Object.values(this.dataSource)
-                .flat()
-                .indexOf(event.detail);
-            if (cellIndex >= 0)
-                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshCell(cellIndex - this.tileModelOffset);
-        }
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.resultSelected,
-            label: event.detail.mediatype,
-        });
-        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
-            category: this.searchContext,
-            action: analyticsActions.resultSelected,
-            label: `page-${this.currentPage}`,
-        });
-    }
-    cellForIndex(index) {
-        const model = this.tileModelAtCellIndex(index);
-        if (!model)
-            return undefined;
+    `;
+    }
+    histogramDateRangeUpdated(e) {
+        var _a;
+        const { minDate, maxDate } = e.detail;
+        [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.histogramChanged,
+            label: this.dateRangeQueryClause,
+        });
+    }
+    get dateRangeQueryClause() {
+        if (!this.minSelectedDate || !this.maxSelectedDate) {
+            return undefined;
+        }
+        return `year:[${this.minSelectedDate} TO ${this.maxSelectedDate}]`;
+    }
+    /**
+     * Emits an event indicating a change in whether the manage mode is shown.
+     */
+    emitManageModeChangedEvent() {
+        this.dispatchEvent(new CustomEvent('manageModeChanged', {
+            detail: this.isManageView,
+        }));
+    }
+    firstUpdated() {
+        this.setupStateRestorationObserver();
+        this.restoreState();
+    }
+    updated(changed) {
+        var _a, _b;
+        if (changed.has('placeholderType') && this.placeholderType === null) {
+            if (!this.leftColIntersectionObserver) {
+                this.setupLeftColumnScrollListeners();
+            }
+            if (!this.facetsIntersectionObserver) {
+                this.setupFacetsScrollListeners();
+            }
+            this.updateLeftColumnHeight();
+        }
+        if (changed.has('displayMode') ||
+            changed.has('baseNavigationUrl') ||
+            changed.has('baseImageUrl') ||
+            changed.has('loggedIn')) {
+            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
+        }
+        if (changed.has('baseQuery') ||
+            changed.has('searchType') ||
+            changed.has('withinCollection')) {
+            // Unless this query/search type update is from the initial page load or the
+            // result of hitting the back button,
+            // we need to clear any existing filters since they may no longer be valid for
+            // the new set of search results.
+            if (!this.historyPopOccurred && this.initialQueryChangeHappened) {
+                // Ordinarily, we leave the sort param unchanged between searches.
+                // However, if we are changing the target collection itself, we want the sort cleared too,
+                // since different collections may have different sorting options available.
+                const shouldClearSort = changed.has('withinCollection') &&
+                    !changed.has('selectedSort') &&
+                    !changed.has('sortDirection');
+                // Otherwise, only clear filters that haven't been simultaneously applied in this update
+                this.clearFilters({
+                    sort: shouldClearSort,
+                    facets: !changed.has('selectedFacets'),
+                    dateRange: !(changed.has('minSelectedDate') || changed.has('maxSelectedDate')),
+                    letterFilters: !(changed.has('selectedTitleFilter') ||
+                        changed.has('selectedCreatorFilter')),
+                });
+            }
+        }
+        if (changed.has('baseQuery')) {
+            this.emitBaseQueryChanged();
+        }
+        if (changed.has('searchType')) {
+            this.emitSearchTypeChanged();
+        }
+        if (changed.has('currentPage') || changed.has('displayMode')) {
+            this.persistState();
+        }
+        if (changed.has('baseQuery') ||
+            changed.has('minSelectedDate') ||
+            changed.has('maxSelectedDate') ||
+            changed.has('selectedFacets') ||
+            changed.has('searchService') ||
+            changed.has('withinCollection')) {
+            this.refreshLetterCounts();
+        }
+        if (changed.has('selectedSort') || changed.has('sortDirection')) {
+            const prevSortDirection = changed.get('sortDirection');
+            this.sendSortByAnalytics(prevSortDirection);
+            this.selectedSortChanged();
+        }
+        if (changed.has('selectedTitleFilter')) {
+            this.sendFilterByTitleAnalytics(changed.get('selectedTitleFilter'));
+        }
+        if (changed.has('selectedCreatorFilter')) {
+            this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
+        }
+        if (changed.has('baseQuery') ||
+            changed.has('searchType') ||
+            changed.has('selectedTitleFilter') ||
+            changed.has('selectedCreatorFilter') ||
+            changed.has('minSelectedDate') ||
+            changed.has('maxSelectedDate') ||
+            changed.has('sortParam') ||
+            changed.has('selectedFacets') ||
+            changed.has('searchService') ||
+            changed.has('withinCollection')) {
+            this.handleQueryChange();
+        }
+        if (changed.has('searchResultsLoading')) {
+            this.emitSearchResultsLoadingChanged();
+        }
+        if (changed.has('facetsLoading') &&
+            this.facetsLoading &&
+            this.collectionFacets) {
+            this.collectionFacets.moreLinksVisible =
+                this.searchType !== SearchType.FULLTEXT;
+        }
+        if (changed.has('pagesToRender')) {
+            if (!this.endOfDataReached && this.infiniteScroller) {
+                this.infiniteScroller.itemCount = this.estimatedTileCount;
+            }
+        }
+        if (changed.has('isManageView')) {
+            if (this.isManageView)
+                this.displayMode = 'grid';
+            (_b = this.infiniteScroller) === null || _b === void 0 ? void 0 : _b.refreshAllVisibleCells();
+            this.emitManageModeChangedEvent();
+        }
+        if (changed.has('resizeObserver')) {
+            const oldObserver = changed.get('resizeObserver');
+            if (oldObserver)
+                this.disconnectResizeObserver(oldObserver);
+            this.setupResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+        if (this.boundNavigationHandler) {
+            window.removeEventListener('popstate', this.boundNavigationHandler);
+        }
+        (_a = this.leftColIntersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.facetsIntersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this.updateLeftColumnHeight);
+    }
+    handleResize(entry) {
+        const previousView = this.mobileView;
+        if (entry.target === this.contentContainer) {
+            this.contentWidth = entry.contentRect.width;
+            this.mobileView =
+                this.contentWidth > 0 && this.contentWidth < this.mobileBreakpoint;
+            // If changing from desktop to mobile disable transition
+            if (this.mobileView && !previousView) {
+                this.isResizeToMobile = true;
+            }
+        }
+        // Ensure the facet sidebar remains sized correctly
+        this.updateLeftColumnHeight();
+    }
+    /**
+     * Sets up listeners for events that may require updating the left column height.
+     */
+    setupLeftColumnScrollListeners() {
+        var _a;
+        // We observe intersections between the left column's scroll sentinel and
+        // the viewport, so that we can ensure the left column is always sized to
+        // match the _available_ viewport height. This should generally be more
+        // performant than listening to scroll events on the page or column.
+        const leftColumnSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#left-column-scroll-sentinel');
+        if (leftColumnSentinel) {
+            this.leftColIntersectionObserver = new IntersectionObserver(this.updateLeftColumnHeight, {
+                threshold: [...Array(101).keys()].map(n => n / 100), // Threshold every 1%
+            });
+            this.leftColIntersectionObserver.observe(leftColumnSentinel);
+        }
+        // We also listen for window resize events, as they are not always captured
+        // by the resize observer and can affect the desired height of the left column.
+        window.addEventListener('resize', this.updateLeftColumnHeight);
+    }
+    /**
+     * Sets up listeners to control whether the facet sidebar shows its bottom fade-out.
+     * Note this uses a separate IntersectionObserver from the left column, because we
+     * don't need granular intersection thresholds for this.
+     */
+    setupFacetsScrollListeners() {
+        var _a;
+        const facetsSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#facets-scroll-sentinel');
+        if (facetsSentinel) {
+            this.facetsIntersectionObserver = new IntersectionObserver(this.updateFacetFadeOut);
+            this.facetsIntersectionObserver.observe(facetsSentinel);
+        }
+    }
+    emitBaseQueryChanged() {
+        this.dispatchEvent(new CustomEvent('baseQueryChanged', {
+            detail: {
+                baseQuery: this.baseQuery,
+            },
+        }));
+    }
+    emitSearchTypeChanged() {
+        this.dispatchEvent(new CustomEvent('searchTypeChanged', {
+            detail: this.searchType,
+        }));
+    }
+    emitEmptyResults() {
+        this.dispatchEvent(new Event('emptyResults'));
+    }
+    disconnectResizeObserver(resizeObserver) {
+        resizeObserver.removeObserver({
+            target: this.contentContainer,
+            handler: this,
+        });
+    }
+    setupResizeObserver() {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.addObserver({
+            target: this.contentContainer,
+            handler: this,
+        });
+    }
+    /**
+     * When the visible cells change from the infinite scroller, we want to emit
+     * which page is currently visible so the consumer can update its UI or the URL
+     *
+     * @param e
+     * @returns
+     */
+    visibleCellsChanged(e) {
+        if (this.isScrollingToCell)
+            return;
+        const { visibleCellIndices } = e.detail;
+        if (visibleCellIndices.length === 0)
+            return;
+        const lastVisibleCellIndex = visibleCellIndices[visibleCellIndices.length - 1];
+        const lastVisibleCellPage = Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
+        if (this.currentPage !== lastVisibleCellPage) {
+            this.currentPage = lastVisibleCellPage;
+        }
+        const event = new CustomEvent('visiblePageChanged', {
+            detail: {
+                pageNumber: lastVisibleCellPage,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * A Promise which, after each query change, resolves once the fetches for the initial
+     * search have completed. Waits for *both* the hits and aggregations fetches to finish.
+     *
+     * Ensure you await this component's `updateComplete` promise before awaiting this
+     * one, to ensure you do not await an obsolete promise from the previous update.
+     */
+    get initialSearchComplete() {
+        return this._initialSearchCompletePromise;
+    }
+    async handleQueryChange() {
+        var _a;
+        // only reset if the query has actually changed
+        if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
+            return;
+        // If the new state prevents us from updating the search results, don't reset
+        if (!this.canPerformSearch)
+            return;
+        this.previousQueryKey = this.pageFetchQueryKey;
+        this.dataSource = {};
+        this.tileModelOffset = 0;
+        this.totalResults = undefined;
+        this.aggregations = undefined;
+        this.fullYearsHistogramAggregation = undefined;
+        this.pageFetchesInProgress = {};
+        this.endOfDataReached = false;
+        this.pagesToRender =
+            this.initialPageNumber === 1
+                ? 2 // First two pages are batched into one request when starting from page 1
+                : this.initialPageNumber;
+        this.queryErrorMessage = undefined;
+        // Reset the infinite scroller's item count, so that it
+        // shows tile placeholders until the new query's results load in
+        if (this.infiniteScroller) {
+            this.infiniteScroller.itemCount = this.estimatedTileCount;
+            this.infiniteScroller.reload();
+        }
+        if (this.withinCollection && ((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim())) {
+            this.defaultSortField = SortField.relevance;
+            this.defaultSortDirection = null;
+        }
+        if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
+            this.scrollToPage(this.initialPageNumber);
+        }
+        this.initialQueryChangeHappened = true;
+        // if the query changed as part of a window.history pop event, we don't want to
+        // persist the state because it overwrites the forward history
+        if (!this.historyPopOccurred) {
+            this.persistState();
+        }
+        this.historyPopOccurred = false;
+        // Reset the `initialSearchComplete` promise with a new value for the imminent search
+        this._initialSearchCompletePromise = new Promise(res => {
+            this._initialSearchCompleteResolver = res;
+        });
+        // Fire the initial page and facets requests
+        await Promise.all([this.doInitialPageFetch(), this.fetchFacets()]);
+        // Resolve the `initialSearchComplete` promise for this search
+        this._initialSearchCompleteResolver(true);
+    }
+    setupStateRestorationObserver() {
+        if (this.boundNavigationHandler)
+            return;
+        this.boundNavigationHandler = this.historyNavigationHandler.bind(this);
+        // when the user navigates back, we want to update the UI to match the URL
+        window.addEventListener('popstate', this.boundNavigationHandler);
+    }
+    historyNavigationHandler() {
+        this.historyPopOccurred = true;
+        this.restoreState();
+    }
+    restoreState() {
+        var _a, _b, _c, _d, _e;
+        const restorationState = this.restorationStateHandler.getRestorationState();
+        this.displayMode = restorationState.displayMode;
+        if (restorationState.searchType != null)
+            this.searchType = restorationState.searchType;
+        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.default;
+        this.sortDirection = (_b = restorationState.sortDirection) !== null && _b !== void 0 ? _b : null;
+        this.selectedTitleFilter = (_c = restorationState.selectedTitleFilter) !== null && _c !== void 0 ? _c : null;
+        this.selectedCreatorFilter = (_d = restorationState.selectedCreatorFilter) !== null && _d !== void 0 ? _d : null;
+        this.selectedFacets = restorationState.selectedFacets;
+        this.baseQuery = restorationState.baseQuery;
+        this.currentPage = (_e = restorationState.currentPage) !== null && _e !== void 0 ? _e : 1;
+        this.minSelectedDate = restorationState.minSelectedDate;
+        this.maxSelectedDate = restorationState.maxSelectedDate;
+        if (this.currentPage > 1) {
+            this.goToPage(this.currentPage);
+        }
+    }
+    persistState() {
+        var _a, _b, _c, _d;
+        const restorationState = {
+            displayMode: this.displayMode,
+            searchType: this.searchType,
+            selectedSort: this.selectedSort,
+            sortDirection: (_a = this.sortDirection) !== null && _a !== void 0 ? _a : undefined,
+            selectedFacets: (_b = this.selectedFacets) !== null && _b !== void 0 ? _b : getDefaultSelectedFacets(),
+            baseQuery: this.baseQuery,
+            currentPage: this.currentPage,
+            titleQuery: this.titleQuery,
+            creatorQuery: this.creatorQuery,
+            minSelectedDate: this.minSelectedDate,
+            maxSelectedDate: this.maxSelectedDate,
+            selectedTitleFilter: (_c = this.selectedTitleFilter) !== null && _c !== void 0 ? _c : undefined,
+            selectedCreatorFilter: (_d = this.selectedCreatorFilter) !== null && _d !== void 0 ? _d : undefined,
+        };
+        this.restorationStateHandler.persistState(restorationState);
+    }
+    async doInitialPageFetch() {
+        this.searchResultsLoading = true;
+        // Try to batch 2 initial page requests when possible
+        await this.fetchPage(this.initialPageNumber, 2);
+        this.searchResultsLoading = false;
+    }
+    emitSearchResultsLoadingChanged() {
+        this.dispatchEvent(new CustomEvent('searchResultsLoadingChanged', {
+            detail: {
+                loading: this.searchResultsLoading,
+            },
+        }));
+    }
+    /**
+     * Produces a compact unique ID for a search request that can help with debugging
+     * on the backend by making related requests easier to trace through different services.
+     * (e.g., tying the hits/aggregations requests for the same page back to a single hash).
+     *
+     * @param params The search service parameters for the request
+     * @param kind The kind of request (hits-only, aggregations-only, or both)
+     * @returns A Promise resolving to the uid to apply to the request
+     */
+    async requestUID(params, kind) {
+        var _a;
+        const paramsToHash = JSON.stringify({
+            pageType: params.pageType,
+            pageTarget: params.pageTarget,
+            query: params.query,
+            fields: params.fields,
+            filters: params.filters,
+            sort: params.sort,
+            searchType: this.searchType,
+        });
+        const fullQueryHash = (await sha1(paramsToHash)).slice(0, 20); // First 80 bits of SHA-1 are plenty for this
+        const sessionId = (await this.getSessionId()).slice(0, 20); // Likewise
+        const page = (_a = params.page) !== null && _a !== void 0 ? _a : 0;
+        const kindPrefix = kind.charAt(0); // f = full, h = hits, a = aggregations
+        const currentTime = Date.now();
+        return `R:${fullQueryHash}-S:${sessionId}-P:${page}-K:${kindPrefix}-T:${currentTime}`;
+    }
+    /**
+     * Constructs a search service FilterMap object from the combination of
+     * all the currently-applied filters. This includes any facets, letter
+     * filters, and date range.
+     */
+    get filterMap() {
+        const builder = new FilterMapBuilder();
+        // Add the date range, if applicable
+        if (this.minSelectedDate) {
+            builder.addFilter('year', this.minSelectedDate, FilterConstraint.GREATER_OR_EQUAL);
+        }
+        if (this.maxSelectedDate) {
+            builder.addFilter('year', this.maxSelectedDate, FilterConstraint.LESS_OR_EQUAL);
+        }
+        // Add any selected facets
+        if (this.selectedFacets) {
+            for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
+                const { name, values } = this.prepareFacetForFetch(facetName, facetValues);
+                for (const [value, bucket] of Object.entries(values)) {
+                    let constraint;
+                    if (bucket.state === 'selected') {
+                        constraint = FilterConstraint.INCLUDE;
+                    }
+                    else if (bucket.state === 'hidden') {
+                        constraint = FilterConstraint.EXCLUDE;
+                    }
+                    if (constraint) {
+                        builder.addFilter(name, value, constraint);
+                    }
+                }
+            }
+        }
+        // Add any letter filters
+        if (this.selectedTitleFilter) {
+            builder.addFilter('firstTitle', this.selectedTitleFilter, FilterConstraint.INCLUDE);
+        }
+        if (this.selectedCreatorFilter) {
+            builder.addFilter('firstCreator', this.selectedCreatorFilter, FilterConstraint.INCLUDE);
+        }
+        const filterMap = builder.build();
+        return filterMap;
+    }
+    /** The full query, including year facets and date range clauses */
+    get fullQuery() {
+        var _a, _b;
+        let fullQuery = (_b = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+        const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
+        if (facetQuery) {
+            fullQuery += ` AND ${facetQuery}`;
+        }
+        if (dateRangeQueryClause) {
+            fullQuery += ` AND ${dateRangeQueryClause}`;
+        }
+        if (sortFilterQueries) {
+            fullQuery += ` AND ${sortFilterQueries}`;
+        }
+        return fullQuery.trim();
+    }
+    /**
+     * Generates a query string for the given facets
+     *
+     * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
+     */
+    get facetQuery() {
+        var _a;
+        if (!this.selectedFacets)
+            return undefined;
+        const facetClauses = [];
+        for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
+            facetClauses.push(this.buildFacetClause(facetName, facetValues));
+        }
+        return (_a = this.joinFacetClauses(facetClauses)) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    /**
+     * Builds an OR-joined facet clause for the given facet name and values.
+     *
+     * E.g., for name `subject` and values
+     * `{ foo: { state: 'selected' }, bar: { state: 'hidden' } }`
+     * this will produce the clause
+     * `subject:("foo" OR -"bar")`.
+     *
+     * @param facetName The facet type (e.g., 'collection')
+     * @param facetValues The facet buckets, mapped by their keys
+     */
+    buildFacetClause(facetName, facetValues) {
+        const { name: facetQueryName, values } = this.prepareFacetForFetch(facetName, facetValues);
+        const facetEntries = Object.entries(values);
+        if (facetEntries.length === 0)
+            return '';
+        const facetValuesArray = [];
+        for (const [key, facetData] of facetEntries) {
+            const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
+            facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
+        }
+        const valueQuery = facetValuesArray.join(` OR `);
+        return `${facetQueryName}:(${valueQuery})`;
+    }
+    /**
+     * Handles some special pre-request normalization steps for certain facet types
+     * that require them.
+     *
+     * @param facetName The name of the facet type (e.g., 'language')
+     * @param facetValues An array of values for that facet type
+     */
+    prepareFacetForFetch(facetName, facetValues) {
+        // eslint-disable-next-line prefer-const
+        let [normalizedName, normalizedValues] = [facetName, facetValues];
+        // The full "search engine" name of the lending field is "lending___status"
+        if (facetName === 'lending') {
+            normalizedName = 'lending___status';
+        }
+        return {
+            name: normalizedName,
+            values: normalizedValues,
+        };
+    }
+    /**
+     * Takes an array of facet clauses, and combines them into a
+     * full AND-joined facet query string. Empty clauses are ignored.
+     */
+    joinFacetClauses(facetClauses) {
+        const nonEmptyFacetClauses = facetClauses.filter(clause => clause.length > 0);
+        return nonEmptyFacetClauses.length > 0
+            ? `(${nonEmptyFacetClauses.join(' AND ')})`
+            : undefined;
+    }
+    facetsChanged(e) {
+        this.selectedFacets = e.detail;
+    }
+    facetClickHandler({ detail: { key, state: facetState, negative }, }) {
+        var _a, _b;
+        if (negative) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+                category: this.searchContext,
+                action: facetState !== 'none'
+                    ? analyticsActions.facetNegativeSelected
+                    : analyticsActions.facetNegativeDeselected,
+                label: key,
+            });
+        }
+        else {
+            (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+                category: this.searchContext,
+                action: facetState !== 'none'
+                    ? analyticsActions.facetSelected
+                    : analyticsActions.facetDeselected,
+                label: key,
+            });
+        }
+    }
+    async fetchFacets() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!this.canPerformSearch)
+            return;
+        const { facetFetchQueryKey } = this;
+        const sortParams = this.sortParam ? [this.sortParam] : [];
+        const params = {
+            ...this.collectionParams,
+            query: trimmedQuery || '',
+            rows: 0,
+            filters: this.filterMap,
+            // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
+            aggregationsSize: 10,
+            // Note: we don't need an aggregations param to fetch the default aggregations from the PPS.
+            // The default aggregations for the search_results page type should be what we need here.
+        };
+        params.uid = await this.requestUID({ ...params, sort: sortParams }, 'aggregations');
+        this.facetsLoading = true;
+        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
+        const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
+        // This is checking to see if the query has changed since the data was fetched.
+        // If so, we just want to discard this set of aggregations because they are
+        // likely no longer valid for the newer query.
+        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
+        if (queryChangedSinceFetch)
+            return;
+        if (!success) {
+            const errorMsg = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _c === void 0 ? void 0 : _c.message;
+            const detailMsg = (_e = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.message;
+            if (!errorMsg && !detailMsg) {
+                // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
+                (_g = (_f = window === null || window === void 0 ? void 0 : window.Sentry) === null || _f === void 0 ? void 0 : _f.captureMessage) === null || _g === void 0 ? void 0 : _g.call(_f, 'Missing or malformed facet response from backend', 'error');
+            }
+            return;
+        }
+        const { aggregations, collectionTitles } = success.response;
+        this.aggregations = aggregations;
+        if (collectionTitles) {
+            (_h = this.collectionNameCache) === null || _h === void 0 ? void 0 : _h.addKnownTitles(collectionTitles);
+        }
+        else if ((_j = this.aggregations) === null || _j === void 0 ? void 0 : _j.collection) {
+            (_k = this.collectionNameCache) === null || _k === void 0 ? void 0 : _k.preloadIdentifiers(this.aggregations.collection.buckets.map(bucket => { var _a; return (_a = bucket.key) === null || _a === void 0 ? void 0 : _a.toString(); }));
+        }
+        this.fullYearsHistogramAggregation =
+            (_m = (_l = success === null || success === void 0 ? void 0 : success.response) === null || _l === void 0 ? void 0 : _l.aggregations) === null || _m === void 0 ? void 0 : _m.year_histogram;
+        this.facetsLoading = false;
+    }
+    scrollToPage(pageNumber) {
+        return new Promise(resolve => {
+            const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+            // without this setTimeout, Safari just pauses until the `fetchPage` is complete
+            // then scrolls to the cell
+            setTimeout(() => {
+                var _a;
+                this.isScrollingToCell = true;
+                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.scrollToCell(cellIndexToScrollTo, true);
+                // This timeout is to give the scroll animation time to finish
+                // then updating the infinite scroller once we're done scrolling
+                // There's no scroll animation completion callback so we're
+                // giving it 0.5s to finish.
+                setTimeout(() => {
+                    var _a;
+                    this.isScrollingToCell = false;
+                    (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+                    resolve();
+                }, 500);
+            }, 0);
+        });
+    }
+    /**
+     * Whether sorting by relevance makes sense for the current state.
+     * Currently equivalent to having a non-empty query.
+     */
+    get isRelevanceSortAvailable() {
+        var _a;
+        return !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
+    }
+    /**
+     * Whether a search may be performed in the current state of the component.
+     * This is only true if the search service is defined, and either
+     *   (a) a non-empty query is set, or
+     *   (b) we are on a collection page in metadata search mode.
+     */
+    get canPerformSearch() {
+        var _a;
+        if (!this.searchService)
+            return false;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        const hasNonEmptyQuery = !!trimmedQuery;
+        const isCollectionSearch = !!this.withinCollection;
+        const isMetadataSearch = this.searchType === SearchType.METADATA;
+        // Metadata searches within a collection are allowed to have no query.
+        // Otherwise, a non-empty query must be set.
+        return hasNonEmptyQuery || (isCollectionSearch && isMetadataSearch);
+    }
+    /**
+     * Additional params to pass to the search service if targeting a collection page,
+     * or null otherwise.
+     */
+    get collectionParams() {
+        return this.withinCollection
+            ? { pageType: 'collection_details', pageTarget: this.withinCollection }
+            : null;
+    }
+    /**
+     * The query key is a string that uniquely identifies the current search.
+     * It consists of:
+     *  - The current base query
+     *  - The current collection
+     *  - The current search type
+     *  - Any currently-applied facets
+     *  - Any currently-applied date range
+     *  - Any currently-applied prefix filters
+     *  - The current sort options
+     *
+     * This lets us keep track of queries so we don't persist data that's
+     * no longer relevant.
+     */
+    get pageFetchQueryKey() {
+        var _a, _b, _c, _d;
+        const sortField = (_b = (_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) !== null && _b !== void 0 ? _b : 'none';
+        const sortDirection = (_d = (_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.direction) !== null && _d !== void 0 ? _d : 'none';
+        return `${this.fullQuery}-${this.withinCollection}-${this.searchType}-${sortField}-${sortDirection}`;
+    }
+    /**
+     * Similar to `pageFetchQueryKey` above, but excludes sort fields since they
+     * are not relevant in determining aggregation queries.
+     */
+    get facetFetchQueryKey() {
+        return `${this.fullQuery}-${this.withinCollection}-${this.searchType}`;
+    }
+    /**
+     * Fetches one or more pages of results and updates the data source.
+     *
+     * @param pageNumber The page number to fetch
+     * @param numInitialPages If this is an initial page fetch (`pageNumber = 1`),
+     *  specifies how many pages to batch together in one request. Ignored
+     *  if `pageNumber != 1`, defaulting to a single page.
+     */
+    async fetchPage(pageNumber, numInitialPages = 1) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!this.canPerformSearch)
+            return;
+        // if we already have data, don't fetch again
+        if (this.dataSource[pageNumber])
+            return;
+        if (this.endOfDataReached)
+            return;
+        // Batch multiple initial page requests together if needed (e.g., can request
+        // pages 1 and 2 together in a single request).
+        const numPages = pageNumber === 1 ? numInitialPages : 1;
+        const numRows = this.pageSize * numPages;
+        // if a fetch is already in progress for this query and page, don't fetch again
+        const { pageFetchQueryKey } = this;
+        const pageFetches = (_b = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _b !== void 0 ? _b : new Set();
+        if (pageFetches.has(pageNumber))
+            return;
+        for (let i = 0; i < numPages; i += 1) {
+            pageFetches.add(pageNumber + i);
+        }
+        this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
+        const sortParams = this.sortParam ? [this.sortParam] : [];
+        const params = {
+            ...this.collectionParams,
+            query: trimmedQuery || '',
+            page: pageNumber,
+            rows: numRows,
+            sort: sortParams,
+            filters: this.filterMap,
+            aggregations: { omit: true },
+        };
+        params.uid = await this.requestUID(params, 'hits');
+        const searchResponse = await ((_c = this.searchService) === null || _c === void 0 ? void 0 : _c.search(params, this.searchType));
+        const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
+        // This is checking to see if the query has changed since the data was fetched.
+        // If so, we just want to discard the data since there should be a new query
+        // right behind it.
+        const queryChangedSinceFetch = pageFetchQueryKey !== this.pageFetchQueryKey;
+        if (queryChangedSinceFetch)
+            return;
+        if (!success) {
+            const errorMsg = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.message;
+            const detailMsg = (_f = (_e = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _e === void 0 ? void 0 : _e.details) === null || _f === void 0 ? void 0 : _f.message;
+            this.queryErrorMessage = `${errorMsg !== null && errorMsg !== void 0 ? errorMsg : ''}${detailMsg ? `; ${detailMsg}` : ''}`;
+            if (!this.queryErrorMessage) {
+                this.queryErrorMessage = 'Missing or malformed response from backend';
+                // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
+                (_h = (_g = window === null || window === void 0 ? void 0 : window.Sentry) === null || _g === void 0 ? void 0 : _g.captureMessage) === null || _h === void 0 ? void 0 : _h.call(_g, this.queryErrorMessage, 'error');
+            }
+            for (let i = 0; i < numPages; i += 1) {
+                (_j = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _j === void 0 ? void 0 : _j.delete(pageNumber + i);
+            }
+            this.searchResultsLoading = false;
+            return;
+        }
+        this.totalResults = success.response.totalResults - this.tileModelOffset;
+        // display event to offshoot when result count is zero.
+        if (this.totalResults === 0) {
+            this.emitEmptyResults();
+        }
+        if (this.withinCollection) {
+            this.collectionInfo = success.response.collectionExtraInfo;
+            // For collections, we want the UI to respect the default sort option
+            // which can be specified in metadata, or otherwise assumed to be week:desc
+            this.applyDefaultCollectionSort(this.collectionInfo);
+            if (this.collectionInfo) {
+                this.parentCollections = [].concat((_l = (_k = this.collectionInfo.public_metadata) === null || _k === void 0 ? void 0 : _k.collection) !== null && _l !== void 0 ? _l : []);
+            }
+        }
+        const { results, collectionTitles } = success.response;
+        if (results && results.length > 0) {
+            // Load any collection titles present on the response into the cache,
+            // or queue up preload fetches for them if none were present.
+            if (collectionTitles) {
+                (_m = this.collectionNameCache) === null || _m === void 0 ? void 0 : _m.addKnownTitles(collectionTitles);
+            }
+            else {
+                this.preloadCollectionNames(results);
+            }
+            // Update the data source for each returned page
+            for (let i = 0; i < numPages; i += 1) {
+                const pageStartIndex = this.pageSize * i;
+                this.updateDataSource(pageNumber + i, results.slice(pageStartIndex, pageStartIndex + this.pageSize));
+            }
+        }
+        // When we reach the end of the data, we can set the infinite scroller's
+        // item count to the real total number of results (rather than the
+        // temporary estimates based on pages rendered so far).
+        const resultCountDiscrepancy = numRows - results.length;
+        if (resultCountDiscrepancy > 0) {
+            this.endOfDataReached = true;
+            if (this.infiniteScroller) {
+                this.infiniteScroller.itemCount = this.totalResults;
+            }
+        }
+        for (let i = 0; i < numPages; i += 1) {
+            (_o = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _o === void 0 ? void 0 : _o.delete(pageNumber + i);
+        }
+    }
+    preloadCollectionNames(results) {
+        var _a;
+        const collectionIds = results
+            .map(result => { var _a; return (_a = result.collection) === null || _a === void 0 ? void 0 : _a.values; })
+            .flat();
+        const collectionIdsArray = Array.from(new Set(collectionIds));
+        (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
+    }
+    /**
+     * Applies any default sort option for the current collection, by checking
+     * for one in the collection's metadata. If none is found, defaults to sorting
+     * descending by:
+     *  - Date Favorited for fav-* collections
+     *  - Weekly views for all other collections
+     */
+    applyDefaultCollectionSort(collectionInfo) {
+        var _a, _b, _c;
+        if (this.baseQuery) {
+            // If there's a query set, then we default to relevance sorting regardless of
+            // the collection metadata-specified sort.
+            this.defaultSortField = SortField.relevance;
+            this.defaultSortDirection = null;
+            return;
+        }
+        // Favorite collections sort on Date Favorited by default.
+        // Other collections fall back to sorting on weekly views.
+        const baseDefaultSort = ((_b = (_a = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _a === void 0 ? void 0 : _a.identifier) === null || _b === void 0 ? void 0 : _b.startsWith('fav-'))
+            ? '-favoritedate'
+            : '-week';
+        // The collection metadata may override the default sorting with something else
+        const metadataSort = (_c = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _c === void 0 ? void 0 : _c['sort-by'];
+        // Prefer the metadata-specified sort if one exists
+        const defaultSortToApply = metadataSort !== null && metadataSort !== void 0 ? metadataSort : baseDefaultSort;
+        // Account for both -field and field:dir formats
+        let [field, dir] = defaultSortToApply.split(':');
+        if (field.startsWith('-')) {
+            field = field.slice(1);
+            dir = 'desc';
+        }
+        else if (!['asc', 'desc'].includes(dir)) {
+            dir = 'asc';
+        }
+        const sortOption = sortOptionFromAPIString(field);
+        const sortField = sortOption.field;
+        if (sortField && sortField !== SortField.default) {
+            this.defaultSortField = sortField;
+            this.defaultSortDirection = dir;
+            this.defaultSortParam = {
+                field: this.defaultSortField,
+                direction: this.defaultSortDirection,
+            };
+        }
+    }
+    /**
+     * This is useful for determining whether we need to reload the scroller.
+     *
+     * When the fetch completes, we need to reload the scroller if the cells for that
+     * page are visible, but if the page is not currenlty visible, we don't need to reload
+     */
+    get currentVisiblePageNumbers() {
+        var _a, _b;
+        const visibleCells = (_b = (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.getVisibleCellIndices()) !== null && _b !== void 0 ? _b : [];
+        const visiblePages = new Set();
+        visibleCells.forEach(cellIndex => {
+            const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;
+            visiblePages.add(visiblePage);
+        });
+        return Array.from(visiblePages);
+    }
+    /**
+     * Update the datasource from the fetch response
+     *
+     * @param pageNumber
+     * @param results
+     */
+    updateDataSource(pageNumber, results) {
+        var _a;
+        // copy our existing datasource so when we set it below, it gets set
+        // instead of modifying the existing dataSource since object changes
+        // don't trigger a re-render
+        const datasource = { ...this.dataSource };
+        const tiles = [];
+        results === null || results === void 0 ? void 0 : results.forEach(result => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
+            if (!result.identifier)
+                return;
+            let loginRequired = false;
+            let contentWarning = false;
+            // Check if item and item in "modifying" collection, setting above flags
+            if (((_a = result.collection) === null || _a === void 0 ? void 0 : _a.values.length) &&
+                ((_b = result.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== 'collection') {
+                for (const collection of (_d = (_c = result.collection) === null || _c === void 0 ? void 0 : _c.values) !== null && _d !== void 0 ? _d : []) {
+                    if (collection === 'loggedin') {
+                        loginRequired = true;
+                        if (contentWarning)
+                            break;
+                    }
+                    if (collection === 'no-preview') {
+                        contentWarning = true;
+                        if (loginRequired)
+                            break;
+                    }
+                }
+            }
+            tiles.push({
+                averageRating: (_e = result.avg_rating) === null || _e === void 0 ? void 0 : _e.value,
+                checked: false,
+                collections: (_g = (_f = result.collection) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : [],
+                collectionFilesCount: (_j = (_h = result.collection_files_count) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 0,
+                collectionSize: (_l = (_k = result.collection_size) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 0,
+                commentCount: (_o = (_m = result.num_reviews) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 0,
+                creator: (_p = result.creator) === null || _p === void 0 ? void 0 : _p.value,
+                creators: (_r = (_q = result.creator) === null || _q === void 0 ? void 0 : _q.values) !== null && _r !== void 0 ? _r : [],
+                dateAdded: (_s = result.addeddate) === null || _s === void 0 ? void 0 : _s.value,
+                dateArchived: (_t = result.publicdate) === null || _t === void 0 ? void 0 : _t.value,
+                datePublished: (_u = result.date) === null || _u === void 0 ? void 0 : _u.value,
+                dateReviewed: (_v = result.reviewdate) === null || _v === void 0 ? void 0 : _v.value,
+                description: (_w = result.description) === null || _w === void 0 ? void 0 : _w.values.join('\n'),
+                favCount: (_y = (_x = result.num_favorites) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 0,
+                href: this.collapseRepeatedQuotes((_z = result.__href__) === null || _z === void 0 ? void 0 : _z.value),
+                identifier: result.identifier,
+                issue: (_0 = result.issue) === null || _0 === void 0 ? void 0 : _0.value,
+                itemCount: (_2 = (_1 = result.item_count) === null || _1 === void 0 ? void 0 : _1.value) !== null && _2 !== void 0 ? _2 : 0,
+                mediatype: this.getMediatype(result),
+                snippets: (_4 = (_3 = result.highlight) === null || _3 === void 0 ? void 0 : _3.values) !== null && _4 !== void 0 ? _4 : [],
+                source: (_5 = result.source) === null || _5 === void 0 ? void 0 : _5.value,
+                subjects: (_7 = (_6 = result.subject) === null || _6 === void 0 ? void 0 : _6.values) !== null && _7 !== void 0 ? _7 : [],
+                title: (_9 = (_8 = result.title) === null || _8 === void 0 ? void 0 : _8.value) !== null && _9 !== void 0 ? _9 : '',
+                volume: (_10 = result.volume) === null || _10 === void 0 ? void 0 : _10.value,
+                viewCount: (_12 = (_11 = result.downloads) === null || _11 === void 0 ? void 0 : _11.value) !== null && _12 !== void 0 ? _12 : 0,
+                weeklyViewCount: (_13 = result.week) === null || _13 === void 0 ? void 0 : _13.value,
+                loginRequired,
+                contentWarning,
+            });
+        });
+        datasource[pageNumber] = tiles;
+        this.dataSource = datasource;
+        const visiblePages = this.currentVisiblePageNumbers;
+        const needsReload = visiblePages.includes(pageNumber);
+        if (needsReload) {
+            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
+        }
+    }
+    getMediatype(result) {
+        var _a, _b, _c;
+        /**
+         * hit_type == 'favorited_search' is basically a new hit_type
+         * - we are getting from PPS.
+         * - which gives response for fav- collection
+         * - having favorited items like account/collection/item etc..
+         * - as user can also favorite a search result (a search page)
+         * - so we need to have response (having fav- items and fav- search results)
+         *
+         * if backend hit_type == 'favorited_search'
+         * - let's assume a "search" as new mediatype
+         */
+        if (((_a = result === null || result === void 0 ? void 0 : result.rawMetadata) === null || _a === void 0 ? void 0 : _a.hit_type) === 'favorited_search') {
+            return 'search';
+        }
+        return (_c = (_b = result.mediatype) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 'data';
+    }
+    /**
+     * Returns the input string, but removing one set of quotes from all instances of
+     * ""clauses wrapped in two sets of quotes"". This assumes the quotes are already
+     * URL-encoded.
+     *
+     * This should be a temporary measure to address the fact that the __href__ field
+     * sometimes acquires extra quotation marks during query rewriting. Once there is a
+     * full Lucene parser in place that handles quoted queries correctly, this can likely
+     * be removed.
+     */
+    collapseRepeatedQuotes(str) {
+        return str === null || str === void 0 ? void 0 : str.replace(/%22%22(?!%22%22)(.+?)%22%22/g, '%22$1%22');
+    }
+    /** Fetches the aggregation buckets for the given prefix filter type. */
+    async fetchPrefixFilterBuckets(filterType) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!this.canPerformSearch)
+            return [];
+        const filterAggregationKey = prefixFilterAggregationKeys[filterType];
+        const sortParams = this.sortParam ? [this.sortParam] : [];
+        const params = {
+            ...this.collectionParams,
+            query: trimmedQuery || '',
+            rows: 0,
+            filters: this.filterMap,
+            // Only fetch the firstTitle or firstCreator aggregation
+            aggregations: { simpleParams: [filterAggregationKey] },
+            // Fetch all 26 letter buckets
+            aggregationsSize: 26,
+        };
+        params.uid = await this.requestUID({ ...params, sort: sortParams }, 'aggregations');
+        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
+        return ((_g = (_f = (_e = (_d = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.aggregations) === null || _e === void 0 ? void 0 : _e[filterAggregationKey]) === null || _f === void 0 ? void 0 : _f.buckets) !== null && _g !== void 0 ? _g : []);
+    }
+    /** Fetches and caches the prefix filter counts for the given filter type. */
+    async updatePrefixFilterCounts(filterType) {
+        const { facetFetchQueryKey } = this;
+        const buckets = await this.fetchPrefixFilterBuckets(filterType);
+        // Don't update the filter counts for an outdated query (if it has been changed
+        // since we sent the request)
+        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
+        if (queryChangedSinceFetch)
+            return;
+        // Unpack the aggregation buckets into a simple map like { 'A': 50, 'B': 25, ... }
+        this.prefixFilterCountMap = { ...this.prefixFilterCountMap }; // Clone the object to trigger an update
+        this.prefixFilterCountMap[filterType] = buckets.reduce((acc, bucket) => {
+            acc[bucket.key.toUpperCase()] = bucket.doc_count;
+            return acc;
+        }, {});
+    }
+    /**
+     * Fetches and caches the prefix filter counts for the current sort type,
+     * provided it is one that permits prefix filtering. (If not, this does nothing).
+     */
+    async updatePrefixFiltersForCurrentSort() {
+        if (['title', 'creator'].includes(this.selectedSort)) {
+            const filterType = this.selectedSort;
+            if (!this.prefixFilterCountMap[filterType]) {
+                this.updatePrefixFilterCounts(filterType);
+            }
+        }
+    }
+    /**
+     * Clears the cached letter counts for both title and creator, and
+     * fetches a new set of counts for whichever of them is the currently
+     * selected sort option (which may be neither).
+     *
+     * Call this whenever the counts are invalidated (e.g., by a query change).
+     */
+    refreshLetterCounts() {
+        if (Object.keys(this.prefixFilterCountMap).length > 0) {
+            this.prefixFilterCountMap = {};
+        }
+        this.updatePrefixFiltersForCurrentSort();
+    }
+    /**
+     * Callback when a result is selected
+     */
+    resultSelected(event) {
+        var _a, _b, _c;
+        if (this.isManageView) {
+            // Checked/unchecked state change -- rerender to ensure it propagates
+            // this.mapDataSource(model => ({ ...model }));
+            const cellIndex = Object.values(this.dataSource)
+                .flat()
+                .indexOf(event.detail);
+            if (cellIndex >= 0)
+                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshCell(cellIndex - this.tileModelOffset);
+        }
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.resultSelected,
+            label: event.detail.mediatype,
+        });
+        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.resultSelected,
+            label: `page-${this.currentPage}`,
+        });
+    }
+    cellForIndex(index) {
+        const model = this.tileModelAtCellIndex(index);
+        if (!model)
+            return undefined;
         return html `
       <tile-dispatcher
         .collectionPagePath=${this.collectionPagePath}
@@ -1865,21 +1894,21 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         @resultSelected=${(e) => this.resultSelected(e)}
       >
       </tile-dispatcher>
-    `;
-    }
-    /**
-     * When the user scrolls near to the bottom of the page, fetch the next page
-     * increase the number of pages to render and start fetching data for the new page
-     */
-    scrollThresholdReached() {
-        if (!this.endOfDataReached) {
-            this.pagesToRender += 1;
-            this.fetchPage(this.pagesToRender);
-        }
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
+    `;
+    }
+    /**
+     * When the user scrolls near to the bottom of the page, fetch the next page
+     * increase the number of pages to render and start fetching data for the new page
+     */
+    scrollThresholdReached() {
+        if (!this.endOfDataReached) {
+            this.pagesToRender += 1;
+            this.fetchPage(this.pagesToRender);
+        }
+    }
+    static get styles() {
+        return [
+            srOnlyStyle,
             css `
         :host {
           display: block;
@@ -1973,7 +2002,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           width: var(--leftColumnWidth, 18rem);
           /* Prevents Safari from shrinking col at first draw */
           min-width: var(--leftColumnWidth, 18rem);
-          padding-top: 0;
           /* Reduced padding by 0.2rem to add the invisible border in the rule below */
           padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
           border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
@@ -2061,11 +2089,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
-          margin: 10px 0;
         }
 
         .desktop #facets-header-container {
-          padding-top: 2rem;
           flex-wrap: wrap;
         }
 
@@ -2253,171 +2279,171 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         infinite-scroller.hidden {
           display: none;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "searchService", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "searchType", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "withinCollection", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "baseQuery", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "displayMode", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "defaultSortParam", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "selectedSort", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "selectedTitleFilter", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "selectedCreatorFilter", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "sortDirection", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionBrowser.prototype, "pageSize", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "resizeObserver", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionBrowser.prototype, "currentPage", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "minSelectedDate", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "maxSelectedDate", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "selectedFacets", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionBrowser.prototype, "showHistogramDatePicker", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "collectionPagePath", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "collectionInfo", void 0);
-__decorate([
-    property({ type: Array })
-], CollectionBrowser.prototype, "parentCollections", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], CollectionBrowser.prototype, "searchContext", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "collectionNameCache", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "pageContext", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "restorationStateHandler", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionBrowser.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionBrowser.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "featureFeedbackService", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "recaptchaManager", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionBrowser.prototype, "isManageView", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "pagesToRender", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "searchResultsLoading", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "facetsLoading", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "fullYearAggregationLoading", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "aggregations", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "fullYearsHistogramAggregation", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "totalResults", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "queryErrorMessage", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "mobileView", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "contentWidth", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "defaultSortField", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "defaultSortDirection", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "placeholderType", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "prefixFilterCountMap", void 0);
-__decorate([
-    query('#content-container')
-], CollectionBrowser.prototype, "contentContainer", void 0);
-__decorate([
-    query('#left-column')
-], CollectionBrowser.prototype, "leftColumn", void 0);
-__decorate([
-    query('collection-facets')
-], CollectionBrowser.prototype, "collectionFacets", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionBrowser.prototype, "analyticsHandler", void 0);
-__decorate([
-    query('infinite-scroller')
-], CollectionBrowser.prototype, "infiniteScroller", void 0);
-CollectionBrowser = __decorate([
-    customElement('collection-browser')
-], CollectionBrowser);
-export { CollectionBrowser };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "baseImageUrl", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "searchService", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "searchType", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "withinCollection", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "baseQuery", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "displayMode", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "defaultSortParam", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedSort", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedTitleFilter", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedCreatorFilter", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: Number })
+], CollectionBrowser.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "resizeObserver", void 0);
+__decorate([
+    property({ type: Number })
+], CollectionBrowser.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "minSelectedDate", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "showHistogramDatePicker", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "collectionPagePath", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "collectionInfo", void 0);
+__decorate([
+    property({ type: Array })
+], CollectionBrowser.prototype, "parentCollections", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CollectionBrowser.prototype, "searchContext", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "pageContext", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "restorationStateHandler", void 0);
+__decorate([
+    property({ type: Number })
+], CollectionBrowser.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "loggedIn", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "featureFeedbackService", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "recaptchaManager", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "isManageView", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "pagesToRender", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "searchResultsLoading", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "facetsLoading", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "fullYearAggregationLoading", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "aggregations", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "fullYearsHistogramAggregation", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "totalResults", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "queryErrorMessage", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "mobileView", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "contentWidth", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "defaultSortField", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "defaultSortDirection", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "placeholderType", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "prefixFilterCountMap", void 0);
+__decorate([
+    query('#content-container')
+], CollectionBrowser.prototype, "contentContainer", void 0);
+__decorate([
+    query('#left-column')
+], CollectionBrowser.prototype, "leftColumn", void 0);
+__decorate([
+    query('collection-facets')
+], CollectionBrowser.prototype, "collectionFacets", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CollectionBrowser.prototype, "analyticsHandler", void 0);
+__decorate([
+    query('infinite-scroller')
+], CollectionBrowser.prototype, "infiniteScroller", void 0);
+CollectionBrowser = __decorate([
+    customElement('collection-browser')
+], CollectionBrowser);
+export { CollectionBrowser };
 //# sourceMappingURL=collection-browser.js.map