@internetarchive/collection-browser 0.2.11 → 0.2.12

package/src/tiles/tile-dispatcher.ts

@@ -43,6 +43,8 @@ export class TileDispatcher
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) loggedIn = false;
+
   render() {
     return html`
       <div id="container">
@@ -146,7 +148,8 @@ export class TileDispatcher
               .model=${model}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
-            ></account-tile>`;
+            >
+            </account-tile>`;
           default:
             return html`<item-tile
               .model=${model}
@@ -155,7 +158,9 @@ export class TileDispatcher
               .collectionNameCache=${this.collectionNameCache}
               .baseImageUrl=${this.baseImageUrl}
               .sortParam=${sortParam}
-            ></item-tile>`;
+              .loggedIn=${this.loggedIn}
+            >
+            </item-tile>`;
         }
       case 'list-compact':
         return html`<tile-list-compact
@@ -166,7 +171,9 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-        ></tile-list-compact>`;
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list-compact>`;
       case 'list-detail':
         return html`<tile-list
           .model=${model}
@@ -177,7 +184,9 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-        ></tile-list>`;
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list>`;
       default:
         return nothing;
     }

package/test/icon-overlay.test.ts

@@ -0,0 +1,41 @@
+/* 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 '../src/tiles/overlay/icon-overlay';
+
+describe('Icon Overlay component', () => {
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${true}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Log in to view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${false}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${true} .loginRequired=${true}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+});

package/test/item-image.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { TileModel } from '../src/models';
+import { ItemImage } from '../src/tiles/item-image';
+
+import '../src/tiles/item-image';
+
+const baseImageUrl = 'https://archive.org';
+const testBookModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: '18730130BloomfieldRecordCompleteIssue',
+  itemCount: 0,
+  mediatype: 'texts',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+const testAudioModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: 'dwd2015-01-24',
+  itemCount: 0,
+  mediatype: 'audio',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+describe('ItemImage component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const imgClassName = dropShadow?.querySelector('img')?.className;
+
+    expect(dropShadow).to.exist;
+    expect(imgClassName).to.eql(' contain ');
+  });
+
+  it('should render component if mediatype is waveform', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testAudioModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const image = dropShadow?.querySelector('img');
+    expect(dropShadow).to.exist;
+    expect(image).to.exist;
+
+    // simulate image onLoad event check if image className is waveform
+    setTimeout(() => {
+      const imgClassName = image?.className;
+      expect(imgClassName).to.eql(' waveform ');
+    }, 1000);
+  });
+});

package/test/text-overlay.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import { TextOverlay } from '../src/tiles/overlay/text-overlay';
+
+import '../src/tiles/overlay/text-overlay';
+
+describe('Text Overlay component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+  });
+
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Log in\nto view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+});

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

@@ -10,11 +10,11 @@ describe('Item Tile', () => {
     const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
 
     const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
     const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
 
     expect(itemInfo).to.exist;
-    expect(itemImage).to.exist;
+    expect(imageBlock).to.exist;
     expect(itemTitle).to.exist;
   });
 

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-export { CollectionBrowser } from './src/collection-browser';
-export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
-export { CollectionDisplayMode } from './src/models';
-export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
-export { CollectionTile } from './src/tiles/grid/collection-tile';
-export { AccountTile } from './src/tiles/grid/account-tile';
-export { ItemTile } from './src/tiles/grid/item-tile';
-export { TileList } from './src/tiles/list/tile-list';
-export { TileListCompact } from './src/tiles/list/tile-list-compact';

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,6CAA6C,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["export { CollectionBrowser } from './src/collection-browser';\nexport { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';\nexport { CollectionDisplayMode } from './src/models';\nexport { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';\nexport { CollectionTile } from './src/tiles/grid/collection-tile';\nexport { AccountTile } from './src/tiles/grid/account-tile';\nexport { ItemTile } from './src/tiles/grid/item-tile';\nexport { TileList } from './src/tiles/list/tile-list';\nexport { TileListCompact } from './src/tiles/list/tile-list-compact';\n"]}

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

@@ -1,32 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-import '../src/collection-browser';
-export declare class AppRoot extends LitElement {
-    private searchService;
-    private resizeObserver;
-    private localCache;
-    private collectionNameCache;
-    private currentPage?;
-    private searchQuery?;
-    private cellWidth;
-    private cellHeight;
-    private rowGap;
-    private colGap;
-    private loggedIn;
-    private baseQueryField;
-    private pageNumberInput;
-    private collectionBrowser;
-    private searchPressed;
-    private changePagePressed;
-    protected updated(changed: PropertyValues): void;
-    private queryUpdated;
-    render(): import("lit-html").TemplateResult<1>;
-    private baseQueryChanged;
-    private loginChanged;
-    private outlineChanged;
-    private rowGapChanged;
-    private colGapChanged;
-    private widthChanged;
-    private heightChanged;
-    private visiblePageChanged;
-    static styles: import("lit").CSSResult;
-}

package/dist/src/app-root.js

@@ -1,285 +0,0 @@
-import { __decorate } from "tslib";
-import { SearchService } from '@internetarchive/search-service';
-import { LocalCache } from '@internetarchive/local-cache';
-import { html, css, LitElement } 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 '../src/collection-browser';
-let AppRoot = class AppRoot extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.searchService = SearchService.default;
-        this.resizeObserver = new SharedResizeObserver();
-        this.localCache = new LocalCache();
-        this.collectionNameCache = new CollectionNameCache({
-            searchService: this.searchService,
-            localCache: this.localCache,
-        });
-        this.cellWidth = 18;
-        this.cellHeight = 29;
-        this.rowGap = 1.7;
-        this.colGap = 1.7;
-        this.loggedIn = false;
-    }
-    searchPressed(e) {
-        var _a, _b;
-        e.preventDefault();
-        this.searchQuery = this.baseQueryField.value;
-        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
-            this.collectionBrowser.goToPage((_b = this.currentPage) !== null && _b !== void 0 ? _b : 1);
-        }
-    }
-    changePagePressed(e) {
-        e.preventDefault();
-        this.currentPage = this.pageNumberInput.valueAsNumber;
-        this.collectionBrowser.goToPage(this.currentPage);
-    }
-    updated(changed) {
-        if (changed.has('currentPage') && this.currentPage) {
-            this.pageNumberInput.value = this.currentPage.toString();
-        }
-        if (changed.has('searchQuery')) {
-            this.queryUpdated();
-        }
-    }
-    queryUpdated() {
-        this.collectionBrowser.baseQuery = this.searchQuery;
-    }
-    render() {
-        var _a;
-        return html `
-      <div id="dev-tools">
-        <form @submit=${this.searchPressed}>
-          Query:
-          <input
-            type="text"
-            id="base-query-field"
-            .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
-          />
-          <input type="submit" value="Search" />
-        </form>
-
-        <form @submit=${this.changePagePressed}>
-          Page: <input type="number" value="1" id="page-number-input" />
-          <input type="submit" value="Go" />
-        </form>
-
-        <div id="cell-controls">
-          <div id="cell-size-control">
-            <div>
-              <label for="cell-width-slider">Minimum cell width:</label>
-              <input
-                type="range"
-                min="10"
-                max="100"
-                value="18"
-                step="0.1"
-                id="cell-width-slider"
-                @input=${this.widthChanged}
-              />
-              <span>${this.cellWidth}rem</span>
-            </div>
-            <div>
-              <label for="cell-height-slider">Cell height:</label>
-              <input
-                type="range"
-                min="10"
-                max="100"
-                value="29"
-                step="0.1"
-                id="cell-height-slider"
-                @input=${this.heightChanged}
-              />
-              <span>${this.cellHeight}rem</span>
-            </div>
-            <div>
-              <label for="show-outline-check">Show outlines:</label>
-              <input
-                type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
-              />
-            </div>
-            <div>
-              <label for="simulate-login">Simulate Login:</label>
-              <input
-                type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
-              />
-            </div>
-          </div>
-          <div id="cell-gap-control">
-            <div>
-              <label for="cell-row-gap-slider">Row gap:</label>
-              <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-row-gap-slider"
-                @input=${this.rowGapChanged}
-              />
-              <span>${this.rowGap}rem</span>
-            </div>
-            <div>
-              <label for="cell-col-gap-slider">Col gap:</label>
-              <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-col-gap-slider"
-                @input=${this.colGapChanged}
-              />
-              <span>${this.colGap}rem</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div id="collection-browser-container">
-        <collection-browser
-          .baseNavigationUrl=${'https://archive.org'}
-          .baseImageUrl=${'https://archive.org'}
-          .searchService=${this.searchService}
-          .resizeObserver=${this.resizeObserver}
-          .collectionNameCache=${this.collectionNameCache}
-          .showHistogramDatePicker=${true}
-          .loggedIn=${this.loggedIn}
-          @visiblePageChanged=${this.visiblePageChanged}
-          @baseQueryChanged=${this.baseQueryChanged}
-        >
-        </collection-browser>
-      </div>
-    `;
-    }
-    baseQueryChanged(e) {
-        this.searchQuery = e.detail.baseQuery;
-    }
-    loginChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.loggedIn = true;
-        }
-        else {
-            this.loggedIn = false;
-        }
-    }
-    outlineChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.collectionBrowser.style.setProperty('--infiniteScrollerCellOutline', '1px solid #33D1FF');
-        }
-        else {
-            this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
-        }
-    }
-    rowGapChanged(e) {
-        const input = e.target;
-        this.rowGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserRowGap', `${input.value}rem`);
-    }
-    colGapChanged(e) {
-        const input = e.target;
-        this.colGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserColGap', `${input.value}rem`);
-    }
-    widthChanged(e) {
-        const input = e.target;
-        this.cellWidth = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinWidth', `${input.value}rem`);
-    }
-    heightChanged(e) {
-        const input = e.target;
-        this.cellHeight = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinHeight', `${input.value}rem`);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMaxHeight', `${input.value}rem`);
-    }
-    visiblePageChanged(e) {
-        const { pageNumber } = e.detail;
-        if (pageNumber === this.currentPage)
-            return;
-        this.currentPage = pageNumber;
-    }
-};
-AppRoot.styles = css `
-    :host {
-      display: block;
-    }
-
-    input,
-    button {
-      font-size: 1.6rem;
-    }
-
-    collection-browser {
-      margin-top: 30rem;
-    }
-
-    #base-query-field {
-      width: 300px;
-    }
-
-    #dev-tools {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 10;
-      -webkit-backdrop-filter: blur(10px);
-      backdrop-filter: blur(10px);
-      padding: 0.5rem 1rem;
-      border: 1px solid black;
-    }
-
-    #cell-controls {
-      display: flex;
-    }
-
-    #cell-controls label {
-      display: inline-block;
-      width: 10rem;
-    }
-
-    #cell-gap-control {
-      margin-left: 1rem;
-    }
-  `;
-__decorate([
-    state()
-], AppRoot.prototype, "currentPage", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "searchQuery", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellWidth", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellHeight", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "rowGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "colGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "loggedIn", void 0);
-__decorate([
-    query('#base-query-field')
-], AppRoot.prototype, "baseQueryField", void 0);
-__decorate([
-    query('#page-number-input')
-], AppRoot.prototype, "pageNumberInput", void 0);
-__decorate([
-    query('collection-browser')
-], AppRoot.prototype, "collectionBrowser", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
-//# sourceMappingURL=app-root.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\n    }\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}

package/dist/src/assets/img/icons/chevron.d.ts

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

package/dist/src/assets/img/icons/chevron.js

@@ -1,4 +0,0 @@
-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"/></svg>
-`;
-//# sourceMappingURL=chevron.js.map

package/dist/src/assets/img/icons/chevron.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chevron.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/chevron.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;CACjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport 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\"/></svg>\n`;\n"]}

package/dist/src/assets/img/icons/empty-query.d.ts

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