@internetarchive/collection-browser 0.3.5-alpha.1 → 0.3.6

package/dist/src/collection-browser.js

@@ -1,1360 +1,1371 @@
-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 { ifDefined } from 'lit/directives/if-defined.js';
-import { 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 './collection-facets';
-import './circular-activity-indicator';
-import './sort-filter-bar/sort-filter-bar';
-import { SortField, SortFieldToMetadataField, defaultSelectedFacets, } from './models';
-import { RestorationStateHandler, } from './restoration-state-handler';
-import chevronIcon from './assets/img/icons/chevron';
-import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
-import './empty-placeholder';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
-let CollectionBrowser = class CollectionBrowser extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.baseImageUrl = 'https://archive.org';
-        this.searchType = SearchType.METADATA;
-        this.sortParam = null;
-        this.selectedSort = SortField.relevance;
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = null;
-        this.sortDirection = null;
-        this.pageSize = 50;
-        this.showHistogramDatePicker = false;
-        /** 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;
-        this.searchResultsLoading = false;
-        this.facetsLoading = false;
-        this.fullYearAggregationLoading = false;
-        this.mobileView = false;
-        this.mobileFacetsVisible = false;
-        this.placeholderType = null;
-        this.languageCodeHandler = new LanguageCodeHandler();
-        /**
-         * 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 = {};
-        // 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;
-        // this maps the query to the pages being fetched for that query
-        this.pageFetchesInProgress = {};
-    }
-    tileModelAtCellIndex(index) {
-        var _a;
-        const pageNumber = Math.floor(index / this.pageSize) + 1;
-        const itemIndex = index % 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;
-    }
-    // this is the actual number of tiles in the datasource,
-    // which is useful for removing excess placeholder tiles
-    // once we reached the end of the data
-    get actualTileCount() {
-        return Object.keys(this.dataSource).reduce((acc, page) => acc + this.dataSource[page].length, 0);
-    }
-    /**
-     * Go to the given page of results
-     *
-     * @param pageNumber
-     */
-    goToPage(pageNumber) {
-        this.initialPageNumber = pageNumber;
-        this.pagesToRender = pageNumber;
-        this.scrollToPage(pageNumber);
-    }
-    clearFilters() {
-        this.selectedFacets = defaultSelectedFacets;
-        this.sortParam = null;
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = null;
-        this.titleQuery = undefined;
-        this.creatorQuery = undefined;
-        this.selectedSort = SortField.relevance;
-        this.sortDirection = null;
-    }
-    /**
-     * Manually requests to perform a search, which will only be executed if one of
-     * the query, the search type, or the sort has changed.
-     */
-    requestSearch() {
-        this.handleQueryChange();
-    }
-    render() {
-        this.setPlaceholderType();
-        return html `
-      <div
-        id="content-container"
-        class=${this.mobileView ? 'mobile' : 'desktop'}
-      >
-        ${this.placeholderType
-            ? this.emptyPlaceholderTemplate
-            : this.collectionBrowserTemplate}
-      </div>
-    `;
-    }
-    setPlaceholderType() {
-        this.placeholderType = null;
-        if (!this.baseQuery) {
-            this.placeholderType = 'empty-query';
-        }
-        if ((!this.searchResultsLoading && this.totalResults === 0) ||
-            !this.searchService) {
-            this.placeholderType = 'null-result';
-        }
-    }
-    get emptyPlaceholderTemplate() {
-        return html `
-      <empty-placeholder
-        .placeholderType=${this.placeholderType}
-        ?isMobileView=${this.mobileView}
-      ></empty-placeholder>
-    `;
-    }
-    get collectionBrowserTemplate() {
-        return html `<div
-        id="left-column"
-        class="column${this.isResizeToMobile ? ' preload' : ''}"
-      >
-        <div id="mobile-header-container">
-          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
-          <div id="results-total">
-            <span id="big-results-count">
-              ${this.totalResults !== undefined
-            ? this.totalResults.toLocaleString()
-            : '-'}
-            </span>
-            <span id="big-results-label">
-              ${this.totalResults === 1 ? 'Result' : 'Results'}
-            </span>
-          </div>
-        </div>
-        <div
-          id="facets-container"
-          class=${!this.mobileView || this.mobileFacetsVisible
-            ? 'expanded'
-            : ''}
-        >
-          ${this.facetsTemplate}
-        </div>
-      </div>
-      <div id="right-column" class="column">
-        ${this.sortFilterBarTemplate}
-        ${this.displayMode === `list-compact`
-            ? this.listHeaderTemplate
-            : nothing}
-        ${this.infiniteScrollerTemplate}
-      </div>`;
-    }
-    get infiniteScrollerTemplate() {
-        return html `<infinite-scroller
-      class="${ifDefined(this.displayMode)}"
-      .cellProvider=${this}
-      .placeholderCellTemplate=${this.placeholderCellTemplate}
-      @scrollThresholdReached=${this.scrollThresholdReached}
-      @visibleCellsChanged=${this.visibleCellsChanged}
-    ></infinite-scroller>`;
-    }
-    get sortFilterBarTemplate() {
-        return html `
-      <sort-filter-bar
-        .selectedSort=${this.selectedSort}
-        .sortDirection=${this.sortDirection}
-        .displayMode=${this.displayMode}
-        .selectedTitleFilter=${this.selectedTitleFilter}
-        .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .resizeObserver=${this.resizeObserver}
-        @sortChanged=${this.userChangedSort}
-        @displayModeChanged=${this.displayModeChanged}
-        @titleLetterChanged=${this.titleLetterSelected}
-        @creatorLetterChanged=${this.creatorLetterSelected}
-      >
-      </sort-filter-bar>
-    `;
-    }
-    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.sendEventNoSampling({
-            category: this.searchContext,
-            action: analyticsActions.sortBy,
-            label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
-        });
-    }
-    selectedSortChanged() {
-        if (this.selectedSort === 'relevance' || this.sortDirection === null) {
-            this.sortParam = null;
-            return;
-        }
-        const sortField = SortFieldToMetadataField[this.selectedSort];
-        if (!sortField)
-            return;
-        this.sortParam = { field: sortField, direction: this.sortDirection };
-    }
-    displayModeChanged(e) {
-        var _a;
-        this.displayMode = e.detail.displayMode;
-        if (this.displayMode) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: this.searchContext,
-                action: analyticsActions.displayMode,
-                label: this.displayMode,
-            });
-        }
-    }
-    /** 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 === null;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.searchContext,
-            action: analyticsActions.filterByTitle,
-            label: cleared
-                ? `clear-${prevSelectedLetter}`
-                : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
-        });
-    }
-    selectedTitleLetterChanged() {
-        this.titleQuery = this.selectedTitleFilter
-            ? `firstTitle:${this.selectedTitleFilter}`
-            : undefined;
-    }
-    /** 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 === null;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.searchContext,
-            action: analyticsActions.filterByCreator,
-            label: cleared
-                ? `clear-${prevSelectedLetter}`
-                : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
-        });
-    }
-    selectedCreatorLetterChanged() {
-        this.creatorQuery = this.selectedCreatorFilter
-            ? `firstCreator:${this.selectedCreatorFilter}`
-            : undefined;
-    }
-    titleLetterSelected(e) {
-        this.selectedCreatorFilter = null;
-        this.selectedTitleFilter = e.detail.selectedLetter;
-    }
-    creatorLetterSelected(e) {
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = e.detail.selectedLetter;
-    }
-    get facetDataLoading() {
-        return this.facetsLoading || this.fullYearAggregationLoading;
-    }
-    get mobileFacetsTemplate() {
-        return html `
-      <div id="mobile-filter-collapse">
-        <h1
-          @click=${() => {
-            this.isResizeToMobile = false;
-            this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
-          @keyup=${() => {
-            this.isResizeToMobile = false;
-            this.mobileFacetsVisible = !this.mobileFacetsVisible;
-        }}
-        >
-          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
-            ${chevronIcon}
-          </span>
-          Filters
-        </h1>
-      </div>
-    `;
-    }
-    get facetsTemplate() {
-        return html `
-      <collection-facets
-        @facetsChanged=${this.facetsChanged}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-        .searchService=${this.searchService}
-        .searchType=${this.searchType}
-        .aggregations=${this.aggregations}
-        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
-        .moreLinksVisible=${this.previousSearchType !== SearchType.FULLTEXT}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .selectedFacets=${this.selectedFacets}
-        .collectionNameCache=${this.collectionNameCache}
-        .languageCodeHandler=${this.languageCodeHandler}
-        .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .fullQuery=${this.fullQuery}
-        .modalManager=${this.modalManager}
-        ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetDataLoading}
-        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
-        .onFacetClick=${this.facetClickHandler}
-        .analyticsHandler=${this.analyticsHandler}
-      >
-      </collection-facets>
-    `;
-    }
-    get loadingTemplate() {
-        return html `
-      <div class="loading-cover">
-        <circular-activity-indicator></circular-activity-indicator>
-      </div>
-    `;
-    }
-    get listHeaderTemplate() {
-        return html `
-      <div id="list-header">
-        <tile-dispatcher
-          .tileDisplayMode=${'list-header'}
-          .resizeObserver=${this.resizeObserver}
-          .sortParam=${this.sortParam}
-          .mobileBreakpoint=${this.mobileBreakpoint}
-          .loggedIn=${this.loggedIn}
-        >
-        </tile-dispatcher>
-      </div>
-    `;
-    }
-    get queryDebuggingTemplate() {
-        var _a, _b;
-        return html `
-      <div>
-        <ul>
-          <li>Base Query: ${this.baseQuery}</li>
-          <li>Facet Query: ${this.facetQuery}</li>
-          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
-          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
-          <li>Sort: ${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field} ${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}</li>
-          <li>Full Query: ${this.fullQuery}</li>
-        </ul>
-      </div>
-    `;
-    }
-    histogramDateRangeUpdated(e) {
-        var _a;
-        const { minDate, maxDate } = e.detail;
-        this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
-        if (this.dateRangeQueryClause) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: this.searchContext,
-                action: analyticsActions.histogramChanged,
-                label: this.dateRangeQueryClause,
-            });
-        }
-    }
-    firstUpdated() {
-        this.setupStateRestorationObserver();
-        this.restoreState();
-    }
-    updated(changed) {
-        var _a;
-        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')) {
-            this.emitBaseQueryChanged();
-        }
-        if (changed.has('currentPage') || changed.has('displayMode')) {
-            this.persistState();
-        }
-        if (changed.has('baseQuery') ||
-            changed.has('titleQuery') ||
-            changed.has('creatorQuery') ||
-            changed.has('dateRangeQueryClause') ||
-            changed.has('sortParam') ||
-            changed.has('selectedFacets') ||
-            changed.has('searchService')) {
-            this.handleQueryChange();
-        }
-        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'));
-            this.selectedTitleLetterChanged();
-        }
-        if (changed.has('selectedCreatorFilter')) {
-            this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
-            this.selectedCreatorLetterChanged();
-        }
-        if (changed.has('pagesToRender')) {
-            if (!this.endOfDataReached && this.infiniteScroller) {
-                this.infiniteScroller.itemCount = this.estimatedTileCount;
-            }
-        }
-        if (changed.has('resizeObserver')) {
-            const oldObserver = changed.get('resizeObserver');
-            if (oldObserver)
-                this.disconnectResizeObserver(oldObserver);
-            this.setupResizeObserver();
-        }
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.disconnectResizeObserver(this.resizeObserver);
-        }
-        if (this.boundNavigationHandler) {
-            window.removeEventListener('popstate', this.boundNavigationHandler);
-        }
-    }
-    handleResize(entry) {
-        const previousView = this.mobileView;
-        if (entry.target === this.contentContainer) {
-            this.mobileView = entry.contentRect.width < this.mobileBreakpoint;
-            // If changing from desktop to mobile disable transition
-            if (this.mobileView && !previousView) {
-                this.isResizeToMobile = true;
-            }
-        }
-    }
-    emitBaseQueryChanged() {
-        this.dispatchEvent(new CustomEvent('baseQueryChanged', {
-            detail: {
-                baseQuery: this.baseQuery,
-            },
-        }));
-    }
-    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);
-    }
-    async handleQueryChange() {
-        // only reset if the query has actually changed
-        if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
-            return;
-        this.previousQueryKey = this.pageFetchQueryKey;
-        this.dataSource = {};
-        this.pageFetchesInProgress = {};
-        this.endOfDataReached = false;
-        this.pagesToRender = this.initialPageNumber;
-        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;
-        }
-        await Promise.all([
-            this.doInitialPageFetch(),
-            this.fetchFacets(),
-            this.fetchFullYearHistogram(),
-        ]);
-    }
-    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, _f;
-        const restorationState = this.restorationStateHandler.getRestorationState();
-        this.displayMode = restorationState.displayMode;
-        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.relevance;
-        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.titleQuery = restorationState.titleQuery;
-        this.creatorQuery = restorationState.creatorQuery;
-        this.dateRangeQueryClause = restorationState.dateRangeQueryClause;
-        this.sortParam = (_e = restorationState.sortParam) !== null && _e !== void 0 ? _e : null;
-        this.currentPage = (_f = restorationState.currentPage) !== null && _f !== void 0 ? _f : 1;
-        this.minSelectedDate = restorationState.minSelectedDate;
-        this.maxSelectedDate = restorationState.maxSelectedDate;
-        if (this.currentPage > 1) {
-            this.goToPage(this.currentPage);
-        }
-    }
-    persistState() {
-        var _a, _b, _c, _d, _e;
-        const restorationState = {
-            displayMode: this.displayMode,
-            sortParam: (_a = this.sortParam) !== null && _a !== void 0 ? _a : undefined,
-            selectedSort: this.selectedSort,
-            sortDirection: (_b = this.sortDirection) !== null && _b !== void 0 ? _b : undefined,
-            selectedFacets: (_c = this.selectedFacets) !== null && _c !== void 0 ? _c : defaultSelectedFacets,
-            baseQuery: this.baseQuery,
-            currentPage: this.currentPage,
-            dateRangeQueryClause: this.dateRangeQueryClause,
-            titleQuery: this.titleQuery,
-            creatorQuery: this.creatorQuery,
-            minSelectedDate: this.minSelectedDate,
-            maxSelectedDate: this.maxSelectedDate,
-            selectedTitleFilter: (_d = this.selectedTitleFilter) !== null && _d !== void 0 ? _d : undefined,
-            selectedCreatorFilter: (_e = this.selectedCreatorFilter) !== null && _e !== void 0 ? _e : undefined,
-        };
-        this.restorationStateHandler.persistState(restorationState);
-    }
-    async doInitialPageFetch() {
-        this.searchResultsLoading = true;
-        await this.fetchPage(this.initialPageNumber);
-        this.searchResultsLoading = false;
-    }
-    get fullQuery() {
-        let { fullQueryWithoutDate } = this;
-        const { dateRangeQueryClause } = this;
-        if (dateRangeQueryClause) {
-            fullQueryWithoutDate += ` AND ${dateRangeQueryClause}`;
-        }
-        return fullQueryWithoutDate;
-    }
-    get fullQueryWithoutDate() {
-        if (!this.baseQuery)
-            return undefined;
-        let fullQuery = this.baseQuery;
-        const { facetQuery, sortFilterQueries } = this;
-        if (facetQuery) {
-            fullQuery += ` AND ${facetQuery}`;
-        }
-        if (sortFilterQueries) {
-            fullQuery += ` AND ${sortFilterQueries}`;
-        }
-        return fullQuery;
-    }
-    /**
-     * Generates a query string for the given facets
-     *
-     * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
-     */
-    get facetQuery() {
-        if (!this.selectedFacets)
-            return undefined;
-        const facetQuery = [];
-        for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
-            const facetEntries = Object.entries(facetValues);
-            const facetQueryName = facetName === 'lending' ? 'lending___status' : facetName;
-            // eslint-disable-next-line no-continue
-            if (facetEntries.length === 0)
-                continue;
-            const facetValuesArray = [];
-            for (const [key, facetData] of facetEntries) {
-                const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
-                if (facetName === 'language') {
-                    const languages = this.languageCodeHandler.getCodeArrayFromCodeString(key);
-                    for (const language of languages) {
-                        facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
-                    }
-                }
-                else {
-                    facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
-                }
-            }
-            const valueQuery = facetValuesArray.join(` OR `);
-            facetQuery.push(`${facetQueryName}:(${valueQuery})`);
-        }
-        return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;
-    }
-    facetsChanged(e) {
-        this.selectedFacets = e.detail;
-    }
-    facetClickHandler(name, facetSelected, negative) {
-        var _a, _b;
-        if (negative) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: this.searchContext,
-                action: facetSelected
-                    ? analyticsActions.facetNegativeSelected
-                    : analyticsActions.facetNegativeDeselected,
-                label: name,
-            });
-        }
-        else {
-            (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
-                category: this.searchContext,
-                action: facetSelected
-                    ? analyticsActions.facetSelected
-                    : analyticsActions.facetDeselected,
-                label: name,
-            });
-        }
-    }
-    async fetchFacets() {
-        var _a, _b;
-        if (!this.fullQuery)
-            return;
-        const params = {
-            query: this.fullQuery,
-            rows: 0,
-            // 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.
-        };
-        this.facetsLoading = true;
-        this.previousSearchType = this.searchType;
-        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
-        this.facetsLoading = false;
-        this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
-    }
-    /**
-     * The query key is a string that uniquely identifies the current query
-     * without the date range.
-     *
-     * If this doesn't change, we don't need to re-fetch the histogram date range
-     */
-    get fullQueryNoDateKey() {
-        var _a, _b;
-        return `${this.fullQueryWithoutDate}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
-    }
-    /**
-     * This method is similar to fetching the facets above,
-     * but only fetching the year histogram. There is a subtle difference
-     * in how you have to fetch the year histogram where you can't use the
-     * advanced JSON syntax like the other aggregations. It's a special
-     * case that @ximm put it place.
-     */
-    async fetchFullYearHistogram() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const { fullQueryNoDateKey } = this;
-        if (!this.fullQueryWithoutDate ||
-            fullQueryNoDateKey === this.previousFullQueryNoDate)
-            return;
-        this.previousFullQueryNoDate = fullQueryNoDateKey;
-        const aggregations = {
-            simpleParams: ['year'],
-        };
-        const params = {
-            query: this.fullQueryWithoutDate,
-            aggregations,
-            rows: 0,
-        };
-        this.fullYearAggregationLoading = true;
-        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
-        this.fullYearAggregationLoading = false;
-        this.fullYearsHistogramAggregation =
-            (_e = (_d = (_c = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.aggregations) === null || _d === void 0 ? void 0 : _d.year_histogram) !== null && _e !== void 0 ? _e : (_h = (_g = (_f = results === null || results === void 0 ? void 0 : results.success) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.aggregations) === null || _h === void 0 ? void 0 : _h['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
-    }
-    scrollToPage(pageNumber) {
-        const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-        // without this setTimeout, Safari just pauses until the `fetchPage` is complete
-        // then scrolls to the cell
-        setTimeout(() => {
-            this.isScrollingToCell = true;
-            this.infiniteScroller.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(() => {
-                this.isScrollingToCell = false;
-                this.infiniteScroller.reload();
-            }, 500);
-        }, 0);
-    }
-    /**
-     * The query key is a string that uniquely identifies the current query
-     *
-     * This lets us keep track of queries so we don't persist data that's
-     * no longer relevant.
-     */
-    get pageFetchQueryKey() {
-        var _a, _b;
-        return `${this.fullQuery}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
-    }
-    async fetchPage(pageNumber) {
-        var _a, _b, _c, _d, _e;
-        if (!this.fullQuery)
-            return;
-        // if we already have data, don't fetch again
-        if (this.dataSource[pageNumber])
-            return;
-        if (this.endOfDataReached)
-            return;
-        // if a fetch is already in progress for this query and page, don't fetch again
-        const { pageFetchQueryKey } = this;
-        const pageFetches = (_a = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _a !== void 0 ? _a : new Set();
-        if (pageFetches.has(pageNumber))
-            return;
-        pageFetches.add(pageNumber);
-        this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
-        const sortParams = this.sortParam ? [this.sortParam] : [];
-        const params = {
-            query: this.fullQuery,
-            page: pageNumber,
-            rows: this.pageSize,
-            sort: sortParams,
-            aggregations: { omit: 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;
-        if (!success)
-            return;
-        this.totalResults = success.response.totalResults;
-        // 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 searchQuery = success.request.clientParameters.user_query;
-        const searchSort = success.request.clientParameters.sort;
-        let sortChanged = false;
-        if (!searchSort || searchSort.length === 0) {
-            // if we went from no sort to sort, the sort has changed
-            if (this.sortParam) {
-                sortChanged = true;
-            }
-        }
-        else {
-            // check if the sort has changed
-            for (const sortType of searchSort) {
-                const [field, direction] = sortType.split(':');
-                if (field !== ((_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.field) ||
-                    direction !== ((_d = this.sortParam) === null || _d === void 0 ? void 0 : _d.direction)) {
-                    sortChanged = true;
-                    break;
-                }
-            }
-        }
-        const queryChangedSinceFetch = searchQuery !== this.fullQuery || sortChanged;
-        if (queryChangedSinceFetch)
-            return;
-        const { results } = success.response;
-        if (results && results.length > 0) {
-            this.preloadCollectionNames(results);
-            this.updateDataSource(pageNumber, results);
-        }
-        if (results.length < this.pageSize) {
-            this.endOfDataReached = true;
-            // this updates the infinite scroller to show the actual size
-            if (this.infiniteScroller) {
-                this.infiniteScroller.itemCount = this.actualTileCount;
-            }
-        }
-        (_e = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _e === void 0 ? void 0 : _e.delete(pageNumber);
-        this.searchResultsLoading = false;
-    }
-    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);
-    }
-    /**
-     * 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) {
-        // 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;
-            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,
-                collections: (_g = (_f = result.collection) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : [],
-                commentCount: (_j = (_h = result.num_reviews) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 0,
-                creator: (_k = result.creator) === null || _k === void 0 ? void 0 : _k.value,
-                creators: (_m = (_l = result.creator) === null || _l === void 0 ? void 0 : _l.values) !== null && _m !== void 0 ? _m : [],
-                dateAdded: (_o = result.addeddate) === null || _o === void 0 ? void 0 : _o.value,
-                dateArchived: (_p = result.publicdate) === null || _p === void 0 ? void 0 : _p.value,
-                datePublished: (_q = result.date) === null || _q === void 0 ? void 0 : _q.value,
-                dateReviewed: (_r = result.reviewdate) === null || _r === void 0 ? void 0 : _r.value,
-                description: (_s = result.description) === null || _s === void 0 ? void 0 : _s.value,
-                favCount: (_u = (_t = result.num_favorites) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 0,
-                identifier: result.identifier,
-                issue: (_v = result.issue) === null || _v === void 0 ? void 0 : _v.value,
-                itemCount: (_x = (_w = result.item_count) === null || _w === void 0 ? void 0 : _w.value) !== null && _x !== void 0 ? _x : 0,
-                mediatype: (_z = (_y = result.mediatype) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : 'data',
-                snippets: (_1 = (_0 = result.highlight) === null || _0 === void 0 ? void 0 : _0.values) !== null && _1 !== void 0 ? _1 : [],
-                source: (_2 = result.source) === null || _2 === void 0 ? void 0 : _2.value,
-                subjects: (_4 = (_3 = result.subject) === null || _3 === void 0 ? void 0 : _3.values) !== null && _4 !== void 0 ? _4 : [],
-                title: this.etreeTitle((_5 = result.title) === null || _5 === void 0 ? void 0 : _5.value, (_6 = result.mediatype) === null || _6 === void 0 ? void 0 : _6.value, (_7 = result.collection) === null || _7 === void 0 ? void 0 : _7.values),
-                volume: (_8 = result.volume) === null || _8 === void 0 ? void 0 : _8.value,
-                viewCount: (_10 = (_9 = result.downloads) === null || _9 === void 0 ? void 0 : _9.value) !== null && _10 !== void 0 ? _10 : 0,
-                loginRequired,
-                contentWarning,
-            });
-        });
-        datasource[pageNumber] = tiles;
-        this.dataSource = datasource;
-        const visiblePages = this.currentVisiblePageNumbers;
-        const needsReload = visiblePages.includes(pageNumber);
-        if (needsReload) {
-            this.infiniteScroller.reload();
-        }
-    }
-    /*
-     * Convert etree titles
-     * "[Creator] Live at [Place] on [Date]" => "[Date]: [Place]"
-     *
-     * Todo: Check collection(s) for etree, need to get as array.
-     * Current search-service only returns first collection as string.
-     */
-    etreeTitle(title, mediatype, collections) {
-        if (mediatype === 'etree' || (collections === null || collections === void 0 ? void 0 : collections.includes('etree'))) {
-            const regex = /^(.*) Live at (.*) on (\d\d\d\d-\d\d-\d\d)$/;
-            const newTitle = title === null || title === void 0 ? void 0 : title.replace(regex, '$3: $2');
-            if (newTitle) {
-                return `${newTitle}`;
-            }
-        }
-        return title !== null && title !== void 0 ? title : '';
-    }
-    /**
-     * Callback when a result is selected
-     */
-    resultSelected(event) {
-        var _a, _b;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.searchContext,
-            action: analyticsActions.resultSelected,
-            label: event.detail.mediatype,
-        });
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
-            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
-        .baseNavigationUrl=${this.baseNavigationUrl}
-        .baseImageUrl=${this.baseImageUrl}
-        .model=${model}
-        .tileDisplayMode=${this.displayMode}
-        .resizeObserver=${this.resizeObserver}
-        .collectionNameCache=${this.collectionNameCache}
-        .sortParam=${this.sortParam}
-        .mobileBreakpoint=${this.mobileBreakpoint}
-        .loggedIn=${this.loggedIn}
-        @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() {
-        this.pagesToRender += 1;
-        this.fetchPage(this.pagesToRender);
-    }
-};
-CollectionBrowser.styles = css `
-    :host {
-      display: block;
-    }
-
-    /**
-    * When page width resizes from desktop to mobile, use this class to
-    * disable expand/collapse transition when loading.
-    */
-    .preload * {
-      transition: none !important;
-      -webkit-transition: none !important;
-      -moz-transition: none !important;
-      -ms-transition: none !important;
-      -o-transition: none !important;
-    }
-
-    #content-container {
-      display: flex;
-    }
-
-    .collapser {
-      display: inline-block;
-    }
-
-    .collapser svg {
-      width: 10px;
-      height: 10px;
-      transition: transform 0.2s ease-out;
-    }
-
-    .collapser.open svg {
-      transform: rotate(90deg);
-    }
-
-    #mobile-filter-collapse h1 {
-      cursor: pointer;
-    }
-
-    #content-container.mobile {
-      display: block;
-    }
-
-    .column {
-      padding-top: 2rem;
-    }
-
-    #right-column {
-      flex: 1;
-      position: relative;
-      border-left: 1px solid rgb(232, 232, 232);
-      padding-left: 1rem;
-    }
-
-    .mobile #right-column {
-      border-left: none;
-      padding: 0;
-    }
-
-    #left-column {
-      width: 18rem;
-      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
-      padding-right: 12px;
-      padding-right: 2.5rem;
-    }
-
-    .desktop #left-column::-webkit-scrollbar {
-      display: none;
-    }
-
-    .mobile #left-column {
-      width: 100%;
-      padding: 0;
-    }
-
-    .desktop #left-column {
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      overflow: scroll;
-      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
-      scrollbar-width: none; /* hide scrollbar Firefox */
-    }
-
-    #mobile-header-container {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    #facets-container {
-      position: relative;
-      max-height: 0;
-      transition: max-height 0.2s ease-in-out;
-      z-index: 1;
-      padding-bottom: 2rem;
-    }
-
-    .mobile #facets-container {
-      overflow: hidden;
-      padding-bottom: 0;
-    }
-
-    #facets-container.expanded {
-      max-height: 2000px;
-    }
-
-    #results-total {
-      display: flex;
-      align-items: center;
-      margin-bottom: 5rem;
-    }
-
-    .mobile #results-total {
-      margin-bottom: 0;
-    }
-
-    #big-results-count {
-      font-size: 2.4rem;
-      font-weight: 500;
-      margin-right: 5px;
-    }
-
-    #big-results-label {
-      font-size: 1rem;
-      font-weight: 200;
-      text-transform: uppercase;
-    }
-
-    #list-header {
-      max-height: 4.2rem;
-    }
-
-    .loading-cover {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      z-index: 1;
-      padding-top: 50px;
-    }
-
-    circular-activity-indicator {
-      width: 30px;
-      height: 30px;
-    }
-
-    sort-filter-bar {
-      display: block;
-      margin-bottom: 4rem;
-    }
-
-    infinite-scroller {
-      display: block;
-      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
-      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
-    }
-
-    infinite-scroller.list-compact {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
-      --infiniteScrollerCellMaxHeight: 56px;
-      --infiniteScrollerRowGap: 0px;
-    }
-
-    infinite-scroller.list-detail {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        100%
-      );
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        5rem
-      );
-      /*
-        30px in spec, compensating for a -4px margin
-        to align title with top of item image
-        src/tiles/list/tile-list.ts
-       */
-      --infiniteScrollerRowGap: 34px;
-    }
-
-    .mobile infinite-scroller.list-detail {
-      --infiniteScrollerRowGap: 24px;
-    }
-
-    infinite-scroller.grid {
-      --infiniteScrollerCellMinWidth: var(
-        --collectionBrowserCellMinWidth,
-        18rem
-      );
-      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        29rem
-      );
-      --infiniteScrollerCellMaxHeight: var(
-        --collectionBrowserCellMaxHeight,
-        29rem
-      );
-    }
-  `;
-__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, "baseQuery", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "displayMode", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "sortParam", 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: String })
-], CollectionBrowser.prototype, "dateRangeQueryClause", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionBrowser.prototype, "pageSize", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionBrowser.prototype, "resizeObserver", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "titleQuery", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "creatorQuery", 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, 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: 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, "previousSearchType", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "totalResults", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "mobileView", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "placeholderType", void 0);
-__decorate([
-    query('#content-container')
-], CollectionBrowser.prototype, "contentContainer", 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 };
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { 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 './collection-facets';
+import './circular-activity-indicator';
+import './sort-filter-bar/sort-filter-bar';
+import { SortField, SortFieldToMetadataField, defaultSelectedFacets, } from './models';
+import { RestorationStateHandler, } from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
+import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
+import './empty-placeholder';
+import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+let CollectionBrowser = class CollectionBrowser extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseImageUrl = 'https://archive.org';
+        this.searchType = SearchType.METADATA;
+        this.sortParam = null;
+        this.selectedSort = SortField.relevance;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.sortDirection = null;
+        this.pageSize = 50;
+        this.showHistogramDatePicker = false;
+        /** 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;
+        this.searchResultsLoading = false;
+        this.facetsLoading = false;
+        this.fullYearAggregationLoading = false;
+        this.mobileView = false;
+        this.mobileFacetsVisible = false;
+        this.placeholderType = null;
+        this.languageCodeHandler = new LanguageCodeHandler();
+        /**
+         * 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 = {};
+        // 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;
+        // this maps the query to the pages being fetched for that query
+        this.pageFetchesInProgress = {};
+    }
+    tileModelAtCellIndex(index) {
+        var _a;
+        const pageNumber = Math.floor(index / this.pageSize) + 1;
+        const itemIndex = index % 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;
+    }
+    // this is the actual number of tiles in the datasource,
+    // which is useful for removing excess placeholder tiles
+    // once we reached the end of the data
+    get actualTileCount() {
+        return Object.keys(this.dataSource).reduce((acc, page) => acc + this.dataSource[page].length, 0);
+    }
+    /**
+     * Go to the given page of results
+     *
+     * @param pageNumber
+     */
+    goToPage(pageNumber) {
+        this.initialPageNumber = pageNumber;
+        this.pagesToRender = pageNumber;
+        this.scrollToPage(pageNumber);
+    }
+    clearFilters() {
+        this.selectedFacets = defaultSelectedFacets;
+        this.sortParam = null;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.titleQuery = undefined;
+        this.creatorQuery = undefined;
+        this.selectedSort = SortField.relevance;
+        this.sortDirection = null;
+    }
+    /**
+     * Manually requests to perform a search, which will only be executed if one of
+     * the query, the search type, or the sort has changed.
+     */
+    requestSearch() {
+        this.handleQueryChange();
+    }
+    render() {
+        this.setPlaceholderType();
+        return html `
+      <div
+        id="content-container"
+        class=${this.mobileView ? 'mobile' : 'desktop'}
+      >
+        ${this.placeholderType
+            ? this.emptyPlaceholderTemplate
+            : this.collectionBrowserTemplate}
+      </div>
+    `;
+    }
+    setPlaceholderType() {
+        this.placeholderType = null;
+        if (!this.baseQuery) {
+            this.placeholderType = 'empty-query';
+        }
+        if ((!this.searchResultsLoading && this.totalResults === 0) ||
+            !this.searchService) {
+            this.placeholderType = 'null-result';
+        }
+    }
+    get emptyPlaceholderTemplate() {
+        return html `
+      <empty-placeholder
+        .placeholderType=${this.placeholderType}
+        ?isMobileView=${this.mobileView}
+      ></empty-placeholder>
+    `;
+    }
+    get collectionBrowserTemplate() {
+        return html `<div
+        id="left-column"
+        class="column${this.isResizeToMobile ? ' preload' : ''}"
+      >
+        <div id="mobile-header-container">
+          ${this.mobileView ? this.mobileFacetsTemplate : nothing}
+          <div id="results-total">
+            <span id="big-results-count">
+              ${this.totalResults !== undefined
+            ? this.totalResults.toLocaleString()
+            : '-'}
+            </span>
+            <span id="big-results-label">
+              ${this.totalResults === 1 ? 'Result' : 'Results'}
+            </span>
+          </div>
+        </div>
+        <div
+          id="facets-container"
+          class=${!this.mobileView || this.mobileFacetsVisible
+            ? 'expanded'
+            : ''}
+        >
+          ${this.facetsTemplate}
+        </div>
+      </div>
+      <div id="right-column" class="column">
+        ${this.sortFilterBarTemplate}
+        ${this.displayMode === `list-compact`
+            ? this.listHeaderTemplate
+            : nothing}
+        ${this.infiniteScrollerTemplate}
+      </div>`;
+    }
+    get infiniteScrollerTemplate() {
+        return html `<infinite-scroller
+      class="${ifDefined(this.displayMode)}"
+      .cellProvider=${this}
+      .placeholderCellTemplate=${this.placeholderCellTemplate}
+      @scrollThresholdReached=${this.scrollThresholdReached}
+      @visibleCellsChanged=${this.visibleCellsChanged}
+    ></infinite-scroller>`;
+    }
+    get sortFilterBarTemplate() {
+        return html `
+      <sort-filter-bar
+        .selectedSort=${this.selectedSort}
+        .sortDirection=${this.sortDirection}
+        .displayMode=${this.displayMode}
+        .selectedTitleFilter=${this.selectedTitleFilter}
+        .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .resizeObserver=${this.resizeObserver}
+        @sortChanged=${this.userChangedSort}
+        @displayModeChanged=${this.displayModeChanged}
+        @titleLetterChanged=${this.titleLetterSelected}
+        @creatorLetterChanged=${this.creatorLetterSelected}
+      >
+      </sort-filter-bar>
+    `;
+    }
+    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.sendEventNoSampling({
+            category: this.searchContext,
+            action: analyticsActions.sortBy,
+            label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
+        });
+    }
+    selectedSortChanged() {
+        if (this.selectedSort === 'relevance' || this.sortDirection === null) {
+            this.sortParam = null;
+            return;
+        }
+        const sortField = SortFieldToMetadataField[this.selectedSort];
+        if (!sortField)
+            return;
+        this.sortParam = { field: sortField, direction: this.sortDirection };
+    }
+    displayModeChanged(e) {
+        var _a;
+        this.displayMode = e.detail.displayMode;
+        if (this.displayMode) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: this.searchContext,
+                action: analyticsActions.displayMode,
+                label: this.displayMode,
+            });
+        }
+    }
+    /** 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 === null;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+            category: this.searchContext,
+            action: analyticsActions.filterByTitle,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
+        });
+    }
+    selectedTitleLetterChanged() {
+        this.titleQuery = this.selectedTitleFilter
+            ? `firstTitle:${this.selectedTitleFilter}`
+            : undefined;
+    }
+    /** 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 === null;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+            category: this.searchContext,
+            action: analyticsActions.filterByCreator,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
+        });
+    }
+    selectedCreatorLetterChanged() {
+        this.creatorQuery = this.selectedCreatorFilter
+            ? `firstCreator:${this.selectedCreatorFilter}`
+            : undefined;
+    }
+    titleLetterSelected(e) {
+        this.selectedCreatorFilter = null;
+        this.selectedTitleFilter = e.detail.selectedLetter;
+    }
+    creatorLetterSelected(e) {
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = e.detail.selectedLetter;
+    }
+    get facetDataLoading() {
+        return this.facetsLoading || this.fullYearAggregationLoading;
+    }
+    get mobileFacetsTemplate() {
+        return html `
+      <div id="mobile-filter-collapse">
+        <h1
+          @click=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        }}
+          @keyup=${() => {
+            this.isResizeToMobile = false;
+            this.mobileFacetsVisible = !this.mobileFacetsVisible;
+        }}
+        >
+          <span class="collapser ${this.mobileFacetsVisible ? 'open' : ''}">
+            ${chevronIcon}
+          </span>
+          Filters
+        </h1>
+      </div>
+    `;
+    }
+    get facetsTemplate() {
+        return html `
+      <collection-facets
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
+        .searchType=${this.searchType}
+        .aggregations=${this.aggregations}
+        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
+        .moreLinksVisible=${this.previousSearchType !== SearchType.FULLTEXT}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+        .onFacetClick=${this.facetClickHandler}
+        .analyticsHandler=${this.analyticsHandler}
+      >
+      </collection-facets>
+    `;
+    }
+    get loadingTemplate() {
+        return html `
+      <div class="loading-cover">
+        <circular-activity-indicator></circular-activity-indicator>
+      </div>
+    `;
+    }
+    get listHeaderTemplate() {
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-dispatcher>
+      </div>
+    `;
+    }
+    get queryDebuggingTemplate() {
+        var _a, _b;
+        return html `
+      <div>
+        <ul>
+          <li>Base Query: ${this.baseQuery}</li>
+          <li>Facet Query: ${this.facetQuery}</li>
+          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
+          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
+          <li>Sort: ${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field} ${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}</li>
+          <li>Full Query: ${this.fullQuery}</li>
+        </ul>
+      </div>
+    `;
+    }
+    histogramDateRangeUpdated(e) {
+        var _a;
+        const { minDate, maxDate } = e.detail;
+        this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
+        if (this.dateRangeQueryClause) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: this.searchContext,
+                action: analyticsActions.histogramChanged,
+                label: this.dateRangeQueryClause,
+            });
+        }
+    }
+    firstUpdated() {
+        this.setupStateRestorationObserver();
+        this.restoreState();
+    }
+    updated(changed) {
+        var _a;
+        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')) {
+            this.emitBaseQueryChanged();
+        }
+        if (changed.has('searchType')) {
+            this.emitSearchTypeChanged();
+        }
+        if (changed.has('currentPage') || changed.has('displayMode')) {
+            this.persistState();
+        }
+        if (changed.has('baseQuery') ||
+            changed.has('titleQuery') ||
+            changed.has('creatorQuery') ||
+            changed.has('dateRangeQueryClause') ||
+            changed.has('sortParam') ||
+            changed.has('selectedFacets') ||
+            changed.has('searchService')) {
+            this.handleQueryChange();
+        }
+        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'));
+            this.selectedTitleLetterChanged();
+        }
+        if (changed.has('selectedCreatorFilter')) {
+            this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
+            this.selectedCreatorLetterChanged();
+        }
+        if (changed.has('pagesToRender')) {
+            if (!this.endOfDataReached && this.infiniteScroller) {
+                this.infiniteScroller.itemCount = this.estimatedTileCount;
+            }
+        }
+        if (changed.has('resizeObserver')) {
+            const oldObserver = changed.get('resizeObserver');
+            if (oldObserver)
+                this.disconnectResizeObserver(oldObserver);
+            this.setupResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+        if (this.boundNavigationHandler) {
+            window.removeEventListener('popstate', this.boundNavigationHandler);
+        }
+    }
+    handleResize(entry) {
+        const previousView = this.mobileView;
+        if (entry.target === this.contentContainer) {
+            this.mobileView = entry.contentRect.width < this.mobileBreakpoint;
+            // If changing from desktop to mobile disable transition
+            if (this.mobileView && !previousView) {
+                this.isResizeToMobile = true;
+            }
+        }
+    }
+    emitBaseQueryChanged() {
+        this.dispatchEvent(new CustomEvent('baseQueryChanged', {
+            detail: {
+                baseQuery: this.baseQuery,
+            },
+        }));
+    }
+    emitSearchTypeChanged() {
+        this.dispatchEvent(new CustomEvent('searchTypeChanged', {
+            detail: this.searchType,
+        }));
+    }
+    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);
+    }
+    async handleQueryChange() {
+        // only reset if the query has actually changed
+        if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
+            return;
+        this.previousQueryKey = this.pageFetchQueryKey;
+        this.dataSource = {};
+        this.pageFetchesInProgress = {};
+        this.endOfDataReached = false;
+        this.pagesToRender = this.initialPageNumber;
+        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;
+        }
+        await Promise.all([
+            this.doInitialPageFetch(),
+            this.fetchFacets(),
+            this.fetchFullYearHistogram(),
+        ]);
+    }
+    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, _f;
+        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.relevance;
+        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.titleQuery = restorationState.titleQuery;
+        this.creatorQuery = restorationState.creatorQuery;
+        this.dateRangeQueryClause = restorationState.dateRangeQueryClause;
+        this.sortParam = (_e = restorationState.sortParam) !== null && _e !== void 0 ? _e : null;
+        this.currentPage = (_f = restorationState.currentPage) !== null && _f !== void 0 ? _f : 1;
+        this.minSelectedDate = restorationState.minSelectedDate;
+        this.maxSelectedDate = restorationState.maxSelectedDate;
+        if (this.currentPage > 1) {
+            this.goToPage(this.currentPage);
+        }
+    }
+    persistState() {
+        var _a, _b, _c, _d, _e;
+        const restorationState = {
+            displayMode: this.displayMode,
+            searchType: this.searchType,
+            sortParam: (_a = this.sortParam) !== null && _a !== void 0 ? _a : undefined,
+            selectedSort: this.selectedSort,
+            sortDirection: (_b = this.sortDirection) !== null && _b !== void 0 ? _b : undefined,
+            selectedFacets: (_c = this.selectedFacets) !== null && _c !== void 0 ? _c : defaultSelectedFacets,
+            baseQuery: this.baseQuery,
+            currentPage: this.currentPage,
+            dateRangeQueryClause: this.dateRangeQueryClause,
+            titleQuery: this.titleQuery,
+            creatorQuery: this.creatorQuery,
+            minSelectedDate: this.minSelectedDate,
+            maxSelectedDate: this.maxSelectedDate,
+            selectedTitleFilter: (_d = this.selectedTitleFilter) !== null && _d !== void 0 ? _d : undefined,
+            selectedCreatorFilter: (_e = this.selectedCreatorFilter) !== null && _e !== void 0 ? _e : undefined,
+        };
+        this.restorationStateHandler.persistState(restorationState);
+    }
+    async doInitialPageFetch() {
+        this.searchResultsLoading = true;
+        await this.fetchPage(this.initialPageNumber);
+        this.searchResultsLoading = false;
+    }
+    get fullQuery() {
+        let { fullQueryWithoutDate } = this;
+        const { dateRangeQueryClause } = this;
+        if (dateRangeQueryClause) {
+            fullQueryWithoutDate += ` AND ${dateRangeQueryClause}`;
+        }
+        return fullQueryWithoutDate;
+    }
+    get fullQueryWithoutDate() {
+        if (!this.baseQuery)
+            return undefined;
+        let fullQuery = this.baseQuery;
+        const { facetQuery, sortFilterQueries } = this;
+        if (facetQuery) {
+            fullQuery += ` AND ${facetQuery}`;
+        }
+        if (sortFilterQueries) {
+            fullQuery += ` AND ${sortFilterQueries}`;
+        }
+        return fullQuery;
+    }
+    /**
+     * Generates a query string for the given facets
+     *
+     * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
+     */
+    get facetQuery() {
+        if (!this.selectedFacets)
+            return undefined;
+        const facetQuery = [];
+        for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
+            const facetEntries = Object.entries(facetValues);
+            const facetQueryName = facetName === 'lending' ? 'lending___status' : facetName;
+            // eslint-disable-next-line no-continue
+            if (facetEntries.length === 0)
+                continue;
+            const facetValuesArray = [];
+            for (const [key, facetData] of facetEntries) {
+                const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
+                if (facetName === 'language') {
+                    const languages = this.languageCodeHandler.getCodeArrayFromCodeString(key);
+                    for (const language of languages) {
+                        facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
+                    }
+                }
+                else {
+                    facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
+                }
+            }
+            const valueQuery = facetValuesArray.join(` OR `);
+            facetQuery.push(`${facetQueryName}:(${valueQuery})`);
+        }
+        return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;
+    }
+    facetsChanged(e) {
+        this.selectedFacets = e.detail;
+    }
+    facetClickHandler(name, facetSelected, negative) {
+        var _a, _b;
+        if (negative) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: this.searchContext,
+                action: facetSelected
+                    ? analyticsActions.facetNegativeSelected
+                    : analyticsActions.facetNegativeDeselected,
+                label: name,
+            });
+        }
+        else {
+            (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
+                category: this.searchContext,
+                action: facetSelected
+                    ? analyticsActions.facetSelected
+                    : analyticsActions.facetDeselected,
+                label: name,
+            });
+        }
+    }
+    async fetchFacets() {
+        var _a, _b;
+        if (!this.fullQuery)
+            return;
+        const params = {
+            query: this.fullQuery,
+            rows: 0,
+            // 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.
+        };
+        this.facetsLoading = true;
+        this.previousSearchType = this.searchType;
+        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
+        this.facetsLoading = false;
+        this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
+    }
+    /**
+     * The query key is a string that uniquely identifies the current query
+     * without the date range.
+     *
+     * If this doesn't change, we don't need to re-fetch the histogram date range
+     */
+    get fullQueryNoDateKey() {
+        var _a, _b;
+        return `${this.fullQueryWithoutDate}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
+    }
+    /**
+     * This method is similar to fetching the facets above,
+     * but only fetching the year histogram. There is a subtle difference
+     * in how you have to fetch the year histogram where you can't use the
+     * advanced JSON syntax like the other aggregations. It's a special
+     * case that @ximm put it place.
+     */
+    async fetchFullYearHistogram() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const { fullQueryNoDateKey } = this;
+        if (!this.fullQueryWithoutDate ||
+            fullQueryNoDateKey === this.previousFullQueryNoDate)
+            return;
+        this.previousFullQueryNoDate = fullQueryNoDateKey;
+        const aggregations = {
+            simpleParams: ['year'],
+        };
+        const params = {
+            query: this.fullQueryWithoutDate,
+            aggregations,
+            rows: 0,
+        };
+        this.fullYearAggregationLoading = true;
+        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
+        this.fullYearAggregationLoading = false;
+        this.fullYearsHistogramAggregation =
+            (_e = (_d = (_c = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.aggregations) === null || _d === void 0 ? void 0 : _d.year_histogram) !== null && _e !== void 0 ? _e : (_h = (_g = (_f = results === null || results === void 0 ? void 0 : results.success) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.aggregations) === null || _h === void 0 ? void 0 : _h['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
+    }
+    scrollToPage(pageNumber) {
+        const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+        // without this setTimeout, Safari just pauses until the `fetchPage` is complete
+        // then scrolls to the cell
+        setTimeout(() => {
+            this.isScrollingToCell = true;
+            this.infiniteScroller.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(() => {
+                this.isScrollingToCell = false;
+                this.infiniteScroller.reload();
+            }, 500);
+        }, 0);
+    }
+    /**
+     * The query key is a string that uniquely identifies the current query
+     *
+     * This lets us keep track of queries so we don't persist data that's
+     * no longer relevant.
+     */
+    get pageFetchQueryKey() {
+        var _a, _b;
+        return `${this.fullQuery}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
+    }
+    async fetchPage(pageNumber) {
+        var _a, _b, _c, _d, _e;
+        if (!this.fullQuery)
+            return;
+        // if we already have data, don't fetch again
+        if (this.dataSource[pageNumber])
+            return;
+        if (this.endOfDataReached)
+            return;
+        // if a fetch is already in progress for this query and page, don't fetch again
+        const { pageFetchQueryKey } = this;
+        const pageFetches = (_a = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _a !== void 0 ? _a : new Set();
+        if (pageFetches.has(pageNumber))
+            return;
+        pageFetches.add(pageNumber);
+        this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
+        const sortParams = this.sortParam ? [this.sortParam] : [];
+        const params = {
+            query: this.fullQuery,
+            page: pageNumber,
+            rows: this.pageSize,
+            sort: sortParams,
+            aggregations: { omit: 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;
+        if (!success)
+            return;
+        this.totalResults = success.response.totalResults;
+        // 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 searchQuery = success.request.clientParameters.user_query;
+        const searchSort = success.request.clientParameters.sort;
+        let sortChanged = false;
+        if (!searchSort || searchSort.length === 0) {
+            // if we went from no sort to sort, the sort has changed
+            if (this.sortParam) {
+                sortChanged = true;
+            }
+        }
+        else {
+            // check if the sort has changed
+            for (const sortType of searchSort) {
+                const [field, direction] = sortType.split(':');
+                if (field !== ((_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.field) ||
+                    direction !== ((_d = this.sortParam) === null || _d === void 0 ? void 0 : _d.direction)) {
+                    sortChanged = true;
+                    break;
+                }
+            }
+        }
+        const queryChangedSinceFetch = searchQuery !== this.fullQuery || sortChanged;
+        if (queryChangedSinceFetch)
+            return;
+        const { results } = success.response;
+        if (results && results.length > 0) {
+            this.preloadCollectionNames(results);
+            this.updateDataSource(pageNumber, results);
+        }
+        if (results.length < this.pageSize) {
+            this.endOfDataReached = true;
+            // this updates the infinite scroller to show the actual size
+            if (this.infiniteScroller) {
+                this.infiniteScroller.itemCount = this.actualTileCount;
+            }
+        }
+        (_e = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _e === void 0 ? void 0 : _e.delete(pageNumber);
+        this.searchResultsLoading = false;
+    }
+    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);
+    }
+    /**
+     * 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) {
+        // 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;
+            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,
+                collections: (_g = (_f = result.collection) === null || _f === void 0 ? void 0 : _f.values) !== null && _g !== void 0 ? _g : [],
+                commentCount: (_j = (_h = result.num_reviews) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 0,
+                creator: (_k = result.creator) === null || _k === void 0 ? void 0 : _k.value,
+                creators: (_m = (_l = result.creator) === null || _l === void 0 ? void 0 : _l.values) !== null && _m !== void 0 ? _m : [],
+                dateAdded: (_o = result.addeddate) === null || _o === void 0 ? void 0 : _o.value,
+                dateArchived: (_p = result.publicdate) === null || _p === void 0 ? void 0 : _p.value,
+                datePublished: (_q = result.date) === null || _q === void 0 ? void 0 : _q.value,
+                dateReviewed: (_r = result.reviewdate) === null || _r === void 0 ? void 0 : _r.value,
+                description: (_s = result.description) === null || _s === void 0 ? void 0 : _s.value,
+                favCount: (_u = (_t = result.num_favorites) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 0,
+                identifier: result.identifier,
+                issue: (_v = result.issue) === null || _v === void 0 ? void 0 : _v.value,
+                itemCount: (_x = (_w = result.item_count) === null || _w === void 0 ? void 0 : _w.value) !== null && _x !== void 0 ? _x : 0,
+                mediatype: (_z = (_y = result.mediatype) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : 'data',
+                snippets: (_1 = (_0 = result.highlight) === null || _0 === void 0 ? void 0 : _0.values) !== null && _1 !== void 0 ? _1 : [],
+                source: (_2 = result.source) === null || _2 === void 0 ? void 0 : _2.value,
+                subjects: (_4 = (_3 = result.subject) === null || _3 === void 0 ? void 0 : _3.values) !== null && _4 !== void 0 ? _4 : [],
+                title: this.etreeTitle((_5 = result.title) === null || _5 === void 0 ? void 0 : _5.value, (_6 = result.mediatype) === null || _6 === void 0 ? void 0 : _6.value, (_7 = result.collection) === null || _7 === void 0 ? void 0 : _7.values),
+                volume: (_8 = result.volume) === null || _8 === void 0 ? void 0 : _8.value,
+                viewCount: (_10 = (_9 = result.downloads) === null || _9 === void 0 ? void 0 : _9.value) !== null && _10 !== void 0 ? _10 : 0,
+                weeklyViewCount: (_11 = result.week) === null || _11 === void 0 ? void 0 : _11.value,
+                loginRequired,
+                contentWarning,
+            });
+        });
+        datasource[pageNumber] = tiles;
+        this.dataSource = datasource;
+        const visiblePages = this.currentVisiblePageNumbers;
+        const needsReload = visiblePages.includes(pageNumber);
+        if (needsReload) {
+            this.infiniteScroller.reload();
+        }
+    }
+    /*
+     * Convert etree titles
+     * "[Creator] Live at [Place] on [Date]" => "[Date]: [Place]"
+     *
+     * Todo: Check collection(s) for etree, need to get as array.
+     * Current search-service only returns first collection as string.
+     */
+    etreeTitle(title, mediatype, collections) {
+        if (mediatype === 'etree' || (collections === null || collections === void 0 ? void 0 : collections.includes('etree'))) {
+            const regex = /^(.*) Live at (.*) on (\d\d\d\d-\d\d-\d\d)$/;
+            const newTitle = title === null || title === void 0 ? void 0 : title.replace(regex, '$3: $2');
+            if (newTitle) {
+                return `${newTitle}`;
+            }
+        }
+        return title !== null && title !== void 0 ? title : '';
+    }
+    /**
+     * Callback when a result is selected
+     */
+    resultSelected(event) {
+        var _a, _b;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+            category: this.searchContext,
+            action: analyticsActions.resultSelected,
+            label: event.detail.mediatype,
+        });
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
+            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
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionNameCache=${this.collectionNameCache}
+        .sortParam=${this.sortParam}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+        @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() {
+        this.pagesToRender += 1;
+        this.fetchPage(this.pagesToRender);
+    }
+};
+CollectionBrowser.styles = css `
+    :host {
+      display: block;
+    }
+
+    /**
+    * When page width resizes from desktop to mobile, use this class to
+    * disable expand/collapse transition when loading.
+    */
+    .preload * {
+      transition: none !important;
+      -webkit-transition: none !important;
+      -moz-transition: none !important;
+      -ms-transition: none !important;
+      -o-transition: none !important;
+    }
+
+    #content-container {
+      display: flex;
+    }
+
+    .collapser {
+      display: inline-block;
+    }
+
+    .collapser svg {
+      width: 10px;
+      height: 10px;
+      transition: transform 0.2s ease-out;
+    }
+
+    .collapser.open svg {
+      transform: rotate(90deg);
+    }
+
+    #mobile-filter-collapse h1 {
+      cursor: pointer;
+    }
+
+    #content-container.mobile {
+      display: block;
+    }
+
+    .column {
+      padding-top: 2rem;
+    }
+
+    #right-column {
+      flex: 1;
+      position: relative;
+      border-left: 1px solid rgb(232, 232, 232);
+      padding-left: 1rem;
+    }
+
+    .mobile #right-column {
+      border-left: none;
+      padding: 0;
+    }
+
+    #left-column {
+      width: 18rem;
+      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
+      padding-right: 12px;
+      padding-right: 2.5rem;
+    }
+
+    .desktop #left-column::-webkit-scrollbar {
+      display: none;
+    }
+
+    .mobile #left-column {
+      width: 100%;
+      padding: 0;
+    }
+
+    .desktop #left-column {
+      top: 0;
+      position: sticky;
+      max-height: 100vh;
+      overflow: scroll;
+      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
+      scrollbar-width: none; /* hide scrollbar Firefox */
+    }
+
+    #mobile-header-container {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    #facets-container {
+      position: relative;
+      max-height: 0;
+      transition: max-height 0.2s ease-in-out;
+      z-index: 1;
+      padding-bottom: 2rem;
+    }
+
+    .mobile #facets-container {
+      overflow: hidden;
+      padding-bottom: 0;
+    }
+
+    #facets-container.expanded {
+      max-height: 2000px;
+    }
+
+    #results-total {
+      display: flex;
+      align-items: baseline;
+      margin-bottom: 5rem;
+    }
+
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
+    #big-results-count {
+      font-size: 2.4rem;
+      font-weight: 500;
+      margin-right: 5px;
+    }
+
+    #big-results-label {
+      font-size: 1.4rem;
+      font-weight: 200;
+    }
+
+    #list-header {
+      max-height: 4.2rem;
+    }
+
+    .loading-cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      z-index: 1;
+      padding-top: 50px;
+    }
+
+    circular-activity-indicator {
+      width: 30px;
+      height: 30px;
+    }
+
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
+    infinite-scroller {
+      display: block;
+      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
+      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);
+    }
+
+    infinite-scroller.list-compact {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        100%
+      );
+      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+      --infiniteScrollerCellMaxHeight: 56px;
+      --infiniteScrollerRowGap: 0px;
+    }
+
+    infinite-scroller.list-detail {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        100%
+      );
+      --infiniteScrollerCellMinHeight: var(
+        --collectionBrowserCellMinHeight,
+        5rem
+      );
+      /*
+        30px in spec, compensating for a -4px margin
+        to align title with top of item image
+        src/tiles/list/tile-list.ts
+       */
+      --infiniteScrollerRowGap: 34px;
+    }
+
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
+    }
+
+    infinite-scroller.grid {
+      --infiniteScrollerCellMinWidth: var(
+        --collectionBrowserCellMinWidth,
+        18rem
+      );
+      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
+      --infiniteScrollerCellMinHeight: var(
+        --collectionBrowserCellMinHeight,
+        29rem
+      );
+      --infiniteScrollerCellMaxHeight: var(
+        --collectionBrowserCellMaxHeight,
+        29rem
+      );
+    }
+  `;
+__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, "baseQuery", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "displayMode", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "sortParam", 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: String })
+], CollectionBrowser.prototype, "dateRangeQueryClause", void 0);
+__decorate([
+    property({ type: Number })
+], CollectionBrowser.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "resizeObserver", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "titleQuery", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "creatorQuery", 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, 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: 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, "previousSearchType", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "totalResults", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "mobileView", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "placeholderType", void 0);
+__decorate([
+    query('#content-container')
+], CollectionBrowser.prototype, "contentContainer", 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