@internetarchive/collection-browser 0.0.1-alpha.7 → 0.0.1-alpha.8

package/demo/app-root.ts

@@ -141,7 +141,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>
 
@@ -227,13 +231,15 @@ export class AppRoot extends LitElement {
         </div>
       </div>
 
-      <collection-browser
-        .baseNavigationUrl=${'https://archive.org'}
-        .searchService=${this.searchService}
-        .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}
+          @visiblePageChanged=${this.visiblePageChanged}
+        >
+        </collection-browser>
+      </div>
     `;
   }
 
@@ -307,6 +313,10 @@ export class AppRoot extends LitElement {
       font-size: 1.6rem;
     }
 
+    #collection-browser-container {
+      padding: 0 2rem;
+    }
+
     collection-browser {
       margin-top: 30rem;
     }

package/dist/demo/app-root.js

@@ -106,11 +106,16 @@ let AppRoot = class AppRoot extends LitElement {
         }, '', 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>
 
@@ -196,13 +201,15 @@ let AppRoot = class AppRoot extends LitElement {
         </div>
       </div>
 
-      <collection-browser
-        .baseNavigationUrl=${'https://archive.org'}
-        .searchService=${this.searchService}
-        .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}
+          @visiblePageChanged=${this.visiblePageChanged}
+        >
+        </collection-browser>
+      </div>
     `;
     }
     outlineChanged(e) {
@@ -252,6 +259,10 @@ AppRoot.styles = css `
       font-size: 1.6rem;
     }
 
+    #collection-browser-container {
+      padding: 0 2rem;
+    }
+
     collection-browser {
       margin-top: 30rem;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAEL,SAAS,GACV,MAAM,wDAAwD,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAE/E,OAAO,2BAA2B,CAAC;AAGnC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACU,kBAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAEtC,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAQnC,cAAS,GAAW,EAAE,CAAC;QAEvB,eAAU,GAAW,EAAE,CAAC;QAExB,WAAM,GAAW,GAAG,CAAC;QAErB,WAAM,GAAW,GAAG,CAAC;IAwTxC,CAAC;IAhTS,aAAa,CAAC,CAAQ;;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,CAAC,EAAE;YAC/B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;SACxD;QACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;QACtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAES,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;YACzD,IAAI,CAAC,SAAS,EAAE,CAAC;SAClB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,UAAU,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAChD,MAAM,WAAW,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAClD,MAAM,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC/C,IAAI,UAAU,EAAE;YACd,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACxC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YAC1B,IAAI,MAAM,GAAG,CAAC,EAAE;gBACd,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;aACzC;SACF;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACtB;QACD,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;SAChC;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,kBAAkB,CAAC;SACvC;QACD,IAAI,SAAS,EAAE;YACb,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChD,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,KAAK,EAAE,SAA0B,CAAC,CAAC;SACnE;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAChD;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;QACpD,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAClD,+DAA+D;QAC/D,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,SAAS;QACf,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SACvD;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;gBACxB,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC,CAAC;aAC3D;iBAAM;gBACL,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;aACjC;SACF;QAED,MAAM,CAAC,OAAO,CAAC,SAAS,CACtB;YACE,IAAI,EAAE,IAAI,CAAC,WAAW;YACtB,KAAK,EAAE,IAAI,CAAC,WAAW;SACxB,EACD,EAAE,EACF,GAAG,CAAC,QAAQ,EAAE,CACf,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,aAAa;;4DAEkB,IAAI,CAAC,WAAW;;;;wBAIpD,IAAI,CAAC,iBAAiB;;;;;;mBAM3B,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,CAAC,iBAAiB;gBACtC,CAAC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;QAC9C,CAAC;;;;;;;;;;;;;;;;yBAgBc,IAAI,CAAC,YAAY;;sBAEpB,IAAI,CAAC,SAAS;;;;;;;;;;;yBAWX,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,UAAU;;;;;;;yBAOZ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;yBAcnB,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;;;;yBAWR,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;6BAOJ,qBAAqB;yBACzB,IAAI,CAAC,aAAa;0BACjB,IAAI,CAAC,cAAc;8BACf,IAAI,CAAC,kBAAkB;;;KAGhD,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,+BAA+B,EAC/B,mBAAmB,CACpB,CAAC;SACH;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CACzC,+BAA+B,CAChC,CAAC;SACH;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,iCAAiC,EACjC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,CAAsC;QAC/D,MAAM,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAChC,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;CA4CF,CAAA;AA1CQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,CAAC;AAnUO;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;0CAA+B;AAE9B;IAAR,KAAK,EAAE;0CAAgC;AAE/B;IAAR,KAAK,EAAE;2CAAiC;AAEhC;IAAR,KAAK,EAAE;uCAA8B;AAE7B;IAAR,KAAK,EAAE;uCAA8B;AAEV;IAA3B,KAAK,CAAC,mBAAmB,CAAC;+CAA2C;AAEzC;IAA5B,KAAK,CAAC,oBAAoB,CAAC;gDAA4C;AAE3C;IAA5B,KAAK,CAAC,oBAAoB,CAAC;kDAA+C;AAvBhE,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyUnB;SAzUY,OAAO","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';\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  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        <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        .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 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"]}
+{"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';\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  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\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          @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-container {\n      padding: 0 2rem;\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/demo/icon-provider/icon-provider-icon.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+import { IconProviderInterface } from './icon-provider';
+export declare class IconProviderIcon<T> extends LitElement {
+    iconName?: T;
+    iconProvider?: IconProviderInterface<T>;
+    private iconUrl?;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+    private setIcon;
+}

package/dist/demo/icon-provider/icon-provider-icon.js

@@ -0,0 +1,32 @@
+import { __decorate } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let IconProviderIcon = class IconProviderIcon extends LitElement {
+    render() {
+        return html `
+      ${this.iconUrl ? html `<img src=${this.iconUrl} alt="icon" />` : nothing}
+    `;
+    }
+    updated() {
+        this.setIcon();
+    }
+    async setIcon() {
+        if (!this.iconProvider || !this.iconName)
+            return;
+        this.iconUrl = await this.iconProvider.urlForIcon(this.iconName);
+    }
+};
+__decorate([
+    property({ type: Object })
+], IconProviderIcon.prototype, "iconName", void 0);
+__decorate([
+    property({ type: Object })
+], IconProviderIcon.prototype, "iconProvider", void 0);
+__decorate([
+    state()
+], IconProviderIcon.prototype, "iconUrl", void 0);
+IconProviderIcon = __decorate([
+    customElement('icon-provider-icon')
+], IconProviderIcon);
+export { IconProviderIcon };
+//# sourceMappingURL=icon-provider-icon.js.map

package/dist/demo/icon-provider/icon-provider-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-provider-icon.js","sourceRoot":"","sources":["../../../demo/icon-provider/icon-provider-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAInE,IAAa,gBAAgB,GAA7B,MAAa,gBAAoB,SAAQ,UAAU;IAOjD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC,OAAO;KACxE,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEO,KAAK,CAAC,OAAO;QACnB,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACjD,IAAI,CAAC,OAAO,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnE,CAAC;CACF,CAAA;AApB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAyC;AAE3D;IAAR,KAAK,EAAE;iDAA0B;AALvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqB5B;SArBY,gBAAgB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { IconProviderInterface } from './icon-provider';\n\n@customElement('icon-provider-icon')\nexport class IconProviderIcon<T> extends LitElement {\n  @property({ type: Object }) iconName?: T;\n\n  @property({ type: Object }) iconProvider?: IconProviderInterface<T>;\n\n  @state() private iconUrl?: string;\n\n  render() {\n    return html`\n      ${this.iconUrl ? html`<img src=${this.iconUrl} alt=\"icon\" />` : nothing}\n    `;\n  }\n\n  updated(): void {\n    this.setIcon();\n  }\n\n  private async setIcon() {\n    if (!this.iconProvider || !this.iconName) return;\n    this.iconUrl = await this.iconProvider.urlForIcon(this.iconName);\n  }\n}\n"]}

package/dist/demo/icon-provider/icon-provider.d.ts

@@ -0,0 +1,10 @@
+export declare type CollectionBrowserIcon = 'grid' | 'list' | 'list-A' | 'list-B';
+export declare type AllIcons = CollectionBrowserIcon | 'boop';
+export interface IconProviderInterface<T> {
+    urlForIcon(iconName: T): Promise<string>;
+}
+export declare class IconProvider<T> implements IconProviderInterface<T> {
+    private baseUrl;
+    constructor(baseUrl: string);
+    urlForIcon(iconName: T): Promise<string>;
+}

package/dist/demo/icon-provider/icon-provider.js

@@ -0,0 +1,9 @@
+export class IconProvider {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async urlForIcon(iconName) {
+        return `${this.baseUrl}/${iconName}.svg`;
+    }
+}
+//# sourceMappingURL=icon-provider.js.map

package/dist/demo/icon-provider/icon-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-provider.js","sourceRoot":"","sources":["../../../demo/icon-provider/icon-provider.ts"],"names":[],"mappings":"AAQA,MAAM,OAAO,YAAY;IAGvB,YAAY,OAAe;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,QAAW;QAC1B,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,QAAQ,MAAM,CAAC;IAC3C,CAAC;CACF","sourcesContent":["export type CollectionBrowserIcon = 'grid' | 'list' | 'list-A' | 'list-B';\n\nexport type AllIcons = CollectionBrowserIcon | 'boop';\n\nexport interface IconProviderInterface<T> {\n  urlForIcon(iconName: T): Promise<string>;\n}\n\nexport class IconProvider<T> implements IconProviderInterface<T> {\n  private baseUrl: string;\n\n  constructor(baseUrl: string) {\n    this.baseUrl = baseUrl;\n  }\n\n  async urlForIcon(iconName: T): Promise<string> {\n    return `${this.baseUrl}/${iconName}.svg`;\n  }\n}\n"]}

package/dist/demo/icon-provider-icon.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=icon-provider-icon.js.map

package/dist/demo/icon-provider-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-provider-icon.js","sourceRoot":"","sources":["../../demo/icon-provider-icon.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/demo/icon-provider.d.ts

@@ -0,0 +1,10 @@
+export declare type CollectionBrowserIcon = 'grid' | 'list';
+export declare type AllIcons = CollectionBrowserIcon | 'boop';
+export interface IconProviderInterface<T> {
+    urlForIcon(iconName: T): Promise<string>;
+}
+export declare class IconProvider implements IconProviderInterface<AllIcons> {
+    private baseUrl;
+    constructor(baseUrl: string);
+    urlForIcon(iconName: CollectionBrowserIcon): Promise<string>;
+}

package/dist/demo/icon-provider.js

@@ -0,0 +1,12 @@
+// export interface CollectionBrowserIconProviderInterface extends IconProviderInterface<CollectionBrowserIcon> {
+//   urlForIcon(iconName: CollectionBrowserIcon): Promise<string>;
+// }
+export class IconProvider {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl;
+    }
+    async urlForIcon(iconName) {
+        return `${this.baseUrl}/${iconName}.svg`;
+    }
+}
+//# sourceMappingURL=icon-provider.js.map

package/dist/demo/icon-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-provider.js","sourceRoot":"","sources":["../../demo/icon-provider.ts"],"names":[],"mappings":"AAQA,iHAAiH;AACjH,kEAAkE;AAClE,IAAI;AAEJ,MAAM,OAAO,YAAY;IAGvB,YAAY,OAAe;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,QAA+B;QAC9C,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,QAAQ,MAAM,CAAC;IAC3C,CAAC;CACF","sourcesContent":["export type CollectionBrowserIcon = 'grid' | 'list';\n\nexport type AllIcons = CollectionBrowserIcon | 'boop';\n\nexport interface IconProviderInterface<T> {\n  urlForIcon(iconName: T): Promise<string>;\n}\n\n// export interface CollectionBrowserIconProviderInterface extends IconProviderInterface<CollectionBrowserIcon> {\n//   urlForIcon(iconName: CollectionBrowserIcon): Promise<string>;\n// }\n\nexport class IconProvider implements IconProviderInterface<AllIcons> {\n  private baseUrl: string;\n\n  constructor(baseUrl: string) {\n    this.baseUrl = baseUrl;\n  }\n\n  async urlForIcon(iconName: CollectionBrowserIcon): Promise<string> {\n    return `${this.baseUrl}/${iconName}.svg`;\n  }\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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=eye-hidden.js.map

package/dist/src/assets/img/icons/eye-hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye-hidden.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/eye-hidden.ts"],"names":[],"mappings":"","sourcesContent":[""]}

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

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

package/dist/src/assets/img/icons/eye.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="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z" fill="#000"/></svg>
+`;
+//# sourceMappingURL=eye.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eye.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/eye.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;CAEjB,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport default svg`\n<svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z\" fill=\"#000\"/></svg>\n`;\n"]}

package/dist/src/collection-browser.d.ts

@@ -17,7 +17,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     baseQuery?: string;
     showDeleteButtons: boolean;
     displayMode: CollectionDisplayMode;
-    sortParam?: SortParam;
+    sortParam: SortParam | null;
     dateRangeQueryClause?: string;
     pageSize: number;
     resizeObserver?: SharedResizeObserverInterface;
@@ -36,6 +36,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private pagesToRender;
     private searchResultsLoading;
     private selectedFacets;
+    private hiddenFacets;
     private facetsLoading;
     private fullYearAggregationLoading;
     private aggregations?;
@@ -98,7 +99,21 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get fullQuery();
     private get fullQueryWithoutDate();
     private get facetQuery();
+    /**
+     * Generates a query string for the given facets
+     *
+     * Example: `mediatype:("collection" OR "audio") AND year:("2000" OR "2001")`
+     *
+     * For negative facets, we prefix the field with `-`, ie:
+     * `-mediatype:("collection" OR "audio")`
+     *
+     * @param facets
+     * @param negative
+     * @returns
+     */
+    private getFacetQuery;
     facetsChanged(e: CustomEvent<Record<string, string[]>>): void;
+    hiddenFacetsChanged(e: CustomEvent<Record<string, string[]>>): void;
     private fetchFacets;
     /**
      * If we haven't changed the query, we don't need to fetch the full year histogram

package/dist/src/collection-browser.js

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { SearchParams, } from '@internetarchive/search-service';
-import { AggregateSearchParams, } from '@internetarchive/search-service/dist/src/search-params';
+import { AggregateSearchParams, SortParam, } from '@internetarchive/search-service/dist/src/search-params';
 import '@internetarchive/infinite-scroller';
 import './tiles/tile-dispatcher';
 import './tiles/loading-tile';
@@ -16,6 +16,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         super(...arguments);
         this.showDeleteButtons = false;
         this.displayMode = 'grid';
+        this.sortParam = null;
         this.pageSize = 50;
         /**
          * The page that the consumer wants to load.
@@ -30,6 +31,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.pagesToRender = this.initialPageNumber;
         this.searchResultsLoading = false;
         this.selectedFacets = {};
+        this.hiddenFacets = {};
         this.facetsLoading = false;
         this.fullYearAggregationLoading = false;
         /**
@@ -102,8 +104,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     render() {
         return html `
+      ${this.queryDebuggingTemplate}
+
       <div id="content-container">
-        <div id="left-column">
+        <div id="left-column" class="column">
           <div id="results-total">
             <span id="big-results-count"
               >${this.totalResults
@@ -116,6 +120,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             ${this.facetsLoading ? this.loadingTemplate : nothing}
             <collection-facets
               @facetsChanged=${this.facetsChanged}
+              @hiddenFacetsChanged=${this.hiddenFacetsChanged}
               @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
               .aggregations=${this.aggregations}
               .fullYearsHistogramAggregation=${this
@@ -125,7 +130,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             ></collection-facets>
           </div>
         </div>
-        <div id="right-column">
+        <div id="right-column" class="column">
           ${this.searchResultsLoading ? this.loadingTemplate : nothing}
           <sort-filter-bar
             @sortChanged=${this.sortChanged}
@@ -148,7 +153,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     sortChanged(e) {
         var _a;
-        this.sortParam = e.detail.sort;
+        const { sortField, sortDirection } = e.detail;
+        console.debug('sortChanged', sortField, sortDirection);
+        if (sortField && sortDirection) {
+            this.sortParam = new SortParam(sortField, sortDirection);
+        }
+        else {
+            this.sortParam = null;
+        }
         if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
             this.goToPage(1);
         }
@@ -216,6 +228,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             changed.has('dateRangeQueryClause') ||
             changed.has('sortParam') ||
             changed.has('selectedFacets') ||
+            changed.has('hiddenFacets') ||
             changed.has('searchService')) {
             this.handleQueryChange();
         }
@@ -293,20 +306,44 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return fullQuery;
     }
     get facetQuery() {
+        const facets = this.getFacetQuery(this.selectedFacets, false);
+        const hiddenFacets = this.getFacetQuery(this.hiddenFacets, true);
+        if (facets && hiddenFacets)
+            return [facets, hiddenFacets].join(' AND ');
+        if (facets)
+            return facets;
+        if (hiddenFacets)
+            return hiddenFacets;
+        return undefined;
+    }
+    /**
+     * Generates a query string for the given facets
+     *
+     * Example: `mediatype:("collection" OR "audio") AND year:("2000" OR "2001")`
+     *
+     * For negative facets, we prefix the field with `-`, ie:
+     * `-mediatype:("collection" OR "audio")`
+     *
+     * @param facets
+     * @param negative
+     * @returns
+     */
+    getFacetQuery(facets, negative) {
         const facetQuery = [];
-        for (const [facetName, selectedValues] of Object.entries(this.selectedFacets)) {
-            const values = [];
-            for (const value of selectedValues) {
-                values.push(`${facetName}:"${value}"`);
-            }
-            const valueQuery = values.join(' OR ');
-            facetQuery.push(`(${valueQuery})`);
+        for (const [facetName, facetValues] of Object.entries(facets)) {
+            const negation = negative ? '-' : '';
+            const wrappedValues = facetValues.map(value => `"${value}"`);
+            const valueQuery = wrappedValues.join(` OR `);
+            facetQuery.push(`${negation}${facetName}:(${valueQuery})`);
         }
         return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;
     }
     facetsChanged(e) {
         this.selectedFacets = e.detail;
     }
+    hiddenFacetsChanged(e) {
+        this.hiddenFacets = e.detail;
+    }
     async fetchFacets() {
         var _a, _b;
         if (!this.fullQuery)
@@ -433,6 +470,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         pageFetches.add(pageNumber);
         this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
         const sortParams = this.sortParam ? [this.sortParam] : [];
+        console.debug('sortParam', sortParams);
         const params = new SearchParams({
             query: this.fullQuery,
             fields: [
@@ -602,6 +640,10 @@ CollectionBrowser.styles = css `
       padding-right: 12px;
     }
 
+    .column {
+      padding-top: 2rem;
+    }
+
     #facets-container {
       position: relative;
     }
@@ -731,6 +773,9 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "selectedFacets", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "hiddenFacets", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "facetsLoading", void 0);