@internetarchive/collection-browser 0.0.1-alpha.3 → 0.0.1-alpha.30

package/demo/app-root.ts

@@ -1,28 +1,31 @@
-import { SearchService } from '@internetarchive/search-service';
+import { DefaultSearchBackend, SearchService } from '@internetarchive/search-service';
+import { LocalCache } from '@internetarchive/local-cache';
 import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
-import {
-  SortDirection,
-  SortParam,
-} from '@internetarchive/search-service/dist/src/search-params';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { CollectionNameCache } from '@internetarchive/collection-name-cache';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
-import { CollectionDisplayMode } from '../src/models';
-import { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
-  private searchService = SearchService.default;
+  private searchService = new SearchService(new DefaultSearchBackend({
+    baseUrl: 'ia-petabox-offshoot-search.archive.org',
+  }));
 
   private resizeObserver = new SharedResizeObserver();
 
+  private localCache = new LocalCache();
+
+  private collectionNameCache = new CollectionNameCache({
+    searchService: this.searchService,
+    localCache: this.localCache,
+  });
+
   @state() private currentPage?: number;
 
   @state() private searchQuery?: string;
 
-  @state() private sortParam?: SortParam;
-
   @state() private cellWidth: number = 18;
 
   @state() private cellHeight: number = 29;
@@ -37,8 +40,6 @@ export class AppRoot extends LitElement {
 
   @query('collection-browser') private collectionBrowser!: CollectionBrowser;
 
-  @query('sort-filter-bar') private sortFilterBar!: SortFilterBar;
-
   private searchPressed(e: Event) {
     e.preventDefault();
     this.searchQuery = this.baseQueryField.value;
@@ -54,90 +55,18 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.goToPage(this.currentPage);
   }
 
-  protected firstUpdated(): void {
-    this.loadStateFromUrl();
-  }
-
   protected updated(changed: PropertyValues): void {
     if (changed.has('currentPage') && this.currentPage) {
       this.pageNumberInput.value = this.currentPage.toString();
-      this.updateUrl();
     }
 
     if (changed.has('searchQuery')) {
       this.queryUpdated();
     }
-
-    if (changed.has('sortParam')) {
-      this.sortParamUpdated();
-    }
-  }
-
-  private loadStateFromUrl() {
-    const url = new URL(window.location.href);
-    const pageNumber = url.searchParams.get('page');
-    const searchQuery = url.searchParams.get('query');
-    const sortQuery = url.searchParams.get('sort');
-    if (pageNumber) {
-      const parsed = parseInt(pageNumber, 10);
-      this.currentPage = parsed;
-      if (parsed > 1) {
-        this.collectionBrowser.goToPage(parsed);
-      }
-    } else {
-      this.currentPage = 1;
-    }
-    if (searchQuery) {
-      this.searchQuery = searchQuery;
-    } else {
-      this.searchQuery = 'collection:etree';
-    }
-    if (sortQuery) {
-      const [field, direction] = sortQuery.split(' ');
-      this.sortParam = new SortParam(field, direction as SortDirection);
-    } else {
-      this.sortParam = new SortParam('date', 'desc');
-    }
   }
 
   private queryUpdated() {
     this.collectionBrowser.baseQuery = this.searchQuery;
-    this.updateUrl();
-  }
-
-  private sortParamUpdated() {
-    if (!this.sortParam) return;
-    this.collectionBrowser.sortParam = this.sortParam;
-    this.sortFilterBar.sortDirection = this.sortParam.direction;
-    this.updateUrl();
-  }
-
-  private updateUrl() {
-    const url = new URL(window.location.href);
-    if (this.sortParam) {
-      url.searchParams.set('sort', this.sortParam.asString);
-    }
-
-    if (this.searchQuery) {
-      url.searchParams.set('query', this.searchQuery);
-    }
-
-    if (this.currentPage) {
-      if (this.currentPage > 1) {
-        url.searchParams.set('page', this.currentPage.toString());
-      } else {
-        url.searchParams.delete('page');
-      }
-    }
-
-    window.history.pushState(
-      {
-        page: this.currentPage,
-        query: this.searchQuery,
-      },
-      '',
-      url.toString()
-    );
   }
 
   render() {
@@ -145,7 +74,11 @@ export class AppRoot extends LitElement {
       <div id="dev-tools">
         <form @submit=${this.searchPressed}>
           Query:
-          <input type="text" id="base-query-field" .value=${this.searchQuery} />
+          <input
+            type="text"
+            id="base-query-field"
+            .value=${this.searchQuery ?? ''}
+          />
           <input type="submit" value="Search" />
         </form>
 
@@ -163,13 +96,6 @@ export class AppRoot extends LitElement {
           Toggle Delete Mode
         </button>
 
-        <sort-filter-bar
-          @sortChanged=${this.sortChanged}
-          @displayModeChanged=${this.displayModeChanged}
-          @titleLetterChanged=${this.titleLetterChanged}
-          @creatorLetterChanged=${this.creatorLetterChanged}
-        ></sort-filter-bar>
-
         <div id="cell-controls">
           <div id="cell-size-control">
             <div>
@@ -238,14 +164,16 @@ export class AppRoot extends LitElement {
         </div>
       </div>
 
-      <collection-browser
-        .baseNavigationUrl=${'https://archive.org'}
-        .searchService=${this.searchService}
-        .additionalQueryClause=${this.sortFilterQueries}
-        .resizeObserver=${this.resizeObserver}
-        @visiblePageChanged=${this.visiblePageChanged}
-      >
-      </collection-browser>
+      <div id="collection-browser-container">
+        <collection-browser
+          .baseNavigationUrl=${'https://archive.org'}
+          .searchService=${this.searchService}
+          .resizeObserver=${this.resizeObserver}
+          .collectionNameCache=${this.collectionNameCache}
+          @visiblePageChanged=${this.visiblePageChanged}
+        >
+        </collection-browser>
+      </div>
     `;
   }
 
@@ -263,25 +191,6 @@ export class AppRoot extends LitElement {
     }
   }
 
-  private titleSelectorVisibilityChanged(e: CustomEvent<{ visible: boolean }>) {
-    console.debug('titleSelectorVisibleChanged', e.detail);
-    if (e.detail.visible) {
-      this.sortParam = new SortParam('titleSorter', 'asc');
-    }
-  }
-
-  private sortByViewsPressed() {
-    this.sortParam = new SortParam('week', 'desc');
-  }
-
-  private creatorSelectorVisibilityChanged(
-    e: CustomEvent<{ visible: boolean }>
-  ) {
-    if (e.detail.visible) {
-      this.sortParam = new SortParam('creatorSorter', 'asc');
-    }
-  }
-
   private rowGapChanged(e: Event) {
     const input = e.target as HTMLInputElement;
     this.rowGap = parseFloat(input.value);
@@ -328,47 +237,6 @@ export class AppRoot extends LitElement {
     this.currentPage = pageNumber;
   }
 
-  private sortChanged(e: CustomEvent<{ sort: SortParam }>) {
-    this.sortParam = e.detail.sort;
-    if ((this.currentPage ?? 1) > 1) {
-      this.collectionBrowser.goToPage(1);
-    }
-    this.currentPage = 1;
-  }
-
-  private displayModeChanged(
-    e: CustomEvent<{ displayMode: CollectionDisplayMode }>
-  ) {
-    this.collectionBrowser.displayMode = e.detail.displayMode;
-  }
-
-  @state() titleQuery?: string;
-
-  @state() creatorQuery?: string;
-
-  private get sortFilterQueries(): string {
-    const queries = [this.titleQuery, this.creatorQuery];
-    return queries.filter(q => q).join(' AND ');
-  }
-
-  private titleLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
-    const letter = e.detail.selectedLetter;
-    if (letter) {
-      this.titleQuery = `firstTitle:${letter}`;
-    } else {
-      this.titleQuery = undefined;
-    }
-  }
-
-  private creatorLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
-    const letter = e.detail.selectedLetter;
-    if (letter) {
-      this.creatorQuery = `firstCreator:${letter}`;
-    } else {
-      this.creatorQuery = undefined;
-    }
-  }
-
   static styles = css`
     :host {
       display: block;

package/demo/index.html

@@ -13,8 +13,8 @@
       color: #2C2C2C;
     }
   </style>
-<script
-  src="https://polyfill.archive.org/v3/polyfill.min.js?features=scrollIntoView%2CElement.prototype.scrollIntoView"></script>
+<!-- <script
+  src="https://polyfill.archive.org/v3/polyfill.min.js?features=scrollIntoView%2CElement.prototype.scrollIntoView"></script> -->
 
 </head>
 <body>

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

@@ -3,9 +3,10 @@ import '../src/collection-browser';
 export declare class AppRoot extends LitElement {
     private searchService;
     private resizeObserver;
+    private localCache;
+    private collectionNameCache;
     private currentPage?;
     private searchQuery?;
-    private sortParam?;
     private cellWidth;
     private cellHeight;
     private rowGap;
@@ -13,31 +14,16 @@ export declare class AppRoot extends LitElement {
     private baseQueryField;
     private pageNumberInput;
     private collectionBrowser;
-    private sortFilterBar;
     private searchPressed;
     private changePagePressed;
-    protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
-    private loadStateFromUrl;
     private queryUpdated;
-    private sortParamUpdated;
-    private updateUrl;
     render(): import("lit-html").TemplateResult<1>;
     private outlineChanged;
-    private titleSelectorVisibilityChanged;
-    private sortByViewsPressed;
-    private creatorSelectorVisibilityChanged;
     private rowGapChanged;
     private colGapChanged;
     private widthChanged;
     private heightChanged;
     private visiblePageChanged;
-    private sortChanged;
-    private displayModeChanged;
-    titleQuery?: string;
-    creatorQuery?: string;
-    private get sortFilterQueries();
-    private titleLetterChanged;
-    private creatorLetterChanged;
     static styles: import("lit").CSSResult;
 }

package/dist/demo/app-root.js

@@ -1,15 +1,23 @@
 import { __decorate } from "tslib";
-import { SearchService } from '@internetarchive/search-service';
+import { DefaultSearchBackend, 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 { SortParam, } from '@internetarchive/search-service/dist/src/search-params';
 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.searchService = new SearchService(new DefaultSearchBackend({
+            baseUrl: 'ia-petabox-offshoot-search.archive.org',
+        }));
         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;
@@ -29,88 +37,28 @@ let AppRoot = class AppRoot extends LitElement {
         this.currentPage = this.pageNumberInput.valueAsNumber;
         this.collectionBrowser.goToPage(this.currentPage);
     }
-    firstUpdated() {
-        this.loadStateFromUrl();
-    }
     updated(changed) {
         if (changed.has('currentPage') && this.currentPage) {
             this.pageNumberInput.value = this.currentPage.toString();
-            this.updateUrl();
         }
         if (changed.has('searchQuery')) {
             this.queryUpdated();
         }
-        if (changed.has('sortParam')) {
-            this.sortParamUpdated();
-        }
-    }
-    loadStateFromUrl() {
-        const url = new URL(window.location.href);
-        const pageNumber = url.searchParams.get('page');
-        const searchQuery = url.searchParams.get('query');
-        const sortQuery = url.searchParams.get('sort');
-        if (pageNumber) {
-            const parsed = parseInt(pageNumber, 10);
-            this.currentPage = parsed;
-            if (parsed > 1) {
-                this.collectionBrowser.goToPage(parsed);
-            }
-        }
-        else {
-            this.currentPage = 1;
-        }
-        if (searchQuery) {
-            this.searchQuery = searchQuery;
-        }
-        else {
-            this.searchQuery = 'collection:etree';
-        }
-        if (sortQuery) {
-            const [field, direction] = sortQuery.split(' ');
-            this.sortParam = new SortParam(field, direction);
-        }
-        else {
-            this.sortParam = new SortParam('date', 'desc');
-        }
     }
     queryUpdated() {
         this.collectionBrowser.baseQuery = this.searchQuery;
-        this.updateUrl();
-    }
-    sortParamUpdated() {
-        if (!this.sortParam)
-            return;
-        this.collectionBrowser.sortParam = this.sortParam;
-        this.sortFilterBar.sortDirection = this.sortParam.direction;
-        this.updateUrl();
-    }
-    updateUrl() {
-        const url = new URL(window.location.href);
-        if (this.sortParam) {
-            url.searchParams.set('sort', this.sortParam.asString);
-        }
-        if (this.searchQuery) {
-            url.searchParams.set('query', this.searchQuery);
-        }
-        if (this.currentPage) {
-            if (this.currentPage > 1) {
-                url.searchParams.set('page', this.currentPage.toString());
-            }
-            else {
-                url.searchParams.delete('page');
-            }
-        }
-        window.history.pushState({
-            page: this.currentPage,
-            query: this.searchQuery,
-        }, '', url.toString());
     }
     render() {
+        var _a;
         return html `
       <div id="dev-tools">
         <form @submit=${this.searchPressed}>
           Query:
-          <input type="text" id="base-query-field" .value=${this.searchQuery} />
+          <input
+            type="text"
+            id="base-query-field"
+            .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
+          />
           <input type="submit" value="Search" />
         </form>
 
@@ -128,13 +76,6 @@ let AppRoot = class AppRoot extends LitElement {
           Toggle Delete Mode
         </button>
 
-        <sort-filter-bar
-          @sortChanged=${this.sortChanged}
-          @displayModeChanged=${this.displayModeChanged}
-          @titleLetterChanged=${this.titleLetterChanged}
-          @creatorLetterChanged=${this.creatorLetterChanged}
-        ></sort-filter-bar>
-
         <div id="cell-controls">
           <div id="cell-size-control">
             <div>
@@ -203,14 +144,16 @@ let AppRoot = class AppRoot extends LitElement {
         </div>
       </div>
 
-      <collection-browser
-        .baseNavigationUrl=${'https://archive.org'}
-        .searchService=${this.searchService}
-        .additionalQueryClause=${this.sortFilterQueries}
-        .resizeObserver=${this.resizeObserver}
-        @visiblePageChanged=${this.visiblePageChanged}
-      >
-      </collection-browser>
+      <div id="collection-browser-container">
+        <collection-browser
+          .baseNavigationUrl=${'https://archive.org'}
+          .searchService=${this.searchService}
+          .resizeObserver=${this.resizeObserver}
+          .collectionNameCache=${this.collectionNameCache}
+          @visiblePageChanged=${this.visiblePageChanged}
+        >
+        </collection-browser>
+      </div>
     `;
     }
     outlineChanged(e) {
@@ -222,20 +165,6 @@ let AppRoot = class AppRoot extends LitElement {
             this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
         }
     }
-    titleSelectorVisibilityChanged(e) {
-        console.debug('titleSelectorVisibleChanged', e.detail);
-        if (e.detail.visible) {
-            this.sortParam = new SortParam('titleSorter', 'asc');
-        }
-    }
-    sortByViewsPressed() {
-        this.sortParam = new SortParam('week', 'desc');
-    }
-    creatorSelectorVisibilityChanged(e) {
-        if (e.detail.visible) {
-            this.sortParam = new SortParam('creatorSorter', 'asc');
-        }
-    }
     rowGapChanged(e) {
         const input = e.target;
         this.rowGap = parseFloat(input.value);
@@ -263,39 +192,6 @@ let AppRoot = class AppRoot extends LitElement {
             return;
         this.currentPage = pageNumber;
     }
-    sortChanged(e) {
-        var _a;
-        this.sortParam = e.detail.sort;
-        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
-            this.collectionBrowser.goToPage(1);
-        }
-        this.currentPage = 1;
-    }
-    displayModeChanged(e) {
-        this.collectionBrowser.displayMode = e.detail.displayMode;
-    }
-    get sortFilterQueries() {
-        const queries = [this.titleQuery, this.creatorQuery];
-        return queries.filter(q => q).join(' AND ');
-    }
-    titleLetterChanged(e) {
-        const letter = e.detail.selectedLetter;
-        if (letter) {
-            this.titleQuery = `firstTitle:${letter}`;
-        }
-        else {
-            this.titleQuery = undefined;
-        }
-    }
-    creatorLetterChanged(e) {
-        const letter = e.detail.selectedLetter;
-        if (letter) {
-            this.creatorQuery = `firstCreator:${letter}`;
-        }
-        else {
-            this.creatorQuery = undefined;
-        }
-    }
 };
 AppRoot.styles = css `
     :host {
@@ -345,9 +241,6 @@ __decorate([
 __decorate([
     state()
 ], AppRoot.prototype, "searchQuery", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "sortParam", void 0);
 __decorate([
     state()
 ], AppRoot.prototype, "cellWidth", void 0);
@@ -369,15 +262,6 @@ __decorate([
 __decorate([
     query('collection-browser')
 ], AppRoot.prototype, "collectionBrowser", void 0);
-__decorate([
-    query('sort-filter-bar')
-], AppRoot.prototype, "sortFilterBar", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "titleQuery", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "creatorQuery", void 0);
 AppRoot = __decorate([
     customElement('app-root')
 ], AppRoot);

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

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport {\n  SortDirection,\n  SortParam,\n} from '@internetarchive/search-service/dist/src/search-params';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\nimport { CollectionDisplayMode } from '../src/models';\nimport { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private sortParam?: SortParam;\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  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  @query('sort-filter-bar') private sortFilterBar!: SortFilterBar;\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    this.currentPage = 1;\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 firstUpdated(): void {\n    this.loadStateFromUrl();\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n      this.updateUrl();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n\n    if (changed.has('sortParam')) {\n      this.sortParamUpdated();\n    }\n  }\n\n  private loadStateFromUrl() {\n    const url = new URL(window.location.href);\n    const pageNumber = url.searchParams.get('page');\n    const searchQuery = url.searchParams.get('query');\n    const sortQuery = url.searchParams.get('sort');\n    if (pageNumber) {\n      const parsed = parseInt(pageNumber, 10);\n      this.currentPage = parsed;\n      if (parsed > 1) {\n        this.collectionBrowser.goToPage(parsed);\n      }\n    } else {\n      this.currentPage = 1;\n    }\n    if (searchQuery) {\n      this.searchQuery = searchQuery;\n    } else {\n      this.searchQuery = 'collection:etree';\n    }\n    if (sortQuery) {\n      const [field, direction] = sortQuery.split(' ');\n      this.sortParam = new SortParam(field, direction as SortDirection);\n    } else {\n      this.sortParam = new SortParam('date', 'desc');\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n    this.updateUrl();\n  }\n\n  private sortParamUpdated() {\n    if (!this.sortParam) return;\n    this.collectionBrowser.sortParam = this.sortParam;\n    this.sortFilterBar.sortDirection = this.sortParam.direction;\n    this.updateUrl();\n  }\n\n  private updateUrl() {\n    const url = new URL(window.location.href);\n    if (this.sortParam) {\n      url.searchParams.set('sort', this.sortParam.asString);\n    }\n\n    if (this.searchQuery) {\n      url.searchParams.set('query', this.searchQuery);\n    }\n\n    if (this.currentPage) {\n      if (this.currentPage > 1) {\n        url.searchParams.set('page', this.currentPage.toString());\n      } else {\n        url.searchParams.delete('page');\n      }\n    }\n\n    window.history.pushState(\n      {\n        page: this.currentPage,\n        query: this.searchQuery,\n      },\n      '',\n      url.toString()\n    );\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input type=\"text\" id=\"base-query-field\" .value=${this.searchQuery} />\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        <button\n          @click=${() => {\n            this.collectionBrowser.showDeleteButtons =\n              !this.collectionBrowser.showDeleteButtons;\n          }}\n        >\n          Toggle Delete Mode\n        </button>\n\n        <sort-filter-bar\n          @sortChanged=${this.sortChanged}\n          @displayModeChanged=${this.displayModeChanged}\n          @titleLetterChanged=${this.titleLetterChanged}\n          @creatorLetterChanged=${this.creatorLetterChanged}\n        ></sort-filter-bar>\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          <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      <collection-browser\n        .baseNavigationUrl=${'https://archive.org'}\n        .searchService=${this.searchService}\n        .additionalQueryClause=${this.sortFilterQueries}\n        .resizeObserver=${this.resizeObserver}\n        @visiblePageChanged=${this.visiblePageChanged}\n      >\n      </collection-browser>\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 titleSelectorVisibilityChanged(e: CustomEvent<{ visible: boolean }>) {\n    console.debug('titleSelectorVisibleChanged', e.detail);\n    if (e.detail.visible) {\n      this.sortParam = new SortParam('titleSorter', 'asc');\n    }\n  }\n\n  private sortByViewsPressed() {\n    this.sortParam = new SortParam('week', 'desc');\n  }\n\n  private creatorSelectorVisibilityChanged(\n    e: CustomEvent<{ visible: boolean }>\n  ) {\n    if (e.detail.visible) {\n      this.sortParam = new SortParam('creatorSorter', 'asc');\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  private sortChanged(e: CustomEvent<{ sort: SortParam }>) {\n    this.sortParam = e.detail.sort;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(1);\n    }\n    this.currentPage = 1;\n  }\n\n  private displayModeChanged(\n    e: CustomEvent<{ displayMode: CollectionDisplayMode }>\n  ) {\n    this.collectionBrowser.displayMode = e.detail.displayMode;\n  }\n\n  @state() titleQuery?: string;\n\n  @state() creatorQuery?: string;\n\n  private get sortFilterQueries(): string {\n    const queries = [this.titleQuery, this.creatorQuery];\n    return queries.filter(q => q).join(' AND ');\n  }\n\n  private titleLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {\n    const letter = e.detail.selectedLetter;\n    if (letter) {\n      this.titleQuery = `firstTitle:${letter}`;\n    } else {\n      this.titleQuery = undefined;\n    }\n  }\n\n  private creatorLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {\n    const letter = e.detail.selectedLetter;\n    if (letter) {\n      this.creatorQuery = `firstCreator:${letter}`;\n    } else {\n      this.creatorQuery = undefined;\n    }\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"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { DefaultSearchBackend, 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 = new SearchService(new DefaultSearchBackend({\n    baseUrl: 'ia-petabox-offshoot-search.archive.org',\n  }));\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  @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    this.currentPage = 1;\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        <button\n          @click=${() => {\n            this.collectionBrowser.showDeleteButtons =\n              !this.collectionBrowser.showDeleteButtons;\n          }}\n        >\n          Toggle Delete Mode\n        </button>\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          <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          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          @visiblePageChanged=${this.visiblePageChanged}\n        >\n        </collection-browser>\n      </div>\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

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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1 @@
+{"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/eye-closed.d.ts

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

package/dist/src/assets/img/icons/eye-closed.js

@@ -0,0 +1,5 @@
+import { svg } from 'lit';
+export default svg `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="m97.5245976 14.5407294-15.0809624 14.6188347c3.3026825 2.8601369 6.4111526 6.0234269 9.3254105 9.48987 2.9142578 3.4664431 5.0023086 6.2183876 6.2641522 8.2558335l1.9668021 3.1268688c-.291855.4841879-.6920826 1.1386987-1.2006828 1.9635322s-1.6502683 2.4252247-3.4250041 4.8011737c-1.7747358 2.3759489-3.6202894 4.6426342-5.5366607 6.8000558-1.9163713 2.1574217-4.3810437 4.5580085-7.3940172 7.2017606-3.0129735 2.643752-6.0731589 4.9104373-9.180556 6.8000558-3.1073972 1.8896186-6.6643798 3.4900098-10.6709478 4.8011737-4.0065681 1.3111639-8.0249391 1.9656747-12.055113 1.9635322-6.7019347 0-13.2343359-1.6732336-19.5972037-5.019701l-17.1185824 16.6562806-10.27179318-10.6917703 14.93288898-14.5449211c-3.2533247-2.8601369-6.3371159-6.0116436-9.25137378-9.45452-2.91425785-3.4428764-5.02698749-6.1819664-6.33818892-8.2172698l-1.8927654-3.0529552c.29185498-.4841879.69208259-1.1386987 1.20068282-1.9635322.50860022-.8248335 1.65026824-2.437008 3.42500406-4.8365236 1.77473582-2.3995157 3.62028938-4.6908389 5.53666072-6.8739696 1.9163713-2.1831307 4.3810437-4.5955009 7.3940172-7.2371105s6.0731589-4.9200783 9.180556-6.8354059c3.1073972-1.9153277 6.6772558-3.5275022 10.7095757-4.8365237 4.03232-1.3090215 8.0635669-1.9635322 12.0937409-1.9635322 6.5560071 0 13.0637294 1.6968003 19.5231669 5.090401l17.1185824-16.5823669zm-46.478979 24.584323 10.7803934-10.473243c-3.5451796-1.891761-7.3092505-2.8376415-11.2922126-2.8376415-6.6547228 0-12.3609169 2.3641657-17.1185824 7.0924969-4.7576654 4.7283312-7.1375711 10.437893-7.1397171 17.1286852 0 3.8306553.8251341 7.3945787 2.4754024 10.6917703l10.9284669-10.5471566v-.1446137c0-2.9094127 1.0687043-5.4546132 3.2061128-7.6356015 2.1374086-2.1809883 4.6868477-3.2714825 7.6483174-3.2714825h.5086002zm-1.1652739 21.5988543-10.7803935 10.6178566c3.5945375 1.9388943 7.4068932 2.9083415 11.4370672 2.9083415 6.6547228 0 12.3491139-2.375949 17.0831734-7.1278469s7.1021623-10.4486051 7.1043083-17.0901215c0-4.0234736-.874492-7.6356015-2.6234759-10.836384l-10.7095757 10.473243v.363141c0 2.9586884-1.0687042 5.4803223-3.2061128 7.5649015-2.1374085 2.0845792-4.6868476 3.1268688-7.6483173 3.1268688z" fill="#000"/></svg>
+`;
+//# sourceMappingURL=eye-closed.js.map