@internetarchive/collection-browser 2.1.9 → 2.1.11-alpha.0

package/dist/src/app-root.js

@@ -1,87 +1,89 @@
-import { __decorate } from "tslib";
-/* eslint-disable no-console */
-import { AnalyticsManager, } from '@internetarchive/analytics-manager';
-import { SearchService, SearchType, StringField, } from '@internetarchive/search-service';
-import { html, css, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import '../src/collection-browser';
-let AppRoot = class AppRoot extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.searchService = this.initSearchServiceFromUrlParams();
-        this.resizeObserver = new SharedResizeObserver();
-        this.toggleSlots = false;
-        this.cellWidth = 18;
-        this.cellHeight = 29;
-        this.rowGap = 1.7;
-        this.colGap = 1.7;
-        this.loggedIn = false;
-        this.searchType = SearchType.METADATA;
-        this.analyticsManager = new AnalyticsManager();
-        this.analyticsHandler = {
-            sendPing: this.sendAnalytics.bind(this),
-            sendEvent: this.sendAnalytics.bind(this),
-            sendEventNoSampling: this.sendAnalytics.bind(this),
-        };
-    }
-    sendAnalytics(ae) {
-        var _a;
-        console.log('Analytics Received ----', ae);
-        this.latestAction = ae;
-        (_a = this.analyticsManager) === null || _a === void 0 ? void 0 : _a.sendEvent(ae);
-    }
-    initSearchServiceFromUrlParams() {
-        var _a, _b, _c;
-        const params = new URL(window.location.href).searchParams;
-        return new SearchService({
-            includeCredentials: false,
-            baseUrl: (_a = params.get('search_base_url')) !== null && _a !== void 0 ? _a : undefined,
-            servicePath: (_b = params.get('search_service_path')) !== null && _b !== void 0 ? _b : undefined,
-            debuggingEnabled: (_c = !!params.get('debugging')) !== null && _c !== void 0 ? _c : undefined,
-        });
-    }
-    searchPressed(e) {
-        e.preventDefault();
-        this.searchQuery = this.baseQueryField.value;
-        this.collectionBrowser.searchType = this.searchType;
-        this.goToCurrentPage();
-    }
-    collectionChanged(e) {
-        e.preventDefault();
-        this.withinCollection = this.baseCollectionField.value;
-        this.collectionBrowser.withinCollection = this.withinCollection;
-        this.goToCurrentPage();
-    }
-    goToCurrentPage() {
-        var _a;
-        const page = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 1;
-        if (page > 1) {
-            this.collectionBrowser.goToPage(page);
-        }
-    }
-    changePagePressed(e) {
-        e.preventDefault();
-        this.currentPage = this.pageNumberInput.valueAsNumber;
-        this.collectionBrowser.goToPage(this.currentPage);
-    }
-    updated(changed) {
-        if (changed.has('currentPage') && this.currentPage) {
-            this.pageNumberInput.value = this.currentPage.toString();
-        }
-        if (changed.has('searchQuery')) {
-            this.queryUpdated();
-        }
-    }
-    queryUpdated() {
-        this.collectionBrowser.baseQuery = this.searchQuery;
-    }
-    get getClass() {
-        const searchParams = new URLSearchParams(window.location.search);
-        return searchParams.get('hide-dev-tools') ? 'hidden' : '';
-    }
-    render() {
-        var _a, _b;
+import { __decorate } from "tslib";
+/* eslint-disable no-console */
+import { AnalyticsManager, } from '@internetarchive/analytics-manager';
+import { SearchService, SearchType, StringField, } from '@internetarchive/search-service';
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import '../src/collection-browser';
+let AppRoot = class AppRoot extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.searchService = this.initSearchServiceFromUrlParams();
+        this.resizeObserver = new SharedResizeObserver();
+        this.toggleSlots = false;
+        this.cellWidth = 18;
+        this.cellHeight = 29;
+        this.rowGap = 1.7;
+        this.colGap = 1.7;
+        this.suppressFacets = false;
+        this.lazyLoadFacets = false;
+        this.loggedIn = false;
+        this.searchType = SearchType.METADATA;
+        this.analyticsManager = new AnalyticsManager();
+        this.analyticsHandler = {
+            sendPing: this.sendAnalytics.bind(this),
+            sendEvent: this.sendAnalytics.bind(this),
+            sendEventNoSampling: this.sendAnalytics.bind(this),
+        };
+    }
+    sendAnalytics(ae) {
+        var _a;
+        console.log('Analytics Received ----', ae);
+        this.latestAction = ae;
+        (_a = this.analyticsManager) === null || _a === void 0 ? void 0 : _a.sendEvent(ae);
+    }
+    initSearchServiceFromUrlParams() {
+        var _a, _b, _c;
+        const params = new URL(window.location.href).searchParams;
+        return new SearchService({
+            includeCredentials: false,
+            baseUrl: (_a = params.get('search_base_url')) !== null && _a !== void 0 ? _a : undefined,
+            servicePath: (_b = params.get('search_service_path')) !== null && _b !== void 0 ? _b : undefined,
+            debuggingEnabled: (_c = !!params.get('debugging')) !== null && _c !== void 0 ? _c : undefined,
+        });
+    }
+    searchPressed(e) {
+        e.preventDefault();
+        this.searchQuery = this.baseQueryField.value;
+        this.collectionBrowser.searchType = this.searchType;
+        this.goToCurrentPage();
+    }
+    collectionChanged(e) {
+        e.preventDefault();
+        this.withinCollection = this.baseCollectionField.value;
+        this.collectionBrowser.withinCollection = this.withinCollection;
+        this.goToCurrentPage();
+    }
+    goToCurrentPage() {
+        var _a;
+        const page = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 1;
+        if (page > 1) {
+            this.collectionBrowser.goToPage(page);
+        }
+    }
+    changePagePressed(e) {
+        e.preventDefault();
+        this.currentPage = this.pageNumberInput.valueAsNumber;
+        this.collectionBrowser.goToPage(this.currentPage);
+    }
+    updated(changed) {
+        if (changed.has('currentPage') && this.currentPage) {
+            this.pageNumberInput.value = this.currentPage.toString();
+        }
+        if (changed.has('searchQuery')) {
+            this.queryUpdated();
+        }
+    }
+    queryUpdated() {
+        this.collectionBrowser.baseQuery = this.searchQuery;
+    }
+    get getClass() {
+        const searchParams = new URLSearchParams(window.location.search);
+        return searchParams.get('hide-dev-tools') ? 'hidden' : '';
+    }
+    render() {
+        var _a, _b;
         return html `
       <div class="dev-tool-container">
         <div id="dev-tools" class=${this.getClass}>
@@ -141,21 +143,21 @@ let AppRoot = class AppRoot extends LitElement {
 
           <div id="toggle-controls">
             <button
-              @click=${() => {
-            var _a, _b;
-            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cell-size-control');
-            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
-            const rowGapControls = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('cell-gap-control');
-            rowGapControls === null || rowGapControls === void 0 ? void 0 : rowGapControls.classList.toggle('hidden');
+              @click=${() => {
+            var _a, _b;
+            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cell-size-control');
+            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
+            const rowGapControls = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('cell-gap-control');
+            rowGapControls === null || rowGapControls === void 0 ? void 0 : rowGapControls.classList.toggle('hidden');
         }}
             >
               Toggle Cell Controls
             </button>
             <button
-              @click=${() => {
-            var _a;
-            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('latest-event-details');
-            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
+              @click=${() => {
+            var _a;
+            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('latest-event-details');
+            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
         }}
             >
               Last Event Captured
@@ -253,6 +255,15 @@ let AppRoot = class AppRoot extends LitElement {
               />
               <label for="enable-facets">Enable facets</label>
             </div>
+            <div class="checkbox-control indent">
+              <input
+                type="checkbox"
+                id="lazy-load-facets"
+                ?disabled=${this.suppressFacets}
+                @click=${this.lazyLoadFacetsChanged}
+              />
+              <label for="lazy-load-facets">Lazy load facets</label>
+            </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -397,6 +408,8 @@ let AppRoot = class AppRoot extends LitElement {
           .searchService=${this.searchService}
           .resizeObserver=${this.resizeObserver}
           .showHistogramDatePicker=${true}
+          .suppressFacets=${this.suppressFacets}
+          .lazyLoadFacets=${this.lazyLoadFacets}
           .loggedIn=${this.loggedIn}
           .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
@@ -405,339 +418,343 @@ let AppRoot = class AppRoot extends LitElement {
           @searchTypeChanged=${this.searchTypeChanged}
           @manageModeChanged=${this.manageModeChanged}
         >
-          ${this.toggleSlots
-            ? html `<div slot="sortbar-left-slot">Sort Slot</div>`
+          ${this.toggleSlots
+            ? html `<div slot="sortbar-left-slot">Sort Slot</div>`
             : nothing}
-          ${this.toggleSlots
-            ? html `<div slot="facet-top-slot">Facet Slot</div>`
+          ${this.toggleSlots
+            ? html `<div slot="facet-top-slot">Facet Slot</div>`
             : nothing}
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-    async setPlaceholderType(type) {
-        switch (type) {
-            case 'loading-placeholder':
-                this.collectionBrowser.baseQuery = '';
-                this.collectionBrowser.suppressPlaceholders = true;
-                this.collectionBrowser.clearResultsOnEmptyQuery = true;
-                this.requestUpdate();
-                await this.collectionBrowser.updateComplete;
-                break;
-            default:
-                break;
-        }
-    }
-    baseQueryChanged(e) {
-        this.searchQuery = e.detail.baseQuery;
-    }
-    /** Handler for search type changes coming from collection browser */
-    searchTypeChanged(e) {
-        this.searchType = e.detail;
-    }
-    /** Handler for user input selecting a search type */
-    searchTypeSelected(e) {
-        const target = e.target;
-        this.searchType =
-            target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
-    }
-    loginChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.loggedIn = true;
-        }
-        else {
-            this.loggedIn = false;
-        }
-    }
-    outlineChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.collectionBrowser.style.setProperty('--infiniteScrollerCellOutline', '1px solid #33D1FF');
-        }
-        else {
-            this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
-        }
-    }
-    toggleDevTools() {
-        var _a, _b;
-        const pageUrl = new URL(window.location.href);
-        const { searchParams } = pageUrl;
-        if (searchParams.get('hide-dev-tools')) {
-            searchParams.delete('hide-dev-tools');
-        }
-        else {
-            searchParams.set('hide-dev-tools', 'true');
-        }
-        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('dev-tools')) === null || _b === void 0 ? void 0 : _b.classList.toggle('hidden');
-        if (window.history.replaceState) {
-            window.history.replaceState({
-                path: pageUrl.toString(),
-            }, '', pageUrl.toString());
-        }
-    }
-    toggleFacetGroupOutline(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.collectionBrowser.classList.add('showFacetGroupOutlines');
-            this.modalManager.classList.add('showFacetGroupOutlines');
-        }
-        else {
-            this.collectionBrowser.classList.remove('showFacetGroupOutlines');
-            this.modalManager.classList.remove('showFacetGroupOutlines');
-        }
-    }
-    async snippetsChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            // Decorate the default search service with a wrapper that adds
-            // dummy snippets to any successful searches
-            this.searchService = {
-                async search(params, searchType) {
-                    var _a;
-                    const searchResponse = await SearchService.default.search(params, searchType);
-                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach(result => {
-                        Object.defineProperty(result, 'highlight', {
-                            value: new StringField([
-                                'this is a text {{{snippet}}} block with potentially',
-                                'multiple {{{snippets}}} and such',
-                                'but the {{{snippet}}} block may be quite long perhaps',
-                                'depending on how many {{{snippet}}} matches there are',
-                                'there may be multiple lines of {{{snippets}}} to show',
-                                'but each {{{snippet}}} should be relatively short',
-                                'and {{{snippets}}} are each a {{{snippet}}} of text',
-                                'but every {{{snippet}}} might have multiple matches',
-                                'the {{{snippets}}} should be separated and surrounded by ellipses',
-                            ]),
-                        });
-                    });
-                    return searchResponse;
-                },
-            };
-        }
-        else {
-            // Restore the default seach service
-            this.searchService = SearchService.default;
-        }
-        // Re-perform the current search to show/hide the snippets immediately
-        this.reperformCurrentSearch();
-    }
-    async reviewsChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            // Decorate the default search service with a wrapper that adds
-            // dummy reviews to any successful searches
-            this.searchService = {
-                async search(params, searchType) {
-                    var _a;
-                    const searchResponse = await SearchService.default.search(params, searchType);
-                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach((result, i) => {
-                        Object.defineProperty(result, 'review', {
-                            value: {
-                                title: 'My Great Review',
-                                body: "This item is really great and that's why I'm leaving this review on it and giving it so many star...",
-                                stars: (i + 3) % 6,
-                            },
-                        });
-                    });
-                    return searchResponse;
-                },
-            };
-        }
-        else {
-            // Restore the default seach service
-            this.searchService = SearchService.default;
-        }
-        // Re-perform the current search to show/hide the reviews immediately
-        this.reperformCurrentSearch();
-    }
-    async reperformCurrentSearch() {
-        const oldQuery = this.searchQuery;
-        this.searchQuery = '-'; // Should just reset to the placeholder
-        await this.updateComplete;
-        // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:
-        await new Promise(res => {
-            setTimeout(res, 0);
-        });
-        this.searchQuery = oldQuery; // Re-apply the original query
-    }
-    datePickerChanged(e) {
-        const target = e.target;
-        this.collectionBrowser.showHistogramDatePicker = target.checked;
-        // When disabling the date picker from the demo app, also clear any existing date range params
-        if (!this.collectionBrowser.showHistogramDatePicker) {
-            this.collectionBrowser.minSelectedDate = undefined;
-            this.collectionBrowser.maxSelectedDate = undefined;
-        }
-    }
-    facetsChanged(e) {
-        const target = e.target;
-        this.collectionBrowser.suppressFacets = !target.checked;
-    }
-    /**
-     * Handler for when collection browser's manage mode changes.
-     * This lets us disable the checkbox in the dev panel when the user cancels out
-     * of manage mode from within collection browser.
-     */
-    manageModeChanged(e) {
-        var _a;
-        const manageCheckbox = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#enable-management');
-        if (manageCheckbox)
-            manageCheckbox.checked = e.detail;
-    }
-    /**
-     * Handler for when the dev panel's "Enable manage mode" checkbox is changed.
-     */
-    manageModeCheckboxChanged(e) {
-        const target = e.target;
-        this.collectionBrowser.isManageView = target.checked;
-        this.collectionBrowser.manageViewLabel =
-            'Select items to remove (customizable texts)';
-    }
-    /**
-     * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
-     */
-    facetTopSlotCheckboxChanged(e) {
-        const target = e.target;
-        const p = document.createElement('p');
-        p.style.setProperty('border', '1px solid #000');
-        p.textContent = 'New stuff as a child.';
-        p.style.setProperty('height', '20rem');
-        p.style.backgroundColor = '#00000';
-        p.setAttribute('slot', 'facet-top-slot');
-        if (target.checked) {
-            this.collectionBrowser.appendChild(p);
-        }
-        else {
-            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
-        }
-    }
-    toggleSlotOptions() {
-        this.toggleSlots = !this.toggleSlots;
-    }
-    resultLastTileSlotCheckboxChanged(e) {
-        const target = e.target;
-        const div = document.createElement('div');
-        const title = document.createElement('h3');
-        title.textContent = 'Upload';
-        div.setAttribute('slot', 'result-last-tile');
-        div.setAttribute('class', 'result-last-tile');
-        div.appendChild(title);
-        if (target.checked) {
-            this.collectionBrowser.appendChild(div);
-        }
-        else {
-            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
-        }
-    }
-    /**
-     * Handler for when the dev panel's "Show cb top slot" checkbox is changed.
-     */
-    cbTopSlotCheckboxChanged(e) {
-        const target = e.target;
-        const p = document.createElement('p');
-        p.style.setProperty('border', '1px solid #000');
-        p.textContent = 'My Favorite list header.';
-        p.style.setProperty('height', '10rem');
-        p.style.backgroundColor = '#00000';
-        p.setAttribute('slot', 'cb-top-slot');
-        if (target.checked) {
-            this.collectionBrowser.appendChild(p);
-        }
-        else {
-            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
-        }
-    }
-    /**
-     * Handler for when the dev panel's "Show sort bar top left slot" checkbox is changed.
-     */
-    sortBarLeftSlotCheckboxChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            const div = document.createElement('div');
-            div.style.setProperty('border', '1px solid #000');
-            div.textContent = 'Btn';
-            div.style.setProperty('height', '3rem');
-            div.style.setProperty('width', '3rem');
-            div.setAttribute('slot', 'sort-options-left');
-            this.collectionBrowser.appendChild(div);
-        }
-        else {
-            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options-left"]');
-            if (slottedEl)
-                this.collectionBrowser.removeChild(slottedEl);
-        }
-    }
-    /**
-     * Handler for when the dev panel's "Show sort bar top right slot" checkbox is changed.
-     */
-    sortBarRightSlotCheckboxChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            const div = document.createElement('div');
-            div.style.setProperty('border', '1px solid #000');
-            div.textContent = 'Search bar';
-            div.style.setProperty('height', '3rem');
-            div.style.setProperty('width', '15rem');
-            div.setAttribute('slot', 'sort-options-right');
-            this.collectionBrowser.appendChild(div);
-        }
-        else {
-            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options-right"]');
-            if (slottedEl)
-                this.collectionBrowser.removeChild(slottedEl);
-        }
-    }
-    rowGapChanged(e) {
-        const input = e.target;
-        this.rowGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserRowGap', `${input.value}rem`);
-    }
-    colGapChanged(e) {
-        const input = e.target;
-        this.colGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserColGap', `${input.value}rem`);
-    }
-    widthChanged(e) {
-        const input = e.target;
-        this.cellWidth = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinWidth', `${input.value}rem`);
-    }
-    heightChanged(e) {
-        const input = e.target;
-        this.cellHeight = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinHeight', `${input.value}rem`);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMaxHeight', `${input.value}rem`);
-    }
-    visiblePageChanged(e) {
-        const { pageNumber } = e.detail;
-        if (pageNumber === this.currentPage)
-            return;
-        this.currentPage = pageNumber;
-    }
-    /**
-     * Handler for when the dev panel's "Replace sort options" checkbox is changed.
-     */
-    replaceSortOptionsChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            const p = document.createElement('p');
-            p.style.setProperty('border', '1px solid #000');
-            p.textContent = 'New stuff as a child.';
-            p.style.setProperty('height', '20px');
-            p.setAttribute('slot', 'sort-options');
-            this.collectionBrowser.appendChild(p);
-            this.collectionBrowser.enableSortOptionsSlot = true;
-        }
-        else {
-            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options"]');
-            if (slottedEl)
-                this.collectionBrowser.removeChild(slottedEl);
-            this.collectionBrowser.enableSortOptionsSlot = false;
-        }
-    }
-};
+    `;
+    }
+    async setPlaceholderType(type) {
+        switch (type) {
+            case 'loading-placeholder':
+                this.collectionBrowser.baseQuery = '';
+                this.collectionBrowser.suppressPlaceholders = true;
+                this.collectionBrowser.clearResultsOnEmptyQuery = true;
+                this.requestUpdate();
+                await this.collectionBrowser.updateComplete;
+                break;
+            default:
+                break;
+        }
+    }
+    baseQueryChanged(e) {
+        this.searchQuery = e.detail.baseQuery;
+    }
+    /** Handler for search type changes coming from collection browser */
+    searchTypeChanged(e) {
+        this.searchType = e.detail;
+    }
+    /** Handler for user input selecting a search type */
+    searchTypeSelected(e) {
+        const target = e.target;
+        this.searchType =
+            target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
+    }
+    loginChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.loggedIn = true;
+        }
+        else {
+            this.loggedIn = false;
+        }
+    }
+    outlineChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.collectionBrowser.style.setProperty('--infiniteScrollerCellOutline', '1px solid #33D1FF');
+        }
+        else {
+            this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
+        }
+    }
+    toggleDevTools() {
+        var _a, _b;
+        const pageUrl = new URL(window.location.href);
+        const { searchParams } = pageUrl;
+        if (searchParams.get('hide-dev-tools')) {
+            searchParams.delete('hide-dev-tools');
+        }
+        else {
+            searchParams.set('hide-dev-tools', 'true');
+        }
+        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('dev-tools')) === null || _b === void 0 ? void 0 : _b.classList.toggle('hidden');
+        if (window.history.replaceState) {
+            window.history.replaceState({
+                path: pageUrl.toString(),
+            }, '', pageUrl.toString());
+        }
+    }
+    toggleFacetGroupOutline(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.collectionBrowser.classList.add('showFacetGroupOutlines');
+            this.modalManager.classList.add('showFacetGroupOutlines');
+        }
+        else {
+            this.collectionBrowser.classList.remove('showFacetGroupOutlines');
+            this.modalManager.classList.remove('showFacetGroupOutlines');
+        }
+    }
+    async snippetsChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            // Decorate the default search service with a wrapper that adds
+            // dummy snippets to any successful searches
+            this.searchService = {
+                async search(params, searchType) {
+                    var _a;
+                    const searchResponse = await SearchService.default.search(params, searchType);
+                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach(result => {
+                        Object.defineProperty(result, 'highlight', {
+                            value: new StringField([
+                                'this is a text {{{snippet}}} block with potentially',
+                                'multiple {{{snippets}}} and such',
+                                'but the {{{snippet}}} block may be quite long perhaps',
+                                'depending on how many {{{snippet}}} matches there are',
+                                'there may be multiple lines of {{{snippets}}} to show',
+                                'but each {{{snippet}}} should be relatively short',
+                                'and {{{snippets}}} are each a {{{snippet}}} of text',
+                                'but every {{{snippet}}} might have multiple matches',
+                                'the {{{snippets}}} should be separated and surrounded by ellipses',
+                            ]),
+                        });
+                    });
+                    return searchResponse;
+                },
+            };
+        }
+        else {
+            // Restore the default seach service
+            this.searchService = SearchService.default;
+        }
+        // Re-perform the current search to show/hide the snippets immediately
+        this.reperformCurrentSearch();
+    }
+    async reviewsChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            // Decorate the default search service with a wrapper that adds
+            // dummy reviews to any successful searches
+            this.searchService = {
+                async search(params, searchType) {
+                    var _a;
+                    const searchResponse = await SearchService.default.search(params, searchType);
+                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach((result, i) => {
+                        Object.defineProperty(result, 'review', {
+                            value: {
+                                title: 'My Great Review',
+                                body: "This item is really great and that's why I'm leaving this review on it and giving it so many star...",
+                                stars: (i + 3) % 6,
+                            },
+                        });
+                    });
+                    return searchResponse;
+                },
+            };
+        }
+        else {
+            // Restore the default seach service
+            this.searchService = SearchService.default;
+        }
+        // Re-perform the current search to show/hide the reviews immediately
+        this.reperformCurrentSearch();
+    }
+    async reperformCurrentSearch() {
+        const oldQuery = this.searchQuery;
+        this.searchQuery = '-'; // Should just reset to the placeholder
+        await this.updateComplete;
+        // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:
+        await new Promise(res => {
+            setTimeout(res, 0);
+        });
+        this.searchQuery = oldQuery; // Re-apply the original query
+    }
+    datePickerChanged(e) {
+        const target = e.target;
+        this.collectionBrowser.showHistogramDatePicker = target.checked;
+        // When disabling the date picker from the demo app, also clear any existing date range params
+        if (!this.collectionBrowser.showHistogramDatePicker) {
+            this.collectionBrowser.minSelectedDate = undefined;
+            this.collectionBrowser.maxSelectedDate = undefined;
+        }
+    }
+    facetsChanged(e) {
+        const target = e.target;
+        this.suppressFacets = !target.checked;
+    }
+    lazyLoadFacetsChanged(e) {
+        const target = e.target;
+        this.lazyLoadFacets = target.checked;
+    }
+    /**
+     * Handler for when collection browser's manage mode changes.
+     * This lets us disable the checkbox in the dev panel when the user cancels out
+     * of manage mode from within collection browser.
+     */
+    manageModeChanged(e) {
+        var _a;
+        const manageCheckbox = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#enable-management');
+        if (manageCheckbox)
+            manageCheckbox.checked = e.detail;
+    }
+    /**
+     * Handler for when the dev panel's "Enable manage mode" checkbox is changed.
+     */
+    manageModeCheckboxChanged(e) {
+        const target = e.target;
+        this.collectionBrowser.isManageView = target.checked;
+        this.collectionBrowser.manageViewLabel =
+            'Select items to remove (customizable texts)';
+    }
+    /**
+     * Handler for when the dev panel's "Show facet top slot" checkbox is changed.
+     */
+    facetTopSlotCheckboxChanged(e) {
+        const target = e.target;
+        const p = document.createElement('p');
+        p.style.setProperty('border', '1px solid #000');
+        p.textContent = 'New stuff as a child.';
+        p.style.setProperty('height', '20rem');
+        p.style.backgroundColor = '#00000';
+        p.setAttribute('slot', 'facet-top-slot');
+        if (target.checked) {
+            this.collectionBrowser.appendChild(p);
+        }
+        else {
+            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
+        }
+    }
+    toggleSlotOptions() {
+        this.toggleSlots = !this.toggleSlots;
+    }
+    resultLastTileSlotCheckboxChanged(e) {
+        const target = e.target;
+        const div = document.createElement('div');
+        const title = document.createElement('h3');
+        title.textContent = 'Upload';
+        div.setAttribute('slot', 'result-last-tile');
+        div.setAttribute('class', 'result-last-tile');
+        div.appendChild(title);
+        if (target.checked) {
+            this.collectionBrowser.appendChild(div);
+        }
+        else {
+            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
+        }
+    }
+    /**
+     * Handler for when the dev panel's "Show cb top slot" checkbox is changed.
+     */
+    cbTopSlotCheckboxChanged(e) {
+        const target = e.target;
+        const p = document.createElement('p');
+        p.style.setProperty('border', '1px solid #000');
+        p.textContent = 'My Favorite list header.';
+        p.style.setProperty('height', '10rem');
+        p.style.backgroundColor = '#00000';
+        p.setAttribute('slot', 'cb-top-slot');
+        if (target.checked) {
+            this.collectionBrowser.appendChild(p);
+        }
+        else {
+            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
+        }
+    }
+    /**
+     * Handler for when the dev panel's "Show sort bar top left slot" checkbox is changed.
+     */
+    sortBarLeftSlotCheckboxChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            const div = document.createElement('div');
+            div.style.setProperty('border', '1px solid #000');
+            div.textContent = 'Btn';
+            div.style.setProperty('height', '3rem');
+            div.style.setProperty('width', '3rem');
+            div.setAttribute('slot', 'sort-options-left');
+            this.collectionBrowser.appendChild(div);
+        }
+        else {
+            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options-left"]');
+            if (slottedEl)
+                this.collectionBrowser.removeChild(slottedEl);
+        }
+    }
+    /**
+     * Handler for when the dev panel's "Show sort bar top right slot" checkbox is changed.
+     */
+    sortBarRightSlotCheckboxChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            const div = document.createElement('div');
+            div.style.setProperty('border', '1px solid #000');
+            div.textContent = 'Search bar';
+            div.style.setProperty('height', '3rem');
+            div.style.setProperty('width', '15rem');
+            div.setAttribute('slot', 'sort-options-right');
+            this.collectionBrowser.appendChild(div);
+        }
+        else {
+            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options-right"]');
+            if (slottedEl)
+                this.collectionBrowser.removeChild(slottedEl);
+        }
+    }
+    rowGapChanged(e) {
+        const input = e.target;
+        this.rowGap = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserRowGap', `${input.value}rem`);
+    }
+    colGapChanged(e) {
+        const input = e.target;
+        this.colGap = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserColGap', `${input.value}rem`);
+    }
+    widthChanged(e) {
+        const input = e.target;
+        this.cellWidth = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinWidth', `${input.value}rem`);
+    }
+    heightChanged(e) {
+        const input = e.target;
+        this.cellHeight = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinHeight', `${input.value}rem`);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMaxHeight', `${input.value}rem`);
+    }
+    visiblePageChanged(e) {
+        const { pageNumber } = e.detail;
+        if (pageNumber === this.currentPage)
+            return;
+        this.currentPage = pageNumber;
+    }
+    /**
+     * Handler for when the dev panel's "Replace sort options" checkbox is changed.
+     */
+    replaceSortOptionsChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            const p = document.createElement('p');
+            p.style.setProperty('border', '1px solid #000');
+            p.textContent = 'New stuff as a child.';
+            p.style.setProperty('height', '20px');
+            p.setAttribute('slot', 'sort-options');
+            this.collectionBrowser.appendChild(p);
+            this.collectionBrowser.enableSortOptionsSlot = true;
+        }
+        else {
+            const slottedEl = this.collectionBrowser.querySelector('[slot="sort-options"]');
+            if (slottedEl)
+                this.collectionBrowser.removeChild(slottedEl);
+            this.collectionBrowser.enableSortOptionsSlot = false;
+        }
+    }
+};
 AppRoot.styles = css `
     :host {
       display: block;
@@ -894,6 +911,9 @@ AppRoot.styles = css `
     .checkbox-control {
       flex-basis: 50%;
     }
+    .checkbox-control.indent {
+      margin-left: 10px;
+    }
     .checkbox-control label {
       user-select: none;
     }
@@ -969,57 +989,63 @@ AppRoot.styles = css `
       font-weight: 200;
       text-align: center;
     }
-  `;
-__decorate([
-    state()
-], AppRoot.prototype, "toggleSlots", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "currentPage", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "searchQuery", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "withinCollection", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellWidth", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellHeight", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "rowGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "colGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "loggedIn", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "searchType", void 0);
-__decorate([
-    property({ type: Object, reflect: false })
-], AppRoot.prototype, "latestAction", void 0);
-__decorate([
-    query('#base-query-field')
-], AppRoot.prototype, "baseQueryField", void 0);
-__decorate([
-    query('#base-collection-field')
-], AppRoot.prototype, "baseCollectionField", void 0);
-__decorate([
-    query('#page-number-input')
-], AppRoot.prototype, "pageNumberInput", void 0);
-__decorate([
-    query('collection-browser')
-], AppRoot.prototype, "collectionBrowser", void 0);
-__decorate([
-    query('modal-manager')
-], AppRoot.prototype, "modalManager", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
+  `;
+__decorate([
+    state()
+], AppRoot.prototype, "toggleSlots", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "searchQuery", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "withinCollection", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "cellWidth", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "cellHeight", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "rowGap", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "colGap", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "suppressFacets", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "lazyLoadFacets", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "loggedIn", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "searchType", void 0);
+__decorate([
+    property({ type: Object, reflect: false })
+], AppRoot.prototype, "latestAction", void 0);
+__decorate([
+    query('#base-query-field')
+], AppRoot.prototype, "baseQueryField", void 0);
+__decorate([
+    query('#base-collection-field')
+], AppRoot.prototype, "baseCollectionField", void 0);
+__decorate([
+    query('#page-number-input')
+], AppRoot.prototype, "pageNumberInput", void 0);
+__decorate([
+    query('collection-browser')
+], AppRoot.prototype, "collectionBrowser", void 0);
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalManager", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
 //# sourceMappingURL=app-root.js.map