@internetarchive/collection-browser 1.14.10-alpha.3 → 1.14.10-alpha1

package/dist/src/app-root.js

@@ -1,93 +1,94 @@
-import { __decorate } from "tslib";
-/* eslint-disable no-console */
-import { AnalyticsManager, } from '@internetarchive/analytics-manager';
-import { SearchService, SearchType, StringField, } from '@internetarchive/search-service';
-import { LocalCache } from '@internetarchive/local-cache';
-import { html, css, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import { CollectionNameCache } from '@internetarchive/collection-name-cache';
-import '../src/collection-browser';
-let AppRoot = class AppRoot extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.searchService = this.initSearchServiceFromUrlParams();
-        this.resizeObserver = new SharedResizeObserver();
-        this.localCache = new LocalCache();
-        this.collectionNameCache = new CollectionNameCache({
-            searchService: this.searchService,
-            localCache: this.localCache,
-        });
-        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 { LocalCache } from '@internetarchive/local-cache';
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { CollectionNameCache } from '@internetarchive/collection-name-cache';
+import '../src/collection-browser';
+let AppRoot = class AppRoot extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.searchService = this.initSearchServiceFromUrlParams();
+        this.resizeObserver = new SharedResizeObserver();
+        this.localCache = new LocalCache();
+        this.collectionNameCache = new CollectionNameCache({
+            searchService: this.searchService,
+            localCache: this.localCache,
+        });
+        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;
         return html `
       <div class="dev-tool-container">
         <div id="dev-tools" class=${this.getClass}>
@@ -147,21 +148,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
@@ -175,91 +176,93 @@ let AppRoot = class AppRoot extends LitElement {
             >
           </div>
 
-          <div id="cell-controls" class="hidden">
-            <div id="cell-size-control">
-              <div>
-                <label for="cell-width-slider">Min cell width:</label>
-                <input
-                  type="range"
-                  min="10"
-                  max="100"
-                  value="18"
-                  step="0.1"
-                  id="cell-width-slider"
-                  @input=${this.widthChanged}
-                />
-                <span>${this.cellWidth}rem</span>
-              </div>
-              <div>
-                <label for="cell-height-slider">Cell height:</label>
-                <input
-                  type="range"
-                  min="10"
-                  max="100"
-                  value="29"
-                  step="0.1"
-                  id="cell-height-slider"
-                  @input=${this.heightChanged}
-                />
-                <span>${this.cellHeight}rem</span>
-              </div>
+          <fieldset class="cell-controls">
+            <legend>Cell Controls</legend>
+            <div>
+              <label for="cell-width-slider">Cell width:</label>
+              <input
+                type="range"
+                min="10"
+                max="100"
+                value="18"
+                step="0.1"
+                id="cell-width-slider"
+                @input=${this.widthChanged}
+              />
+              <span>${this.cellWidth}rem</span>
+            </div>
+            <div>
+              <label for="cell-height-slider">Cell height:</label>
+              <input
+                type="range"
+                min="10"
+                max="100"
+                value="29"
+                step="0.1"
+                id="cell-height-slider"
+                @input=${this.heightChanged}
+              />
+              <span>${this.cellHeight}rem</span>
             </div>
-            <div id="cell-gap-control">
-              <div>
-                <label for="cell-row-gap-slider">Row gap:</label>
-                <input
-                  type="range"
-                  min="0"
-                  max="5"
-                  value="1.7"
-                  step="0.1"
-                  id="cell-row-gap-slider"
-                  @input=${this.rowGapChanged}
-                />
-                <span>${this.rowGap}rem</span>
-              </div>
-              <div>
-                <label for="cell-col-gap-slider">Col gap:</label>
-                <input
-                  type="range"
-                  min="0"
-                  max="5"
-                  value="1.7"
-                  step="0.1"
-                  id="cell-col-gap-slider"
-                  @input=${this.colGapChanged}
-                />
-                <span>${this.colGap}rem</span>
-              </div>
+            <div>
+              <label for="cell-row-gap-slider">Row gap:</label>
+              <input
+                type="range"
+                min="0"
+                max="5"
+                value="1.7"
+                step="0.1"
+                id="cell-row-gap-slider"
+                @input=${this.rowGapChanged}
+              />
+              <span>${this.rowGap}rem</span>
             </div>
-          </div>
-          <div id="checkbox-controls">
+            <div>
+              <label for="cell-col-gap-slider">Col gap:</label>
+              <input
+                type="range"
+                min="0"
+                max="5"
+                value="1.7"
+                step="0.1"
+                id="cell-col-gap-slider"
+                @input=${this.colGapChanged}
+              />
+              <span>${this.colGap}rem</span>
+            </div>
+          </fieldset>
+
+          <fieldset class="other-controls">
+            <legend>Other Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <label for="show-outline-check">Show cell outlines</label>
+              <label for="simulate-login">Simulate login</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="show-facet-group-outline-check"
-                @click=${this.toggleFacetGroupOutline}
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
               />
-              <label for="show-facet-group-outline-check">
-                Show facet group outlines
-              </label>
+              <label for="enable-date-picker">Enable date picker</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
+                id="enable-management"
+                @click=${this.manageModeCheckboxChanged}
               />
-              <label for="simulate-login">Simulate login</label>
+              <label for="enable-management">Enable manage mode</label>
             </div>
+          </fieldset>
+
+          <fieldset class="cb-visual-appearance">
+            <legend>CB Visual Appearance</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
@@ -271,37 +274,62 @@ let AppRoot = class AppRoot extends LitElement {
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-date-picker"
-                checked
-                @click=${this.datePickerChanged}
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <label for="enable-date-picker">Enable date picker</label>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-management"
-                @click=${this.manageModeCheckboxChanged}
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <label for="enable-management">Enable manage mode</label>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
+          </fieldset>
+
+          <fieldset class="user-profile-controls">
+            <legend>User Profile Controls</legend>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-facet-top-view"
-                @click=${this.facetTopViewCheckboxChanged}
+                id="enable-facet-top-slot"
+                @click=${this.facetTopSlotCheckboxChanged}
               />
-              <label for="enable-facet-top-view">Show facet top view</label>
+              <label for="enable-facet-top-slot">Show facet top slot</label>
             </div>
             <div class="checkbox-control">
               <input
                 type="checkbox"
-                id="enable-cb-top-view"
-                @click=${this.cbToViewCheckboxChanged}
+                id="enable-cb-top-slot"
+                @click=${this.cbTopSlotCheckboxChanged}
               />
-              <label for="enable-cb-top-view">Show CB top view</label>
+              <label for="enable-cb-top-slot">Show CB top slot</label>
             </div>
-          </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-sortbar-left-slot"
+                @click=${this.sortBarSlotCheckboxChanged}
+              />
+              <label for="enable-sortbar-left-slot"
+                >Show sortbar left slot</label
+              >
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-result-last-tile-slot"
+                @click=${this.resultLastTileSlotCheckboxChanged}
+              />
+              <label for="enable-result-last-tile-slot"
+                >Show result last tile slot</label
+              >
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -323,206 +351,249 @@ let AppRoot = class AppRoot extends LitElement {
           @searchTypeChanged=${this.searchTypeChanged}
           @manageModeChanged=${this.manageModeChanged}
         >
+          ${this.toggleSlots
+            ? html `<div slot="sortbar-left-slot">Sort Slot</div>`
+            : nothing}
+          ${this.toggleSlots
+            ? html `<div slot="facet-top-slot">Facet Slot</div>`
+            : nothing}
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-    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 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;
-        }
-    }
-    /**
-     * 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;
-    }
-    /**
-     * Handler for when the dev panel's "Show facet top view" checkbox is changed.
-     */
-    facetTopViewCheckboxChanged(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);
-        }
-    }
-    /**
-     * Handler for when the dev panel's "Show cb top view" checkbox is changed.
-     */
-    cbToViewCheckboxChanged(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);
-        }
-    }
-    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;
-    }
-};
+    `;
+    }
+    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 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;
+        }
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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 facet top slot" checkbox is changed.
+     */
+    sortBarSlotCheckboxChanged(e) {
+        const target = e.target;
+        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.style.backgroundColor = '#00000';
+        div.setAttribute('slot', 'sortbar-left-slot');
+        if (target.checked) {
+            this.collectionBrowser.appendChild(div);
+        }
+        else {
+            this.collectionBrowser.removeChild(this.collectionBrowser.lastElementChild);
+        }
+    }
+    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;
+    }
+};
 AppRoot.styles = css `
     :host {
       display: block;
@@ -603,7 +674,6 @@ AppRoot.styles = css `
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
-      width: 75%;
       background: #ffffffb3;
     }
 
@@ -646,11 +716,17 @@ AppRoot.styles = css `
       margin-right: 1rem;
     }
 
-    #cell-controls {
+    .cell-controls {
       display: flex;
       flex-wrap: wrap;
     }
-
+    .cell-controls div {
+      display: flex;
+      align-items: center;
+    }
+    .cell-controls input[type='range'] {
+      width: 120px;
+    }
     #cell-controls label {
       display: inline-block;
       width: 10rem;
@@ -674,6 +750,9 @@ AppRoot.styles = css `
     .checkbox-control {
       flex-basis: 50%;
     }
+    .checkbox-control label {
+      user-select: none;
+    }
 
     #last-event {
       background-color: aliceblue;
@@ -696,54 +775,107 @@ AppRoot.styles = css `
       background-color: aliceblue;
       font-size: 1.6rem;
     }
-  `;
-__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 };
+
+    // slots
+    div[slot='cb-top-slot'] {
+      height: 50px;
+      border: 1px solid red;
+      background: bisque;
+    }
+    div[slot='facet-top-slot'] {
+      border: 1px solid red;
+      width: 100%;
+      height: 150px;
+      background-color: darkseagreen;
+    }
+    div[slot='sort-slot-left'] {
+      height: 50px;
+      border: 1px solid red;
+      background: bisque;
+    }
+
+    /* user profile controls */
+    .user-profile-controls {
+      width: fit-content;
+    }
+
+    fieldset {
+      display: inline-block !important;
+    }
+
+    .result-last-tile {
+      border-radius: 4px;
+      background-color: white;
+      border: 3px dashed #555;
+      box-shadow: none;
+      display: grid;
+      align-content: center;
+    }
+    .result-last-tile:hover {
+      box-shadow: rgba(8, 8, 32, 0.8) 0 0 6px 2px;
+      transition: box-shadow 0.1s ease 0s;
+      cursor: pointer;
+      border: 3px dashed #4b64ff;
+    }
+    .result-last-tile h3 {
+      margin-bottom: 4rem;
+      margin: 0px auto;
+      font-size: 2.8rem;
+      color: rgb(44, 44, 44);
+      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 };
 //# sourceMappingURL=app-root.js.map