@internetarchive/collection-browser 0.2.15-0 → 0.2.16-alpha1

package/dist/test/mocks/mock-search-responses.js

@@ -15,6 +15,19 @@ export const mockSuccessResponse = {
                 }),
             ],
             start: 0,
+            aggregations: {
+                'user_aggs__terms__field:mediatypeSorter__size:100': {
+                    buckets: [
+                        { key: 'audio', doc_count: 121 },
+                        { key: 'movies', doc_count: 2195 },
+                        { key: 'texts', doc_count: 1392 },
+                        { key: 'data', doc_count: 605 },
+                        { key: 'web', doc_count: 301 },
+                        { key: 'collection', doc_count: 167 },
+                        { key: 'account', doc_count: 167 },
+                    ],
+                },
+            },
         },
         responseHeader: {
             status: 0,

package/dist/test/mocks/mock-search-responses.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-search-responses.js","sourceRoot":"","sources":["../../../test/mocks/mock-search-responses.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,GAGT,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,mBAAmB,GAA+C;IAC7E,OAAO,EAAE;QACP,WAAW,EAAE,EAAE;QACf,QAAQ,EAAE;YACR,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE;gBACJ,IAAI,QAAQ,CAAC;oBACX,UAAU,EAAE,KAAK;oBACjB,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;iBAChC,CAAC;gBACF,IAAI,QAAQ,CAAC;oBACX,UAAU,EAAE,KAAK;oBACjB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;iBACjC,CAAC;aACH;YACD,KAAK,EAAE,CAAC;SACT;QACD,cAAc,EAAE;YACd,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,gBAAgB;gBACvB,GAAG,EAAE,gBAAgB;gBACrB,MAAM,EAAE,6BAA6B;gBACrC,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,CAAC;aACT;SACF;KACF;CACF,CAAC","sourcesContent":["import type { Result } from '@internetarchive/result-type';\nimport {\n  Metadata,\n  SearchResponse,\n  SearchServiceError,\n} from '@internetarchive/search-service';\n\nexport const mockSuccessResponse: Result<SearchResponse, SearchServiceError> = {\n  success: {\n    rawResponse: {},\n    response: {\n      numFound: 2,\n      docs: [\n        new Metadata({\n          identifier: 'foo',\n          collections_raw: ['foo', 'bar'],\n        }),\n        new Metadata({\n          identifier: 'bar',\n          collections_raw: ['baz', 'boop'],\n        }),\n      ],\n      start: 0,\n    },\n    responseHeader: {\n      status: 0,\n      QTime: 0,\n      params: {\n        query: 'collection:foo',\n        qin: 'collection:foo',\n        fields: 'identifier, collections_raw',\n        wt: 'foo',\n        start: 0,\n      },\n    },\n  },\n};\n"]}
+{"version":3,"file":"mock-search-responses.js","sourceRoot":"","sources":["../../../test/mocks/mock-search-responses.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,GAGT,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,mBAAmB,GAA+C;IAC7E,OAAO,EAAE;QACP,WAAW,EAAE,EAAE;QACf,QAAQ,EAAE;YACR,QAAQ,EAAE,CAAC;YACX,IAAI,EAAE;gBACJ,IAAI,QAAQ,CAAC;oBACX,UAAU,EAAE,KAAK;oBACjB,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;iBAChC,CAAC;gBACF,IAAI,QAAQ,CAAC;oBACX,UAAU,EAAE,KAAK;oBACjB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;iBACjC,CAAC;aACH;YACD,KAAK,EAAE,CAAC;YACR,YAAY,EAAE;gBACZ,mDAAmD,EAAE;oBACnD,OAAO,EAAE;wBACP,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;wBAChC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE;wBAClC,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;wBACjC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE;wBAC/B,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE;wBAC9B,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE;wBACrC,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE;qBACnC;iBACF;aACF;SACF;QACD,cAAc,EAAE;YACd,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,gBAAgB;gBACvB,GAAG,EAAE,gBAAgB;gBACrB,MAAM,EAAE,6BAA6B;gBACrC,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,CAAC;aACT;SACF;KACF;CACF,CAAC","sourcesContent":["import type { Result } from '@internetarchive/result-type';\nimport {\n  Metadata,\n  SearchResponse,\n  SearchServiceError,\n} from '@internetarchive/search-service';\n\nexport const mockSuccessResponse: Result<SearchResponse, SearchServiceError> = {\n  success: {\n    rawResponse: {},\n    response: {\n      numFound: 2,\n      docs: [\n        new Metadata({\n          identifier: 'foo',\n          collections_raw: ['foo', 'bar'],\n        }),\n        new Metadata({\n          identifier: 'bar',\n          collections_raw: ['baz', 'boop'],\n        }),\n      ],\n      start: 0,\n      aggregations: {\n        'user_aggs__terms__field:mediatypeSorter__size:100': {\n          buckets: [\n            { key: 'audio', doc_count: 121 },\n            { key: 'movies', doc_count: 2195 },\n            { key: 'texts', doc_count: 1392 },\n            { key: 'data', doc_count: 605 },\n            { key: 'web', doc_count: 301 },\n            { key: 'collection', doc_count: 167 },\n            { key: 'account', doc_count: 167 },\n          ],\n        },\n      },\n    },\n    responseHeader: {\n      status: 0,\n      QTime: 0,\n      params: {\n        query: 'collection:foo',\n        qin: 'collection:foo',\n        fields: 'identifier, collections_raw',\n        wt: 'foo',\n        start: 0,\n      },\n    },\n  },\n};\n"]}

package/dist/test/sort-filter-bar/sort-filter-bar.test.d.ts

@@ -0,0 +1 @@
+import '../../src/sort-filter-bar/sort-filter-bar';

package/dist/test/sort-filter-bar/sort-filter-bar.test.js

@@ -0,0 +1,122 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../src/sort-filter-bar/sort-filter-bar';
+describe('Sort direction buttons', () => {
+    it('should render sort direction button', async () => {
+        var _a;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.sortDirection = 'asc'; // selected sort
+        await el.updateComplete;
+        const sortDirectionButtonList = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#sort-direction-selector');
+        const sortByAscButton = sortDirectionButtonList === null || sortDirectionButtonList === void 0 ? void 0 : sortDirectionButtonList.querySelector('#sort-ascending-btn');
+        expect(sortByAscButton).to.exist;
+        // ascending order button is selected
+        expect(sortByAscButton === null || sortByAscButton === void 0 ? void 0 : sortByAscButton.getAttribute('class')).to.equal('sort-button selected');
+        const sortByDescButton = sortDirectionButtonList === null || sortDirectionButtonList === void 0 ? void 0 : sortDirectionButtonList.querySelector('#sort-descending-btn');
+        expect(sortByDescButton).to.exist;
+        // descending order button is not selected
+        expect(sortByDescButton === null || sortByDescButton === void 0 ? void 0 : sortByDescButton.getAttribute('class')).to.not.equal('sort-button selected');
+    });
+});
+describe('Sort selector default buttons', async () => {
+    var _a;
+    const el = await fixture(html `
+    <sort-filter-bar> </sort-filter-bar>
+  `);
+    const sortSelectorContainer = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#desktop-sort-selector');
+    it('should render sort-by label', async () => {
+        var _a;
+        expect((_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(0)) === null || _a === void 0 ? void 0 : _a.textContent).to.equal('Sort By');
+    });
+    it('should render default relevance-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(1)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Relevance');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.getAttribute('class')).to.equal('selected');
+    });
+    it('should render default view-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Weekly Views');
+    });
+    it('should render active view-sort selectors', async () => {
+        el.selectedSort = 'alltimeview';
+        await el.updateComplete;
+        const defaultSortSelector = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.querySelector('a.selected');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('All-time Views');
+    });
+    it('should render default title-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Title');
+    });
+    it('should render default date-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Date Published');
+    });
+    it('should render active date-sort selectors', async () => {
+        el.selectedSort = 'datereviewed';
+        await el.updateComplete;
+        const defaultSortSelector = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.querySelector('a.selected');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Date Reviewed');
+    });
+    it('should render default creator-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(5)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        expect(defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.textContent).to.contain('Creator');
+    });
+    it('click event on view-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(2)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
+        expect(el.selectedSort).to.equal('weeklyview');
+    });
+    it('click event on title selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(3)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
+        expect(el.selectedSort).to.equal('title');
+    });
+    it('click event on date-sort selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(4)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
+        expect(el.selectedSort).to.equal('date');
+    });
+    it('click event on creator selector', async () => {
+        var _a;
+        const defaultSortSelector = (_a = sortSelectorContainer === null || sortSelectorContainer === void 0 ? void 0 : sortSelectorContainer.children.item(5)) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+        await (defaultSortSelector === null || defaultSortSelector === void 0 ? void 0 : defaultSortSelector.click());
+        expect(el.selectedSort).to.equal('creator');
+    });
+});
+describe('Display mode/style buttons', () => {
+    it('should render all display mode buttons', async () => {
+        var _a, _b, _c, _d, _e;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        const displayModeButtonList = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('ul');
+        const gridButton = (_c = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(0)) === null || _c === void 0 ? void 0 : _c.querySelector('#grid-button');
+        expect(gridButton).to.exist;
+        const detailListButton = (_d = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(1)) === null || _d === void 0 ? void 0 : _d.querySelector('#list-detail-button');
+        expect(detailListButton).to.exist;
+        const compactListButton = (_e = displayModeButtonList === null || displayModeButtonList === void 0 ? void 0 : displayModeButtonList.children.item(2)) === null || _e === void 0 ? void 0 : _e.querySelector('#list-compact-button');
+        expect(compactListButton).to.exist;
+    });
+    it('should active current display mode', async () => {
+        var _a, _b, _c;
+        const el = await fixture(html `
+      <sort-filter-bar> </sort-filter-bar>
+    `);
+        el.displayMode = 'grid';
+        await el.updateComplete;
+        const displayModeTitle = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#display-style-selector')) === null || _b === void 0 ? void 0 : _b.querySelector('button.active')) === null || _c === void 0 ? void 0 : _c.getAttribute('title');
+        expect(displayModeTitle).to.equal('Tile view');
+    });
+});
+//# sourceMappingURL=sort-filter-bar.test.js.map

package/dist/test/sort-filter-bar/sort-filter-bar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-filter-bar.test.js","sourceRoot":"","sources":["../../../test/sort-filter-bar/sort-filter-bar.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { SortFilterBar } from '../../src/sort-filter-bar/sort-filter-bar';\nimport type { SortField } from '../../src/models';\n\nimport '../../src/sort-filter-bar/sort-filter-bar';\n\ndescribe('Sort direction buttons', () => {\n  it('should render sort direction button', async () => {\n    const el = await fixture<SortFilterBar>(html`\n      <sort-filter-bar> </sort-filter-bar>\n    `);\n\n    el.sortDirection = 'asc'; // selected sort\n    await el.updateComplete;\n\n    const sortDirectionButtonList = el.shadowRoot?.querySelector(\n      '#sort-direction-selector'\n    );\n\n    const sortByAscButton = sortDirectionButtonList?.querySelector(\n      '#sort-ascending-btn'\n    );\n    expect(sortByAscButton).to.exist;\n    // ascending order button is selected\n    expect(sortByAscButton?.getAttribute('class')).to.equal(\n      'sort-button selected'\n    );\n\n    const sortByDescButton = sortDirectionButtonList?.querySelector(\n      '#sort-descending-btn'\n    );\n    expect(sortByDescButton).to.exist;\n    // descending order button is not selected\n    expect(sortByDescButton?.getAttribute('class')).to.not.equal(\n      'sort-button selected'\n    );\n  });\n});\n\ndescribe('Sort selector default buttons', async () => {\n  const el = await fixture<SortFilterBar>(html`\n    <sort-filter-bar> </sort-filter-bar>\n  `);\n  const sortSelectorContainer = el.shadowRoot?.querySelector(\n    '#desktop-sort-selector'\n  );\n\n  it('should render sort-by label', async () => {\n    expect(sortSelectorContainer?.children.item(0)?.textContent).to.equal(\n      'Sort By'\n    );\n  });\n\n  it('should render default relevance-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(1)\n      ?.querySelector('a');\n    expect(defaultSortSelector?.textContent).to.contain('Relevance');\n    expect(defaultSortSelector?.getAttribute('class')).to.equal('selected');\n  });\n\n  it('should render default view-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(2)\n      ?.querySelector('a');\n    expect(defaultSortSelector?.textContent).to.contain('Weekly Views');\n  });\n\n  it('should render active view-sort selectors', async () => {\n    el.selectedSort = 'alltimeview' as SortField;\n    await el.updateComplete;\n\n    const defaultSortSelector =\n      sortSelectorContainer?.querySelector('a.selected');\n    expect(defaultSortSelector?.textContent).to.contain('All-time Views');\n  });\n\n  it('should render default title-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(3)\n      ?.querySelector('a');\n    expect(defaultSortSelector?.textContent).to.contain('Title');\n  });\n\n  it('should render default date-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(4)\n      ?.querySelector('a');\n    expect(defaultSortSelector?.textContent).to.contain('Date Published');\n  });\n\n  it('should render active date-sort selectors', async () => {\n    el.selectedSort = 'datereviewed' as SortField;\n    await el.updateComplete;\n\n    const defaultSortSelector =\n      sortSelectorContainer?.querySelector('a.selected');\n    expect(defaultSortSelector?.textContent).to.contain('Date Reviewed');\n  });\n\n  it('should render default creator-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(5)\n      ?.querySelector('a');\n    expect(defaultSortSelector?.textContent).to.contain('Creator');\n  });\n\n  it('click event on view-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(2)\n      ?.querySelector('a');\n\n    await defaultSortSelector?.click();\n    expect(el.selectedSort).to.equal('weeklyview');\n  });\n\n  it('click event on title selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(3)\n      ?.querySelector('a');\n\n    await defaultSortSelector?.click();\n    expect(el.selectedSort).to.equal('title');\n  });\n\n  it('click event on date-sort selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(4)\n      ?.querySelector('a');\n\n    await defaultSortSelector?.click();\n    expect(el.selectedSort).to.equal('date');\n  });\n\n  it('click event on creator selector', async () => {\n    const defaultSortSelector = sortSelectorContainer?.children\n      .item(5)\n      ?.querySelector('a');\n\n    await defaultSortSelector?.click();\n    expect(el.selectedSort).to.equal('creator');\n  });\n});\n\ndescribe('Display mode/style buttons', () => {\n  it('should render all display mode buttons', async () => {\n    const el = await fixture<SortFilterBar>(html`\n      <sort-filter-bar> </sort-filter-bar>\n    `);\n\n    const displayModeButtonList = el.shadowRoot\n      ?.querySelector('#display-style-selector')\n      ?.querySelector('ul');\n\n    const gridButton = displayModeButtonList?.children\n      .item(0)\n      ?.querySelector('#grid-button');\n    expect(gridButton).to.exist;\n\n    const detailListButton = displayModeButtonList?.children\n      .item(1)\n      ?.querySelector('#list-detail-button');\n    expect(detailListButton).to.exist;\n\n    const compactListButton = displayModeButtonList?.children\n      .item(2)\n      ?.querySelector('#list-compact-button');\n    expect(compactListButton).to.exist;\n  });\n\n  it('should active current display mode', async () => {\n    const el = await fixture<SortFilterBar>(html`\n      <sort-filter-bar> </sort-filter-bar>\n    `);\n\n    el.displayMode = 'grid';\n    await el.updateComplete;\n\n    const displayModeTitle = el.shadowRoot\n      ?.querySelector('#display-style-selector')\n      ?.querySelector('button.active')\n      ?.getAttribute('title');\n    expect(displayModeTitle).to.equal('Tile view');\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.15-0",
+  "version": "0.2.16-alpha1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -26,8 +26,10 @@
     "@internetarchive/feature-feedback": "^0.1.4",
     "@internetarchive/field-parsers": "^0.1.3",
     "@internetarchive/histogram-date-range": "^0.1.7",
+    "@internetarchive/ia-activity-indicator": "^0.0.3",
     "@internetarchive/infinite-scroller": "^0.1.3",
     "@internetarchive/local-cache": "^0.2.1",
+    "@internetarchive/modal-manager": "^0.2.6",
     "@internetarchive/search-service": "^0.3.4",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",

package/src/app-root.ts

@@ -4,6 +4,7 @@ import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { CollectionNameCache } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 
@@ -40,6 +41,8 @@ export class AppRoot extends LitElement {
 
   @query('collection-browser') private collectionBrowser!: CollectionBrowser;
 
+  @query('modal-manager') private modalManager!: ModalManagerInterface;
+
   private searchPressed(e: Event) {
     e.preventDefault();
     this.searchQuery = this.baseQueryField.value;
@@ -171,11 +174,13 @@ export class AppRoot extends LitElement {
           .collectionNameCache=${this.collectionNameCache}
           .showHistogramDatePicker=${true}
           .loggedIn=${this.loggedIn}
+          .modalManager=${this.modalManager}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
         >
         </collection-browser>
       </div>
+      <modal-manager></modal-manager>
     `;
   }
 
@@ -255,6 +260,28 @@ export class AppRoot extends LitElement {
   static styles = css`
     :host {
       display: block;
+      --primaryButtonBGColor: #194880;
+    }
+
+    /* 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;
+      --modalScrollOffset: 0;
+      --modalCornerRadius: 0.5rem;
     }
 
     input,
@@ -263,7 +290,7 @@ export class AppRoot extends LitElement {
     }
 
     collection-browser {
-      margin-top: 30rem;
+      margin-top: 20rem;
     }
 
     #base-query-field {
@@ -274,7 +301,7 @@ export class AppRoot extends LitElement {
       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;

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

@@ -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>
+`;

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

@@ -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>
+`;

package/src/collection-browser.ts

@@ -27,6 +27,7 @@ import type {
 } 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';
@@ -115,6 +116,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Object }) modalManager?: ModalManagerInterface = undefined;
+
   /**
    * If item management UI active
    */
@@ -425,6 +428,7 @@ export class CollectionBrowser
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
         .aggregations=${this.aggregations}
         .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
@@ -433,6 +437,8 @@ export class CollectionBrowser
         .collectionNameCache=${this.collectionNameCache}
         .languageCodeHandler=${this.languageCodeHandler}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
         ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
@@ -497,7 +503,8 @@ export class CollectionBrowser
     if (
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
-      changed.has('baseImageUrl')
+      changed.has('baseImageUrl') ||
+      changed.has('loggedIn')
     ) {
       this.infiniteScroller?.reload();
     }
@@ -1208,17 +1215,6 @@ export class CollectionBrowser
       width: 18rem;
       padding-right: 12px;
       padding-right: 1rem;
-      padding-bottom: 20px;
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      overflow: scroll;
-      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
-      scrollbar-width: none; /* hide scrollbar Firefox */
-    }
-
-    #left-column::-webkit-scrollbar {
-      display: none;
     }
 
     .mobile #left-column {
@@ -1236,7 +1232,6 @@ export class CollectionBrowser
       max-height: 0;
       transition: max-height 0.2s ease-in-out;
       z-index: 1;
-      padding-bottom: 2rem;
     }
 
     .mobile #facets-container {