@internetarchive/collection-browser 0.2.21 → 0.2.22

package/dist/test/collection-facets/more-facets-pagination.test.js

@@ -0,0 +1,133 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../../src/collection-facets/more-facets-pagination';
+afterEach(() => {
+    sinon.restore();
+});
+describe('More facets pagination', () => {
+    describe('5 pages or less', () => {
+        it('shows all pages', async () => {
+            var _a;
+            const el = await fixture(html `<more-facets-pagination .size=${5}></more-facets-pagination>`);
+            await el.updateComplete;
+            const pageButtons = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button[data-page]');
+            expect(pageButtons.length).to.greaterThan(0);
+            pageButtons.forEach((button, index) => {
+                expect(button.textContent).to.contain(index + 1);
+            });
+        });
+    });
+    it('should render pagination template', async () => {
+        var _a, _b;
+        const el = await fixture(html `<more-facets-pagination .size=${10}></more-facets-pagination>`);
+        await el.updateComplete;
+        expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facets-pagination')).to.exist;
+        expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.arrow-icon')).to.exist;
+    });
+    it('should render page numbers', async () => {
+        var _a;
+        const el = await fixture(html `<more-facets-pagination .size=${3}></more-facets-pagination>`);
+        await el.updateComplete;
+        const pageNumberElement = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.page-numbers');
+        expect(pageNumberElement).to.exist;
+        expect(pageNumberElement === null || pageNumberElement === void 0 ? void 0 : pageNumberElement.querySelectorAll('button').length).to.equal(3);
+    });
+    it('check current page and total pages', async () => {
+        var _a, _b;
+        const el = await fixture(html `<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`);
+        await el.updateComplete;
+        const pageNumberElement = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.page-numbers');
+        expect(pageNumberElement).to.exist;
+        expect(pageNumberElement === null || pageNumberElement === void 0 ? void 0 : pageNumberElement.querySelectorAll('button')[1].classList.contains('current')).to.be.true;
+        expect((_b = el.pages) === null || _b === void 0 ? void 0 : _b.length).to.equal(4);
+    });
+    it('get page numbers based of size and currentPage', async () => {
+        var _a;
+        const el = await fixture(html `<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`);
+        await el.updateComplete;
+        expect((_a = el.pages) === null || _a === void 0 ? void 0 : _a.length).to.equal(4);
+    });
+    describe('Selecting a page', () => {
+        it('fires event', async () => {
+            const el = await fixture(html `<more-facets-pagination></more-facets-pagination>`);
+            await el.updateComplete;
+            setTimeout(() => el.dispatchEvent(new CustomEvent('pageNumberClicked', { detail: { page: 15 } })));
+            const { detail } = await oneEvent(el, 'pageNumberClicked');
+            expect(detail === null || detail === void 0 ? void 0 : detail.page).to.equal(15);
+        });
+        it('sets off side effects with `onChange`', async () => {
+            var _a;
+            const el = await fixture(html `<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`);
+            expect(el.currentPage).to.equal(2); // confirm current page
+            const fake1 = sinon.fake();
+            const fake2 = sinon.fake();
+            el.observePageCount = fake1;
+            el.emitPageClick = fake2;
+            // select first page button
+            const pageButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.page-numbers > button');
+            // confirm button isn't selected
+            expect(pageButton.classList.contains('current')).to.be.false;
+            pageButton.click();
+            await el.updateComplete;
+            expect(fake1.callCount).to.equal(1);
+            expect(fake2.callCount).to.equal(1);
+            expect(el.currentPage).to.equal(1); // brings us back to currentPage
+            // confirm button is selected
+            expect(pageButton.classList.contains('current')).to.be.true;
+        });
+    });
+    describe('Using Arrows', () => {
+        it('going backwards', async () => {
+            var _a, _b;
+            const el = await fixture(html `<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`);
+            expect(el.currentPage).to.equal(2); // confirm current page
+            const fake1 = sinon.fake();
+            const fake2 = sinon.fake();
+            el.observePageCount = fake1;
+            el.emitPageClick = fake2;
+            // select first page button
+            const rewindButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facets-pagination > button.rewind');
+            rewindButton.click();
+            await el.updateComplete;
+            expect(fake1.callCount).to.equal(1);
+            expect(fake2.callCount).to.equal(1);
+            expect(el.currentPage).to.equal(1); // brings us back 1 page
+            // confirm button is selected
+            expect(((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.page-numbers > button[data-page="1"]')).classList.contains('current')).to.be.true;
+        });
+        it('going forwards', async () => {
+            var _a;
+            const el = await fixture(html `<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${5}
+        ></more-facets-pagination>`);
+            expect(el.currentPage).to.equal(5); // confirm current page
+            const fake1 = sinon.fake();
+            const fake2 = sinon.fake();
+            el.observePageCount = fake1;
+            el.emitPageClick = fake2;
+            // select first page button
+            const forwardButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.facets-pagination > button.forward');
+            forwardButton.click();
+            await el.updateComplete;
+            expect(fake1.callCount).to.equal(1);
+            expect(fake2.callCount).to.equal(1);
+            expect(el.currentPage).to.equal(6); // brings us forward 1 page
+        });
+    });
+});
+//# sourceMappingURL=more-facets-pagination.test.js.map

package/dist/test/collection-facets/more-facets-pagination.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"more-facets-pagination.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-pagination.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture, oneEvent } from '@open-wc/testing';\nimport { html } from 'lit';\nimport sinon from 'sinon';\nimport '../../src/collection-facets/more-facets-pagination';\nimport type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';\n\nafterEach(() => {\n  sinon.restore();\n});\n\ndescribe('More facets pagination', () => {\n  describe('5 pages or less', () => {\n    it('shows all pages', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination .size=${5}></more-facets-pagination>`\n      );\n\n      await el.updateComplete;\n\n      const pageButtons = el.shadowRoot?.querySelectorAll(\n        'button[data-page]'\n      ) as NodeList;\n      expect(pageButtons.length).to.greaterThan(0);\n\n      pageButtons.forEach((button, index) => {\n        expect(button.textContent).to.contain(index + 1);\n      });\n    });\n  });\n\n  it('should render pagination template', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${10}></more-facets-pagination>`\n    );\n\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;\n    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;\n  });\n\n  it('should render page numbers', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination .size=${3}></more-facets-pagination>`\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);\n  });\n\n  it('check current page and total pages', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`\n    );\n\n    await el.updateComplete;\n\n    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');\n    expect(pageNumberElement).to.exist;\n    expect(\n      pageNumberElement\n        ?.querySelectorAll('button')[1]\n        .classList.contains('current')\n    ).to.be.true;\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  it('get page numbers based of size and currentPage', async () => {\n    const el = await fixture<MoreFacetsPagination>(\n      html`<more-facets-pagination\n        .size=${4}\n        .currentPage=${2}\n      ></more-facets-pagination>`\n    );\n\n    await el.updateComplete;\n\n    expect(el.pages?.length).to.equal(4);\n  });\n\n  describe('Selecting a page', () => {\n    it('fires event', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination></more-facets-pagination>`\n      );\n\n      await el.updateComplete;\n\n      setTimeout(() =>\n        el.dispatchEvent(\n          new CustomEvent('pageNumberClicked', { detail: { page: 15 } })\n        )\n      );\n      const { detail } = await oneEvent(el, 'pageNumberClicked');\n      expect(detail?.page).to.equal(15);\n    });\n    it('sets off side effects with `onChange`', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const pageButton = el.shadowRoot?.querySelector(\n        '.page-numbers > button'\n      ) as HTMLButtonElement;\n      // confirm button isn't selected\n      expect(pageButton.classList.contains('current')).to.be.false;\n      pageButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back to currentPage\n      // confirm button is selected\n      expect(pageButton.classList.contains('current')).to.be.true;\n    });\n  });\n\n  describe('Using Arrows', () => {\n    it('going backwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${2}\n        ></more-facets-pagination>`\n      );\n\n      expect(el.currentPage).to.equal(2); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const rewindButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.rewind'\n      ) as HTMLButtonElement;\n      rewindButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(1); // brings us back 1 page\n      // confirm button is selected\n      expect(\n        (\n          el.shadowRoot?.querySelector(\n            '.page-numbers > button[data-page=\"1\"]'\n          ) as HTMLButtonElement\n        ).classList.contains('current')\n      ).to.be.true;\n    });\n\n    it('going forwards', async () => {\n      const el = await fixture<MoreFacetsPagination>(\n        html`<more-facets-pagination\n          .size=${'10'}\n          .currentPage=${5}\n        ></more-facets-pagination>`\n      );\n\n      expect(el.currentPage).to.equal(5); // confirm current page\n\n      const fake1 = sinon.fake();\n      const fake2 = sinon.fake();\n      el.observePageCount = fake1;\n      el.emitPageClick = fake2;\n\n      // select first page button\n      const forwardButton = el.shadowRoot?.querySelector(\n        '.facets-pagination > button.forward'\n      ) as HTMLButtonElement;\n      forwardButton.click();\n\n      await el.updateComplete;\n\n      expect(fake1.callCount).to.equal(1);\n      expect(fake2.callCount).to.equal(1);\n      expect(el.currentPage).to.equal(6); // brings us forward 1 page\n    });\n  });\n});\n"]}

package/dist/test/collection-facets.test.d.ts

@@ -1 +1,2 @@
+import '@internetarchive/modal-manager';
 import '../src/collection-facets';

package/dist/test/collection-facets.test.js

@@ -1,10 +1,21 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
 import { html } from 'lit';
+import { ModalManager, } from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
 import '../src/collection-facets';
 describe('Collection Facets', () => {
+    it('has loader', async () => {
+        var _a, _b, _c, _d;
+        const el = await fixture(html `<collection-facets ?facetsLoading=${true}></collection-facets>`);
+        expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#container')) === null || _b === void 0 ? void 0 : _b.classList.contains('loading')).to.be.true;
+        el.facetsLoading = false;
+        await el.updateComplete;
+        expect((_d = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#container')) === null || _d === void 0 ? void 0 : _d.classList.contains('loading')).to.be.false;
+    });
     it('renders aggregations as facets', async () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const el = await fixture(html `<collection-facets></collection-facets>`);
         const aggs = {
             'user_aggs__terms__field:subjectSorter__size:1': {
@@ -23,8 +34,9 @@ describe('Collection Facets', () => {
         const titleFacetGroup = facetGroups === null || facetGroups === void 0 ? void 0 : facetGroups[0];
         const facetGroupHeader = titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('h1');
         expect((_b = facetGroupHeader === null || facetGroupHeader === void 0 ? void 0 : facetGroupHeader.textContent) === null || _b === void 0 ? void 0 : _b.trim()).to.equal('Subject');
-        const titleFacetRow = titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('.facet-row');
-        expect((_c = titleFacetRow === null || titleFacetRow === void 0 ? void 0 : titleFacetRow.textContent) === null || _c === void 0 ? void 0 : _c.trim()).to.satisfy((text) => /^foo\s*5$/.test(text));
+        const titleFacetRow = (_d = (_c = titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('facets-template')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.facet-row');
+        console.log(titleFacetGroup === null || titleFacetGroup === void 0 ? void 0 : titleFacetGroup.querySelector('facets-template'));
+        expect((_e = titleFacetRow === null || titleFacetRow === void 0 ? void 0 : titleFacetRow.textContent) === null || _e === void 0 ? void 0 : _e.trim()).to.satisfy((text) => /^foo\s*5$/.test(text));
     });
     it('renders multiple aggregation types', async () => {
         var _a;
@@ -53,7 +65,7 @@ describe('Collection Facets', () => {
         expect(facetGroups === null || facetGroups === void 0 ? void 0 : facetGroups.length).to.equal(2);
     });
     it('renders collection facets as links', async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const el = await fixture(html `<collection-facets></collection-facets>`);
         const aggs = {
             'user_aggs__terms__field:collection__size:1': {
@@ -67,12 +79,12 @@ describe('Collection Facets', () => {
         };
         el.aggregations = aggs;
         await el.updateComplete;
-        const collectionName = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('async-collection-name');
+        const collectionName = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('facets-template')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('async-collection-name');
         expect(collectionName === null || collectionName === void 0 ? void 0 : collectionName.parentElement).to.be.instanceOf(HTMLAnchorElement);
-        expect((_b = collectionName === null || collectionName === void 0 ? void 0 : collectionName.parentElement) === null || _b === void 0 ? void 0 : _b.getAttribute('href')).to.equal('/details/foo');
+        expect((_d = collectionName === null || collectionName === void 0 ? void 0 : collectionName.parentElement) === null || _d === void 0 ? void 0 : _d.getAttribute('href')).to.equal('/details/foo');
     });
     it('renders non-collection facets without links', async () => {
-        var _a;
+        var _a, _b, _c;
         const el = await fixture(html `<collection-facets></collection-facets>`);
         const aggs = {
             'user_aggs__terms__field:subjectSorter__size:1': {
@@ -86,34 +98,87 @@ describe('Collection Facets', () => {
         };
         el.aggregations = aggs;
         await el.updateComplete;
-        const collectionName = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('async-collection-name');
+        const collectionName = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('facets-template')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('async-collection-name');
         expect(collectionName === null || collectionName === void 0 ? void 0 : collectionName.parentElement).to.not.be.instanceOf(HTMLAnchorElement);
     });
-    it('toggles selected facets on click', async () => {
-        var _a, _b, _c;
-        const el = await fixture(html `<collection-facets></collection-facets>`);
-        const aggs = {
-            'user_aggs__terms__field:subjectSorter__size:1': {
-                buckets: [
-                    {
-                        key: 'foo',
-                        doc_count: 5,
-                    },
-                ],
-            },
-        };
-        el.aggregations = aggs;
-        await el.updateComplete;
-        const checkbox = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select-facet-checkbox');
-        expect(checkbox.checked).to.be.false;
-        // Select the facet
-        checkbox === null || checkbox === void 0 ? void 0 : checkbox.click();
-        await el.updateComplete;
-        expect((_b = el.selectedFacets) === null || _b === void 0 ? void 0 : _b.subject.foo).to.equal('selected');
-        // Unselect the facet
-        checkbox === null || checkbox === void 0 ? void 0 : checkbox.click();
-        await el.updateComplete;
-        expect((_c = el.selectedFacets) === null || _c === void 0 ? void 0 : _c.subject.foo).to.be.undefined;
+    describe('More Facets', () => {
+        it('Does not render < allowedFacetCount', async () => {
+            var _a;
+            const el = await fixture(html `<collection-facets></collection-facets>`);
+            const aggs = {
+                'user_aggs__terms__field:subjectSorter__size:1': {
+                    buckets: [
+                        {
+                            key: 'foo',
+                            doc_count: 5,
+                        },
+                    ],
+                },
+            };
+            el.aggregations = aggs;
+            await el.updateComplete;
+            const moreLink = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.more-link');
+            expect(moreLink).to.be.null;
+        });
+        it('Render More Facets', async () => {
+            var _a, _b;
+            const el = await fixture(html `<collection-facets
+          .modalManager=${new ModalManager()}
+        ></collection-facets>`);
+            const aggs = {
+                'user_aggs__terms__field:subjectSorter__size:1': {
+                    buckets: [
+                        {
+                            key: 'foo',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'fi',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'fum',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'flee',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'wheee',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'whooo',
+                            doc_count: 5,
+                        },
+                        {
+                            key: 'boop',
+                            doc_count: 5,
+                        },
+                    ],
+                },
+            };
+            el.aggregations = aggs;
+            await el.updateComplete;
+            let eventCaught = false;
+            let eventFacet = '';
+            el.addEventListener('showMoreFacets', e => {
+                eventFacet = e.detail;
+                eventCaught = true;
+            });
+            const moreLink = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.more-link');
+            expect(moreLink).to.exist; // has link
+            const showModalSpy = sinon.spy(el.modalManager, 'showModal');
+            // let's pop up modal
+            moreLink === null || moreLink === void 0 ? void 0 : moreLink.click();
+            await el.updateComplete;
+            expect(showModalSpy.callCount).to.equal(1);
+            expect((_b = el.modalManager) === null || _b === void 0 ? void 0 : _b.classList.contains('more-search-facets')).to.be
+                .true;
+            expect(eventCaught).to.be.true;
+            expect(eventFacet).to.equal('subject');
+        });
     });
 });
 //# sourceMappingURL=collection-facets.test.js.map

package/dist/test/collection-facets.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-facets.test.js","sourceRoot":"","sources":["../../test/collection-facets.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 { Aggregation } from '@internetarchive/search-service';\nimport type { CollectionFacets } from '../src/collection-facets';\nimport '../src/collection-facets';\n\ndescribe('Collection Facets', () => {\n  it('renders aggregations as facets', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');\n    expect(facetGroups?.length).to.equal(1);\n\n    const titleFacetGroup = facetGroups?.[0];\n    const facetGroupHeader = titleFacetGroup?.querySelector('h1');\n    expect(facetGroupHeader?.textContent?.trim()).to.equal('Subject');\n\n    const titleFacetRow = titleFacetGroup?.querySelector('.facet-row');\n    expect(titleFacetRow?.textContent?.trim()).to.satisfy((text: string) =>\n      /^foo\\s*5$/.test(text)\n    );\n  });\n\n  it('renders multiple aggregation types', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n      'user_aggs__terms__field:mediatypeSorter__size:1': {\n        buckets: [\n          {\n            key: 'bar',\n            doc_count: 10,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');\n    expect(facetGroups?.length).to.equal(2);\n  });\n\n  it('renders collection facets as links', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:collection__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const collectionName = el.shadowRoot?.querySelector(\n      'async-collection-name'\n    );\n    expect(collectionName?.parentElement).to.be.instanceOf(HTMLAnchorElement);\n    expect(collectionName?.parentElement?.getAttribute('href')).to.equal(\n      '/details/foo'\n    );\n  });\n\n  it('renders non-collection facets without links', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const collectionName = el.shadowRoot?.querySelector(\n      'async-collection-name'\n    );\n    expect(collectionName?.parentElement).to.not.be.instanceOf(\n      HTMLAnchorElement\n    );\n  });\n\n  it('toggles selected facets on click', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const checkbox = el.shadowRoot?.querySelector(\n      '.select-facet-checkbox'\n    ) as HTMLInputElement;\n    expect(checkbox.checked).to.be.false;\n\n    // Select the facet\n    checkbox?.click();\n    await el.updateComplete;\n\n    expect(el.selectedFacets?.subject.foo).to.equal('selected');\n\n    // Unselect the facet\n    checkbox?.click();\n    await el.updateComplete;\n\n    expect(el.selectedFacets?.subject.foo).to.be.undefined;\n  });\n});\n"]}
+{"version":3,"file":"collection-facets.test.js","sourceRoot":"","sources":["../../test/collection-facets.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { html } from 'lit';\nimport type { Aggregation } from '@internetarchive/search-service';\nimport {\n  ModalManager,\n  ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { CollectionFacets } from '../src/collection-facets';\nimport '@internetarchive/modal-manager';\nimport '../src/collection-facets';\nimport type { FacetOption } from '../src/models';\n\ndescribe('Collection Facets', () => {\n  it('has loader', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets ?facetsLoading=${true}></collection-facets>`\n    );\n\n    expect(\n      el.shadowRoot?.querySelector('#container')?.classList.contains('loading')\n    ).to.be.true;\n\n    el.facetsLoading = false;\n    await el.updateComplete;\n\n    expect(\n      el.shadowRoot?.querySelector('#container')?.classList.contains('loading')\n    ).to.be.false;\n  });\n  it('renders aggregations as facets', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');\n    expect(facetGroups?.length).to.equal(1);\n\n    const titleFacetGroup = facetGroups?.[0];\n    const facetGroupHeader = titleFacetGroup?.querySelector('h1');\n    expect(facetGroupHeader?.textContent?.trim()).to.equal('Subject');\n    const titleFacetRow = titleFacetGroup\n      ?.querySelector('facets-template')\n      ?.shadowRoot?.querySelector('.facet-row');\n    console.log(titleFacetGroup?.querySelector('facets-template'));\n    expect(titleFacetRow?.textContent?.trim()).to.satisfy((text: string) =>\n      /^foo\\s*5$/.test(text)\n    );\n  });\n\n  it('renders multiple aggregation types', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n      'user_aggs__terms__field:mediatypeSorter__size:1': {\n        buckets: [\n          {\n            key: 'bar',\n            doc_count: 10,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');\n    expect(facetGroups?.length).to.equal(2);\n  });\n\n  it('renders collection facets as links', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:collection__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const collectionName = el.shadowRoot\n      ?.querySelector('facets-template')\n      ?.shadowRoot?.querySelector('async-collection-name');\n    expect(collectionName?.parentElement).to.be.instanceOf(HTMLAnchorElement);\n    expect(collectionName?.parentElement?.getAttribute('href')).to.equal(\n      '/details/foo'\n    );\n  });\n\n  it('renders non-collection facets without links', async () => {\n    const el = await fixture<CollectionFacets>(\n      html`<collection-facets></collection-facets>`\n    );\n\n    const aggs: Record<string, Aggregation> = {\n      'user_aggs__terms__field:subjectSorter__size:1': {\n        buckets: [\n          {\n            key: 'foo',\n            doc_count: 5,\n          },\n        ],\n      },\n    };\n\n    el.aggregations = aggs;\n    await el.updateComplete;\n\n    const collectionName = el.shadowRoot\n      ?.querySelector('facets-template')\n      ?.shadowRoot?.querySelector('async-collection-name');\n    expect(collectionName?.parentElement).to.not.be.instanceOf(\n      HTMLAnchorElement\n    );\n  });\n\n  describe('More Facets', () => {\n    it('Does not render < allowedFacetCount', async () => {\n      const el = await fixture<CollectionFacets>(\n        html`<collection-facets></collection-facets>`\n      );\n\n      const aggs: Record<string, Aggregation> = {\n        'user_aggs__terms__field:subjectSorter__size:1': {\n          buckets: [\n            {\n              key: 'foo',\n              doc_count: 5,\n            },\n          ],\n        },\n      };\n\n      el.aggregations = aggs;\n      await el.updateComplete;\n\n      const moreLink = el.shadowRoot?.querySelector('.more-link');\n      expect(moreLink).to.be.null;\n    });\n    it('Render More Facets', async () => {\n      const el = await fixture<CollectionFacets>(\n        html`<collection-facets\n          .modalManager=${new ModalManager()}\n        ></collection-facets>`\n      );\n\n      const aggs: Record<string, Aggregation> = {\n        'user_aggs__terms__field:subjectSorter__size:1': {\n          buckets: [\n            {\n              key: 'foo',\n              doc_count: 5,\n            },\n            {\n              key: 'fi',\n              doc_count: 5,\n            },\n            {\n              key: 'fum',\n              doc_count: 5,\n            },\n            {\n              key: 'flee',\n              doc_count: 5,\n            },\n            {\n              key: 'wheee',\n              doc_count: 5,\n            },\n            {\n              key: 'whooo',\n              doc_count: 5,\n            },\n            {\n              key: 'boop',\n              doc_count: 5,\n            },\n          ],\n        },\n      };\n\n      el.aggregations = aggs;\n      await el.updateComplete;\n\n      let eventCaught = false;\n      let eventFacet = '';\n      el.addEventListener('showMoreFacets', e => {\n        eventFacet = (e as CustomEvent).detail;\n        eventCaught = true;\n      });\n\n      const moreLink = el.shadowRoot?.querySelector(\n        '.more-link'\n      ) as HTMLButtonElement;\n      expect(moreLink).to.exist; // has link\n\n      const showModalSpy = sinon.spy(\n        el.modalManager as ModalManagerInterface,\n        'showModal'\n      );\n      // let's pop up modal\n      moreLink?.click();\n      await el.updateComplete;\n\n      expect(showModalSpy.callCount).to.equal(1);\n      expect(el.modalManager?.classList.contains('more-search-facets')).to.be\n        .true;\n      expect(eventCaught).to.be.true;\n      expect(eventFacet).to.equal('subject' as FacetOption);\n    });\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.21",
+  "version": "0.2.22",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -22,23 +22,26 @@
   },
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@internetarchive/collection-name-cache": "^0.1.5",
     "@internetarchive/analytics-manager": "^0.1.2",
+    "@internetarchive/collection-name-cache": "^0.1.5",
     "@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.7",
     "@internetarchive/search-service": "^0.3.5",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",
+    "eslint-plugin-lit": "^1.6.1",
     "lit": "^2.2.2",
     "typescript-cookie": "^1.0.3"
   },
   "devDependencies": {
     "@internetarchive/result-type": "^0.0.1",
-    "@open-wc/eslint-config": "^7.0.0",
+    "@open-wc/eslint-config": "^8.0.2",
     "@open-wc/testing": "^3.0.3",
     "@types/dompurify": "^2.3.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
@@ -48,8 +51,10 @@
     "concurrently": "^6.3.0",
     "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-lit-a11y": "^2.2.0",
+    "eslint-plugin-no-only-tests": "^3.0.0",
     "eslint-plugin-wc": "^1.3.2",
     "gh-pages": "^4.0.0",
     "husky": "^7.0.0",
@@ -91,7 +96,9 @@
           "js": "never",
           "ts": "never"
         }
-      ]
+      ],
+      "no-unsafe-optional-chaining": "warn",
+      "default-param-last": "warn"
     }
   },
   "prettier": {

package/src/app-root.ts

@@ -9,6 +9,7 @@ import { customElement, property, 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 { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import type { CollectionBrowser } from '../src/collection-browser';
 
@@ -49,6 +50,8 @@ export class AppRoot extends LitElement {
 
   @query('collection-browser') private collectionBrowser!: CollectionBrowser;
 
+  @query('modal-manager') private modalManager!: ModalManagerInterface;
+
   private analyticsManager = new AnalyticsManager();
 
   private analyticsHandler: AnalyticsManagerInterface = {
@@ -120,7 +123,7 @@ export 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
           >
@@ -219,12 +222,14 @@ export 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>
     `;
   }
 
@@ -293,7 +298,9 @@ export 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
   }
 
@@ -346,16 +353,39 @@ export class AppRoot extends LitElement {
   static 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 {
@@ -366,7 +396,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

@@ -29,6 +29,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';
@@ -127,6 +128,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Object }) modalManager?: ModalManagerInterface = undefined;
+
   /**
    * If item management UI active
    */
@@ -507,6 +510,7 @@ export class CollectionBrowser
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
         .aggregations=${this.aggregations}
         .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
@@ -515,6 +519,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}
@@ -853,8 +859,8 @@ export class CollectionBrowser
       // eslint-disable-next-line no-continue
       if (facetEntries.length === 0) continue;
       const facetValuesArray: string[] = [];
-      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 =
@@ -1351,6 +1357,7 @@ export class CollectionBrowser
 
     #left-column {
       width: 18rem;
+      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
       padding-right: 12px;
       padding-right: 1rem;
     }