@internetarchive/collection-browser 0.2.20 → 0.2.22-rc1

package/dist/src/app-root.d.ts

@@ -17,6 +17,7 @@ export declare class AppRoot extends LitElement {
     private baseQueryField;
     private pageNumberInput;
     private collectionBrowser;
+    private modalManager;
     private analyticsManager;
     private analyticsHandler;
     private sendAnalytics;

package/dist/src/app-root.js

@@ -88,7 +88,7 @@ let AppRoot = class AppRoot extends LitElement {
           >
             Last Event Captured
           </button>
-          <pre id="latest-event-details">
+          <pre id="latest-event-details" class="hidden">
             ${JSON.stringify(this.latestAction, null, 2)}
           </pre
           >
@@ -187,12 +187,14 @@ let AppRoot = class AppRoot extends LitElement {
           .collectionNameCache=${this.collectionNameCache}
           .showHistogramDatePicker=${true}
           .loggedIn=${this.loggedIn}
+          .modalManager=${this.modalManager}
           .analyticsHandler=${this.analyticsHandler}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
         >
         </collection-browser>
       </div>
+      <modal-manager></modal-manager>
     `;
     }
     baseQueryChanged(e) {
@@ -255,7 +257,9 @@ let AppRoot = class AppRoot extends LitElement {
         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));
+        await new Promise(res => {
+            setTimeout(res, 0);
+        });
         this.searchQuery = oldQuery; // Re-apply the original query
     }
     rowGapChanged(e) {
@@ -289,16 +293,39 @@ let AppRoot = class AppRoot extends LitElement {
 AppRoot.styles = css `
     :host {
       display: block;
+      --primaryButtonBGColor: #194880;
       --ia-theme-link-color: #4b64ff;
     }
 
+    /* add the following styles to ensure proper modal visibility */
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+    modal-manager {
+      display: none;
+    }
+    modal-manager[mode='open'] {
+      display: block;
+    }
+    modal-manager.more-search-facets {
+      --modalWidth: 85rem;
+      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
+      --modalTitleLineHeight: 4rem;
+      --modalTitleFontSize: 1.8rem;
+      --modalCornerRadius: 0;
+      --modalBottomPadding: 0;
+      --modalBottomMargin: 0;
+      --modalScrollOffset: 0;
+      --modalCornerRadius: 0.5rem;
+    }
+
     input,
     button {
       font-size: 1.6rem;
     }
 
     collection-browser {
-      margin-top: 30rem;
+      margin-top: 20rem;
     }
 
     #base-query-field {
@@ -309,7 +336,7 @@ AppRoot.styles = css `
       position: fixed;
       top: 0;
       left: 0;
-      z-index: 10;
+      z-index: 1;
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;
@@ -372,6 +399,9 @@ __decorate([
 __decorate([
     query('collection-browser')
 ], AppRoot.prototype, "collectionBrowser", void 0);
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalManager", void 0);
 AppRoot = __decorate([
     customElement('app-root')
 ], AppRoot);

package/dist/src/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\n\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEventNoSampling(ae);\n  }\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"last-event\">\n          <button\n            @click=${() => {\n              const details = this.shadowRoot?.getElementById(\n                'latest-event-details'\n              );\n              details?.classList.toggle('hidden');\n            }}\n          >\n            Last Event Captured\n          </button>\n          <pre id=\"latest-event-details\">\n            ${JSON.stringify(this.latestAction, null, 2)}\n          </pre\n          >\n        </div>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n            <div>\n              <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private async snippetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      // Decorate the default search service with a wrapper that adds\n      // dummy snippets to any successful searches\n      this.searchService = {\n        ...SearchService.default,\n        async search(params) {\n          const result = await SearchService.default.search(params);\n          result.success?.response.docs.forEach(doc => {\n            const metadata = doc.rawMetadata;\n            if (metadata) {\n              metadata.snippets = [\n                'this is a text {{{snippet}}} block with potentially',\n                'multiple {{{snippets}}} and such',\n                'but the {{{snippet}}} block may be quite long perhaps',\n                'depending on how many {{{snippet}}} matches there are',\n                'there may be multiple lines of {{{snippets}}} to show',\n                'but each {{{snippet}}} should be relatively short',\n                'and {{{snippets}}} are each a {{{snippet}}} of text',\n                'but every {{{snippet}}} might have multiple matches',\n                'the {{{snippets}}} should be separated and surrounded by ellipses',\n              ];\n            }\n          });\n          return result;\n        },\n      };\n    } else {\n      // Restore the default seach service\n      this.searchService = SearchService.default;\n    }\n\n    // Re-perform the current search to show/hide the snippets immediately\n    const oldQuery = this.searchQuery;\n    this.searchQuery = ''; // Should just reset to the placeholder\n    await this.updateComplete;\n    // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n    await new Promise(res => setTimeout(res, 0));\n    this.searchQuery = oldQuery; // Re-apply the original query\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\n\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  @query('modal-manager') private modalManager!: ModalManagerInterface;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEventNoSampling(ae);\n  }\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"last-event\">\n          <button\n            @click=${() => {\n              const details = this.shadowRoot?.getElementById(\n                'latest-event-details'\n              );\n              details?.classList.toggle('hidden');\n            }}\n          >\n            Last Event Captured\n          </button>\n          <pre id=\"latest-event-details\" class=\"hidden\">\n            ${JSON.stringify(this.latestAction, null, 2)}\n          </pre\n          >\n        </div>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n            <div>\n              <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .modalManager=${this.modalManager}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private async snippetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      // Decorate the default search service with a wrapper that adds\n      // dummy snippets to any successful searches\n      this.searchService = {\n        ...SearchService.default,\n        async search(params) {\n          const result = await SearchService.default.search(params);\n          result.success?.response.docs.forEach(doc => {\n            const metadata = doc.rawMetadata;\n            if (metadata) {\n              metadata.snippets = [\n                'this is a text {{{snippet}}} block with potentially',\n                'multiple {{{snippets}}} and such',\n                'but the {{{snippet}}} block may be quite long perhaps',\n                'depending on how many {{{snippet}}} matches there are',\n                'there may be multiple lines of {{{snippets}}} to show',\n                'but each {{{snippet}}} should be relatively short',\n                'and {{{snippets}}} are each a {{{snippet}}} of text',\n                'but every {{{snippet}}} might have multiple matches',\n                'the {{{snippets}}} should be separated and surrounded by ellipses',\n              ];\n            }\n          });\n          return result;\n        },\n      };\n    } else {\n      // Restore the default seach service\n      this.searchService = SearchService.default;\n    }\n\n    // Re-perform the current search to show/hide the snippets immediately\n    const oldQuery = this.searchQuery;\n    this.searchQuery = ''; // Should just reset to the placeholder\n    await this.updateComplete;\n    // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n    await new Promise(res => {\n      setTimeout(res, 0);\n    });\n    this.searchQuery = oldQuery; // Re-apply the original query\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      --primaryButtonBGColor: #194880;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    /* add the following styles to ensure proper modal visibility */\n    body.modal-manager-open {\n      overflow: hidden;\n    }\n    modal-manager {\n      display: none;\n    }\n    modal-manager[mode='open'] {\n      display: block;\n    }\n    modal-manager.more-search-facets {\n      --modalWidth: 85rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalCornerRadius: 0;\n      --modalBottomPadding: 0;\n      --modalBottomMargin: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 20rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n  `;\n}\n"]}

package/dist/src/assets/img/icons/arrow-left.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit-html").TemplateResult<2>;
+export default _default;

package/dist/src/assets/img/icons/arrow-left.js

@@ -0,0 +1,10 @@
+import { svg } from 'lit';
+export default svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path 
+      d="m20.1116715 50.0035012-.1116715-.1085359 43.1159942-46.61088155c2.401537-2.18938917 4.6902018-3.28408375 6.8659943-3.28408375s4.1642651.63837733 5.9654178 1.91513199c1.8011528 1.27675467 3.1520173 2.97248092 4.0525937 5.08717877l-39.4020173 42.99768924 39.4020173 42.9976892c-.9005764 2.1146979-2.2514409 3.8104241-4.0525937 5.0871788-1.8011527 1.2767547-3.7896253 1.915132-5.9654178 1.915132-2.1013449 0-4.3900096-1.0573489-6.8659943-3.1720468l-43.1159942-46.7194174z"
+    />
+    <title>Go left icon</title>
+  </svg>
+`;
+//# sourceMappingURL=arrow-left.js.map

package/dist/src/assets/img/icons/arrow-left.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-left.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/arrow-left.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;CAOjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path \n      d=\"m20.1116715 50.0035012-.1116715-.1085359 43.1159942-46.61088155c2.401537-2.18938917 4.6902018-3.28408375 6.8659943-3.28408375s4.1642651.63837733 5.9654178 1.91513199c1.8011528 1.27675467 3.1520173 2.97248092 4.0525937 5.08717877l-39.4020173 42.99768924 39.4020173 42.9976892c-.9005764 2.1146979-2.2514409 3.8104241-4.0525937 5.0871788-1.8011527 1.2767547-3.7896253 1.915132-5.9654178 1.915132-2.1013449 0-4.3900096-1.0573489-6.8659943-3.1720468l-43.1159942-46.7194174z\"\n    />\n    <title>Go left icon</title>\n  </svg>\n`;\n"]}

package/dist/src/assets/img/icons/arrow-right.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit-html").TemplateResult<2>;
+export default _default;

package/dist/src/assets/img/icons/arrow-right.js

@@ -0,0 +1,10 @@
+import { svg } from 'lit';
+export default svg `
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path 
+      d="m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z"
+    />
+    <title>Go right icon</title>
+  </svg>
+`;
+//# sourceMappingURL=arrow-right.js.map

package/dist/src/assets/img/icons/arrow-right.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow-right.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/arrow-right.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;CAOjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n  <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path \n      d=\"m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z\"\n    />\n    <title>Go right icon</title>\n  </svg>\n`;\n"]}

package/dist/src/collection-browser.d.ts

@@ -4,6 +4,7 @@ import type { SearchServiceInterface, SortDirection, SortParam } from '@internet
 import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/infinite-scroller';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
 import './sort-filter-bar/sort-filter-bar';
@@ -34,11 +35,14 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     maxSelectedDate?: string;
     selectedFacets?: SelectedFacets;
     showHistogramDatePicker: boolean;
+    /** describes where this component is being used */
+    searchContext: string;
     collectionNameCache?: CollectionNameCacheInterface;
     pageContext: CollectionBrowserContext;
     restorationStateHandler: RestorationStateHandlerInterface;
     mobileBreakpoint: number;
     loggedIn: boolean;
+    modalManager?: ModalManagerInterface;
     /**
      * If item management UI active
      */

package/dist/src/collection-browser.js

@@ -27,12 +27,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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
          */
@@ -245,7 +248,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         var _a;
         const directionCleared = prevSortDirection && !this.sortDirection;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: analyticsCategories.default,
+            category: this.searchContext,
             action: analyticsActions.sortBy,
             label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
         });
@@ -265,7 +268,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.displayMode = e.detail.displayMode;
         if (this.displayMode) {
             (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: analyticsCategories.default,
+                category: this.searchContext,
                 action: analyticsActions.displayMode,
                 label: this.displayMode,
             });
@@ -281,7 +284,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         const cleared = prevSelectedLetter && this.selectedTitleFilter === null;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: analyticsCategories.default,
+            category: this.searchContext,
             action: analyticsActions.filterByTitle,
             label: cleared
                 ? `clear-${prevSelectedLetter}`
@@ -303,7 +306,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         const cleared = prevSelectedLetter && this.selectedCreatorFilter === null;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: analyticsCategories.default,
+            category: this.searchContext,
             action: analyticsActions.filterByCreator,
             label: cleared
                 ? `clear-${prevSelectedLetter}`
@@ -353,6 +356,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
         .aggregations=${this.aggregations}
         .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
@@ -361,6 +365,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .collectionNameCache=${this.collectionNameCache}
         .languageCodeHandler=${this.languageCodeHandler}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
         ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
@@ -412,7 +418,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
         if (this.dateRangeQueryClause) {
             (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: analyticsCategories.default,
+                category: this.searchContext,
                 action: analyticsActions.histogramChanged,
                 label: this.dateRangeQueryClause,
             });
@@ -652,8 +658,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             if (facetEntries.length === 0)
                 continue;
             const facetValuesArray = [];
-            for (const [key, facetState] of facetEntries) {
-                const plusMinusPrefix = facetState === 'hidden' ? '-' : '';
+            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) {
@@ -676,7 +682,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         var _a, _b;
         if (negative) {
             (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: analyticsCategories.default,
+                category: this.searchContext,
                 action: facetSelected
                     ? analyticsActions.facetNegativeSelected
                     : analyticsActions.facetNegativeDeselected,
@@ -685,7 +691,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         else {
             (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
-                category: analyticsCategories.default,
+                category: this.searchContext,
                 action: facetSelected
                     ? analyticsActions.facetSelected
                     : analyticsActions.facetDeselected,
@@ -1005,12 +1011,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     resultSelected(event) {
         var _a, _b;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: analyticsCategories.default,
+            category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: event.detail.mediatype,
         });
         (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
-            category: analyticsCategories.default,
+            category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: `page-${this.currentPage}`,
         });
@@ -1105,6 +1111,7 @@ CollectionBrowser.styles = css `
 
     #left-column {
       width: 18rem;
+      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
       padding-right: 12px;
       padding-right: 1rem;
     }
@@ -1310,6 +1317,9 @@ __decorate([
 __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);
@@ -1325,6 +1335,9 @@ __decorate([
 __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);