@internetarchive/collection-browser 0.2.12 → 0.2.14-alpha.0

package/dist/test/tiles/grid/item-tile.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-tile.test.js","sourceRoot":"","sources":["../../../../test/tiles/grid/item-tile.test.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,mCAAmC,CAAC;AAE3C,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;;QAC/C,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,UAAU,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAE/D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;;QACrD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC3B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;;QAClE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,EAAE,CAAC,SAAS,GAAG;YACb,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;SAClB,CAAC;QACF,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;;QACxE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,EAAE,CAAC,SAAS,GAAG;YACb,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,MAAM;SAClB,CAAC;QACF,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;;QACxE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,EAAE,CAAC,SAAS,GAAG;YACb,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE,MAAM;SAClB,CAAC;QACF,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;;QAC9E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,EAAE,CAAC,SAAS,GAAG;YACb,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE,KAAK;SACjB,CAAC;QACF,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QAC/B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;;QAC9E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAW,IAAI,CAAA,yBAAyB,CAAC,CAAC;QAElE,EAAE,CAAC,SAAS,GAAG;YACb,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,KAAK;SACjB,CAAC;QACF,MAAM,EAAE,CAAC,cAAc,CAAC;QAExB,MAAM,QAAQ,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC5D,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAErE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,8DAA8D;QACjG,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { ItemTile } from '../../../src/tiles/grid/item-tile';\n\nimport '../../../src/tiles/grid/item-tile';\n\ndescribe('Item Tile', () => {\n  it('should render initial component', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const itemTitle = el.shadowRoot?.querySelector('#title');\n    const imageBlock = el.shadowRoot?.querySelector('image-block');\n\n    expect(itemInfo).to.exist;\n    expect(imageBlock).to.exist;\n    expect(itemTitle).to.exist;\n  });\n\n  it('should render with created-by element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.exist;\n    expect(dateSortedBy).to.not.exist;\n  });\n\n  it('should not render with created-by but date element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'date',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but reviewdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'reviewdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should not render with created-by but publicdate element', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'publicdate',\n      direction: 'desc',\n    };\n    await el.updateComplete;\n\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sorting not related to date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'addeddate',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(createdBy).to.not.exist;\n    expect(dateSortedBy).to.exist;\n  });\n\n  it('should render with created-by when sort field id not like date', async () => {\n    const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);\n\n    el.sortParam = {\n      field: 'week',\n      direction: 'asc',\n    };\n    await el.updateComplete;\n\n    const itemInfo = el.shadowRoot?.querySelector('.item-info');\n    const createdBy = el.shadowRoot?.querySelector('.created-by');\n    const dateSortedBy = el.shadowRoot?.querySelector('.date-sorted-by');\n\n    expect(itemInfo).to.exist;\n    expect(dateSortedBy).to.not.exist; // it should be exist because this is not related to date sort\n    expect(createdBy).to.exist;\n  });\n});\n"]}

package/dist/test/utils/format-count.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils/format-count.test.js

@@ -0,0 +1,24 @@
+import { expect } from '@open-wc/testing';
+import { formatCount } from '../../src/utils/format-count';
+const testCount = 805342;
+describe('formatCount', () => {
+    it('returns blank when undefined number', () => {
+        expect(formatCount(undefined)).to.equal('');
+    });
+    it('returns blank when negative number', () => {
+        expect(formatCount(testCount * -1)).to.equal('');
+    });
+    it('returns long number when no NumberFormat', () => {
+        expect(formatCount(testCount)).to.equal('805,342');
+    });
+    it('returns short number when short NumberFormat', () => {
+        expect(formatCount(testCount, 'short')).to.equal('805K');
+    });
+    it('returns decimal when value of significant digits < 10', () => {
+        expect(formatCount(testCount * 10, 'short', 'long')).to.equal('8.1 million');
+    });
+    it('returns locale formatted number', () => {
+        expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');
+    });
+});
+//# sourceMappingURL=format-count.test.js.map

package/dist/test/utils/format-count.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-count.test.js","sourceRoot":"","sources":["../../../test/utils/format-count.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAE3D,MAAM,SAAS,GAAG,MAAM,CAAC;AAEzB,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,GAAG,EAAE;QAClD,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAC3D,aAAa,CACd,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,CAAC,WAAW,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { formatCount } from '../../src/utils/format-count';\n\nconst testCount = 805342;\n\ndescribe('formatCount', () => {\n  it('returns blank when undefined number', () => {\n    expect(formatCount(undefined)).to.equal('');\n  });\n\n  it('returns blank when negative number', () => {\n    expect(formatCount(testCount * -1)).to.equal('');\n  });\n\n  it('returns long number when no NumberFormat', () => {\n    expect(formatCount(testCount)).to.equal('805,342');\n  });\n\n  it('returns short number when short NumberFormat', () => {\n    expect(formatCount(testCount, 'short')).to.equal('805K');\n  });\n\n  it('returns decimal when value of significant digits < 10', () => {\n    expect(formatCount(testCount * 10, 'short', 'long')).to.equal(\n      '8.1 million'\n    );\n  });\n\n  it('returns locale formatted number', () => {\n    expect(formatCount(testCount, 'long', 'long', 'de-DE')).to.equal('805.342');\n  });\n});\n"]}

package/dist/test/utils/format-date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/utils/format-date.test.js

@@ -0,0 +1,18 @@
+import { expect } from '@open-wc/testing';
+import { formatDate } from '../../src/utils/format-date';
+const testDate = new Date(Date.UTC(2020, 11, 9));
+describe('formatDate', () => {
+    it('returns blank when undefined date', () => {
+        expect(formatDate(undefined)).to.equal('');
+    });
+    it('returns short date when no DateFormat', () => {
+        expect(formatDate(testDate)).to.equal('Dec 2020');
+    });
+    it('returns long date when long DateFormat', () => {
+        expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');
+    });
+    it('returns locale formatted date', () => {
+        expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');
+    });
+});
+//# sourceMappingURL=format-date.test.js.map

package/dist/test/utils/format-date.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-date.test.js","sourceRoot":"","sources":["../../../test/utils/format-date.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAEjD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,mCAAmC,EAAE,GAAG,EAAE;QAC3C,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACpD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,GAAG,EAAE;QAChD,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { formatDate } from '../../src/utils/format-date';\n\nconst testDate = new Date(Date.UTC(2020, 11, 9));\n\ndescribe('formatDate', () => {\n  it('returns blank when undefined date', () => {\n    expect(formatDate(undefined)).to.equal('');\n  });\n\n  it('returns short date when no DateFormat', () => {\n    expect(formatDate(testDate)).to.equal('Dec 2020');\n  });\n\n  it('returns long date when long DateFormat', () => {\n    expect(formatDate(testDate, 'long')).to.equal('Dec 09, 2020');\n  });\n\n  it('returns locale formatted date', () => {\n    expect(formatDate(testDate, 'long', 'de-DE')).to.equal('09. Dez. 2020');\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.12",
+  "version": "0.2.14-alpha.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
     "deploy": "yarn run deploy:run -e $(git branch --show-current)",
     "deploy:run": "yarn run prepare:ghpages && touch ghpages/.nojekyll && yarn run deploy:gh",
-    "deploy:gh": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\""
+    "deploy:gh": "gh-pages -t -d ghpages -m \"Build for $(git log --pretty=format:\"%h %an %ai %s\" -n1) [skip ci]\"",
+    "typecheck": "yarn tsc --noEmit"
   },
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/collection-browser.ts

@@ -21,7 +21,7 @@ import type {
   SortDirection,
   SortParam,
 } from '@internetarchive/search-service';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
@@ -49,7 +49,7 @@ import {
 } from './restoration-state-handler';
 import chevronIcon from './assets/img/icons/chevron';
 import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
-import { PlaceholderType } from './empty-placeholder';
+import type { PlaceholderType } from './empty-placeholder';
 import './empty-placeholder';
 
 @customElement('collection-browser')

package/src/collection-facets.ts

@@ -9,11 +9,11 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { Aggregation, Bucket } from '@internetarchive/search-service';
+import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import '@internetarchive/collection-name-cache';
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import eyeIcon from './assets/img/icons/eye';
 import eyeClosedIcon from './assets/img/icons/eye-closed';
 import chevronIcon from './assets/img/icons/chevron';
@@ -24,7 +24,7 @@ import {
   FacetBucket,
   defaultSelectedFacets,
 } from './models';
-import { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
+import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
 
 const facetDisplayOrder: FacetOption[] = [
   'mediatype',

package/src/models.ts

@@ -47,7 +47,8 @@ export type CollectionBrowserContext = 'collection' | 'search';
  */
 export enum SortField {
   'relevance' = 'relevance',
-  'views' = 'views',
+  'alltimeview' = 'alltimeview',
+  'weeklyview' = 'weeklyview',
   'title' = 'title',
   'datearchived' = 'datearchived',
   'date' = 'date',
@@ -60,6 +61,7 @@ export enum SortField {
  * The metadata fields we sort by that map to the SortFields above
  */
 export type MetadataSortField =
+  | 'downloads'
   | 'week'
   | 'titleSorter'
   | 'date'
@@ -72,7 +74,8 @@ export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
   relevance: 'Relevance',
-  views: 'Views',
+  alltimeview: 'All-time Views',
+  weeklyview: 'Weekly Views',
   title: 'Title',
   datearchived: 'Date Archived',
   date: 'Date Published',
@@ -88,7 +91,8 @@ export const SortFieldToMetadataField: {
   [key in SortField]: MetadataSortField | null;
 } = {
   relevance: null,
-  views: 'week',
+  alltimeview: 'downloads',
+  weeklyview: 'week',
   title: 'titleSorter',
   datearchived: 'publicdate',
   date: 'date',
@@ -103,13 +107,14 @@ export const SortFieldToMetadataField: {
 export const MetadataFieldToSortField: {
   [key in MetadataSortField]: SortField;
 } = {
+  week: SortField.weeklyview,
+  downloads: SortField.alltimeview,
   titleSorter: SortField.title,
   date: SortField.date,
   publicdate: SortField.datearchived,
   reviewdate: SortField.datereviewed,
   addeddate: SortField.dateadded,
   creatorSorter: SortField.creator,
-  week: SortField.views,
 };
 
 export type FacetOption =

package/src/restoration-state-handler.ts

@@ -1,4 +1,4 @@
-import { SortDirection, SortParam } from '@internetarchive/search-service';
+import type { SortDirection, SortParam } from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
   MetadataFieldToSortField,

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
@@ -48,6 +48,8 @@ export class SortFilterBar
 
   @state() dateSortSelectorVisible = false;
 
+  @state() viewSortSelectorVisible = false;
+
   @state() desktopSelectorBarWidth = 0;
 
   @state() selectorBarContainerWidth = 0;
@@ -76,6 +78,9 @@ export class SortFilterBar
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </div>
 
+        ${this.viewSortSelectorVisible && !this.mobileSelectorVisible
+          ? this.viewSortSelector
+          : nothing}
         ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
           ? this.dateSortSelector
           : nothing}
@@ -103,7 +108,10 @@ export class SortFilterBar
       this.alphaSelectorVisible = 'creator';
     }
 
-    if (changed.has('dateSortSelectorVisible')) {
+    if (
+      changed.has('dateSortSelectorVisible') ||
+      changed.has('viewSortSelectorVisible')
+    ) {
       this.setupEscapeListeners();
     }
 
@@ -117,21 +125,22 @@ export class SortFilterBar
   }
 
   private setupEscapeListeners() {
-    if (this.dateSortSelectorVisible) {
+    if (this.dateSortSelectorVisible || this.viewSortSelectorVisible) {
       document.addEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     }
   }
 
-  private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {
+  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
+      this.viewSortSelectorVisible = false;
       this.dateSortSelectorVisible = false;
     }
   };
@@ -235,13 +244,30 @@ export class SortFilterBar
             ? this.getSortDisplayOption(SortField.relevance)
             : nothing}
         </li>
-        <li>${this.getSortDisplayOption(SortField.views)}</li>
+        <li>
+          ${this.getSortDisplayOption(SortField.weeklyview, {
+            clickEvent: () => {
+              if (!this.viewOptionSelected)
+                this.setSelectedSort(SortField.weeklyview);
+              this.viewSortSelectorVisible = !this.viewSortSelectorVisible;
+              this.dateSortSelectorVisible = false;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
+            },
+            displayName: html`${this.viewSortField}`,
+            isSelected: () => this.viewOptionSelected,
+          })}
+        </li>
         <li>
           ${this.getSortDisplayOption(SortField.title, {
             clickEvent: () => {
               this.alphaSelectorVisible = 'title';
               this.selectedCreatorFilter = null;
               this.dateSortSelectorVisible = false;
+              this.viewSortSelectorVisible = false;
               this.setSelectedSort(SortField.title);
               this.emitCreatorLetterChangedEvent();
             },
@@ -253,6 +279,7 @@ export class SortFilterBar
               if (!this.dateOptionSelected)
                 this.setSelectedSort(SortField.date);
               this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+              this.viewSortSelectorVisible = false;
               this.alphaSelectorVisible = null;
               this.selectedTitleFilter = null;
               this.selectedCreatorFilter = null;
@@ -366,7 +393,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="grid-button"
+            id="list-detail-button"
             @click=${() => {
               this.displayMode = 'list-detail';
             }}
@@ -378,7 +405,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="list-button"
+            id="list-compact-button"
             @click=${() => {
               this.displayMode = 'list-compact';
             }}
@@ -414,6 +441,26 @@ export class SortFilterBar
     `;
   }
 
+  private get viewSortSelector() {
+    return html`
+      <div
+        id="view-sort-selector-backdrop"
+        @keyup=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+        @click=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+      ></div>
+      <div id="view-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.alltimeview)}</li>
+          <li>${this.getDateSortButton(SortField.weeklyview)}</li>
+        </ul>
+      </div>
+    `;
+  }
+
   private getDateSortButton(sortField: SortField) {
     return html`
       <button
@@ -429,6 +476,7 @@ export class SortFilterBar
 
   private selectDateSort(sortField: SortField) {
     this.dateSortSelectorVisible = false;
+    this.viewSortSelectorVisible = false;
     this.setSelectedSort(sortField);
   }
 
@@ -462,6 +510,24 @@ export class SortFilterBar
     return dateSortFields.includes(this.selectedSort);
   }
 
+  /**
+   * There are two view sort options.
+   *
+   * This checks to see if the current sort is one of them.
+   *
+   * @readonly
+   * @private
+   * @type {boolean}
+   * @memberof SortFilterBar
+   */
+  private get viewOptionSelected(): boolean {
+    const viewSortFields: SortField[] = [
+      SortField.alltimeview,
+      SortField.weeklyview,
+    ];
+    return viewSortFields.includes(this.selectedSort);
+  }
+
   /**
    * The display name of the current date field
    *
@@ -478,6 +544,22 @@ export class SortFilterBar
     return name;
   }
 
+  /**
+   * The display name of the current view field
+   *
+   * @readonly
+   * @private
+   * @type {string}
+   * @memberof SortFilterBar
+   */
+  private get viewSortField(): string {
+    const defaultSort = SortFieldDisplayName[SortField.weeklyview];
+    const name = this.viewOptionSelected
+      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
+      : defaultSort;
+    return name;
+  }
+
   private get titleSelectorBar() {
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
@@ -607,7 +689,8 @@ export class SortFilterBar
       cursor: default;
     }
 
-    #date-sort-selector {
+    #date-sort-selector,
+    #view-sort-selector {
       position: absolute;
       left: 150px;
       top: 45px;
@@ -619,7 +702,8 @@ export class SortFilterBar
       border: 1px solid #404142;
     }
 
-    #date-sort-selector button {
+    #date-sort-selector button,
+    #view-sort-selector button {
       background: none;
       border-radius: 15px;
       color: #404142;
@@ -632,7 +716,8 @@ export class SortFilterBar
       padding: 0.5rem 1.2rem;
     }
 
-    #date-sort-selector button.selected {
+    #date-sort-selector button.selected,
+    #view-sort-selector button.selected {
       background-color: #404142;
       color: white;
     }
@@ -679,7 +764,8 @@ export class SortFilterBar
       display: none;
     }
 
-    #date-sort-selector-backdrop {
+    #date-sort-selector-backdrop,
+    #view-sort-selector-backdrop {
       position: fixed;
       top: 0;
       left: 0;

package/src/tiles/grid/account-tile.ts

@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 import './tile-stats';
 

package/src/tiles/grid/collection-tile.ts

@@ -2,7 +2,7 @@ import { msg } from '@lit/localize';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {

package/src/tiles/grid/item-tile.ts

@@ -2,10 +2,10 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 
 import { formatDate } from '../../utils/format-date';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 import '../image-block';
 import '../item-image';

package/src/tiles/image-block.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 import './overlay/icon-overlay';
 import './overlay/text-overlay';

package/src/tiles/item-image.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 import {
   baseItemImageStyles,

package/src/tiles/list/tile-list-compact-header.ts

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import { dateLabel } from './date-label';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('tile-list-compact-header')
 export class TileListCompactHeader extends LitElement {

package/src/tiles/list/tile-list-compact.ts

@@ -1,9 +1,9 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
 
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 import { accountLabel } from './account-label';

package/src/tiles/list/tile-list.ts

@@ -10,14 +10,14 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { customElement, property, state } from 'lit/decorators.js';
-
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
 
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+
 import { dateLabel } from './date-label';
 import { accountLabel } from './account-label';
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 

package/src/tiles/tile-dispatcher.ts

@@ -1,12 +1,12 @@
 import { css, html, LitElement, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import type { TileDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';

package/test/collection-browser.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { CollectionBrowser } from '../src/collection-browser';
+import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';

package/test/empty-placeholder.test.ts

@@ -1,9 +1,10 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { EmptyPlaceholder } from '../src/empty-placeholder';
 import '../src/empty-placeholder';
 
+import type { EmptyPlaceholder } from '../src/empty-placeholder';
+
 describe('Empty Placeholder', () => {
   it('should render with empty-query placeholder', async () => {
     const el = await fixture<EmptyPlaceholder>(

package/test/icon-overlay.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { IconOverlay } from '../src/tiles/overlay/icon-overlay';
+import type { IconOverlay } from '../src/tiles/overlay/icon-overlay';
 
 import '../src/tiles/overlay/icon-overlay';
 

package/test/item-image.test.ts

@@ -2,8 +2,8 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 
-import { TileModel } from '../src/models';
-import { ItemImage } from '../src/tiles/item-image';
+import type { TileModel } from '../src/models';
+import type { ItemImage } from '../src/tiles/item-image';
 
 import '../src/tiles/item-image';
 

package/test/mocks/mock-collection-name-cache.ts

@@ -1,4 +1,4 @@
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 
 export class MockCollectionNameCache implements CollectionNameCacheInterface {
   collectionNamesRequested: string[] = [];

package/test/mocks/mock-search-responses.ts

@@ -1,4 +1,4 @@
-import { Result } from '@internetarchive/result-type';
+import type { Result } from '@internetarchive/result-type';
 import {
   Metadata,
   SearchResponse,

package/test/mocks/mock-search-service.ts

@@ -1,5 +1,5 @@
-import { Result } from '@internetarchive/result-type';
-import {
+import type { Result } from '@internetarchive/result-type';
+import type {
   MetadataResponse,
   SearchParams,
   SearchResponse,