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

package/dist/src/collection-browser.js

@@ -419,7 +419,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 'creator',
                 'subject',
                 'source',
-                'collection',
+                'collections_raw',
             ],
             page: pageNumber,
             rows: this.pageSize,
@@ -497,7 +497,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 averageRating: (_u = doc.avg_rating) === null || _u === void 0 ? void 0 : _u.value,
                 subject: (_v = doc.subject) === null || _v === void 0 ? void 0 : _v.value,
                 source: (_w = doc.source) === null || _w === void 0 ? void 0 : _w.value,
-                collection: (_y = (_x = doc.collection) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
+                collections: (_y = (_x = doc.collections_raw) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
             });
         });
         datasource[pageNumber] = tiles;

package/dist/src/collection-browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-browser.js","sourceRoot":"","sources":["../../src/collection-browser.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  html,\n  css,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type {\n  InfiniteScroller,\n  InfiniteScrollerCellProviderInterface,\n} from '@internetarchive/infinite-scroller';\nimport {\n  Aggregation,\n  Metadata,\n  SearchParams,\n  SearchServiceInterface,\n} from '@internetarchive/search-service';\nimport {\n  AggregateSearchParams,\n  SortParam,\n} from '@internetarchive/search-service/dist/src/search-params';\nimport { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport type { TileModel, CollectionDisplayMode } from './models';\nimport '@internetarchive/infinite-scroller';\nimport '@internetarchive/histogram-date-range';\nimport './tiles/tile-dispatcher';\nimport './tiles/loading-tile';\nimport './sort-filter-bar/sort-filter-bar';\nimport './collection-facets';\nimport { CollectionFacets } from './collection-facets';\nimport './circular-activity-indicator';\n\n@customElement('collection-browser')\nexport class CollectionBrowser\n  extends LitElement\n  implements InfiniteScrollerCellProviderInterface\n{\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) baseQuery?: string;\n\n  @property({ type: Boolean }) showDeleteButtons = false;\n\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: String }) additionalQueryClause?: string;\n\n  @property({ type: String }) dateRangeQueryClause?: string;\n\n  @property({ type: Number }) pageSize = 50;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @query('collection-facets') collectionFacets!: CollectionFacets;\n\n  /**\n   * The page that the consumer wants to load.\n   */\n  private initialPageNumber = 1;\n\n  /**\n   * This the the number of pages that we want to show.\n   *\n   * The data isn't necessarily loaded for all of the pages, but this lets us\n   * know how many cells we should render.\n   */\n  @state() private pagesToRender = this.initialPageNumber;\n\n  @state() private searchResultsLoading = false;\n\n  @state() private selectedFacets: Record<string, string[]> = {};\n\n  @state() private facetsLoading = false;\n\n  @state() private fullYearAggregationLoading = false;\n\n  @state() private aggregations?: Record<string, Aggregation>;\n\n  @state() private fullYearsHistogramAggregation: Aggregation | undefined;\n\n  /**\n   * When we're animated scrolling to the page, we don't want to fetch\n   * all of the pages as it scrolls so this lets us know if we're scrolling\n   */\n  private isScrollingToCell = false;\n\n  /**\n   * When we've reached the end of the data, stop trying to fetch more\n   */\n  private endOfDataReached = false;\n\n  private placeholderCellTemplate = html`<loading-tile></loading-tile>`;\n\n  private tileModelAtCellIndex(index: number): TileModel | undefined {\n    const pageNumber = Math.floor(index / this.pageSize) + 1;\n    const itemIndex = index % this.pageSize;\n    const model = this.dataSource[pageNumber]?.[itemIndex];\n    /**\n     * If we encounter a model we don't have yet and we're not in the middle of an\n     * automated scroll, fetch the page and just return undefined.\n     * The datasource will be updated once the page is loaded and the cell will be rendered.\n     *\n     * We disable it during the automated scroll since we may fetch pages for cells the\n     * user may never see.\n     */\n    if (!model && !this.isScrollingToCell) {\n      this.fetchPage(pageNumber);\n    }\n    return model;\n  }\n\n  // this is the total number of tiles we expect if\n  // the data returned is a full page worth\n  // this is useful for putting in placeholders for the expected number of tiles\n  private get estimatedTileCount(): number {\n    return this.pagesToRender * this.pageSize;\n  }\n\n  // this is the actual number of tiles in the datasource,\n  // which is useful for removing excess placeholder tiles\n  // once we reached the end of the data\n  private get actualTileCount(): number {\n    return Object.keys(this.dataSource).reduce(\n      (acc, page) => acc + this.dataSource[page].length,\n      0\n    );\n  }\n\n  /**\n   * The results per page so we can paginate.\n   *\n   * This allows us to start in the middle of the search results and\n   * fetch data before or after the current page. If we don't have a key\n   * for the previous/next page, we'll fetch the next/previous page to populate it\n   */\n  private dataSource: Record<string, TileModel[]> = {};\n\n  @query('infinite-scroller')\n  private infiniteScroller!: InfiniteScroller;\n\n  /**\n   *\n   * @param pageNumber\n   * @param scroll\n   */\n  goToPage(pageNumber: number) {\n    this.initialPageNumber = pageNumber;\n    this.pagesToRender = pageNumber;\n    this.scrollToPage(pageNumber);\n  }\n\n  render() {\n    return html`\n      <h1>Collection Browser</h1>\n\n      <div id=\"query\">\n        <ul>\n          <li>Base Query: ${this.baseQuery}</li>\n          <li>Facet Query: ${this.facetQuery}</li>\n          <li>Additional Query: ${this.additionalQueryClause}</li>\n          <li>Date Range Query: ${this.dateRangeQueryClause}</li>\n          <li>Sort: ${this.sortParam?.field} ${this.sortParam?.direction}</li>\n          <li>Full Query: ${this.fullQuery}</li>\n        </ul>\n      </div>\n\n      <div id=\"content-container\">\n        <div id=\"left-column\">\n          <div id=\"histogram-container\">${this.histogramTemplate}</div>\n          <div id=\"facets-container\">\n            ${this.facetsLoading ? this.loadingTemplate : nothing}\n            <collection-facets\n              @facetsChanged=${this.facetsChanged}\n              .aggregations=${this.aggregations}\n            ></collection-facets>\n          </div>\n        </div>\n        <div id=\"right-column\">\n          ${this.searchResultsLoading ? this.loadingTemplate : nothing}\n          <infinite-scroller\n            class=\"${this.displayMode}\"\n            .cellProvider=${this}\n            .placeholderCellTemplate=${this.placeholderCellTemplate}\n            @scrollThresholdReached=${this.scrollThresholdReached}\n            @visibleCellsChanged=${this.visibleCellsChanged}\n          >\n          </infinite-scroller>\n        </div>\n      </div>\n    `;\n  }\n\n  private get loadingTemplate() {\n    return html`\n      <div class=\"loading-cover\">\n        <circular-activity-indicator></circular-activity-indicator>\n      </div>\n    `;\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramDataLoading(): boolean {\n    return this.facetsLoading || this.fullYearAggregationLoading;\n  }\n\n  private get histogramTemplate() {\n    const { currentYearsHistogramAggregation, fullYearsHistogramAggregation } =\n      this;\n    return html`\n      <histogram-date-range\n        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n        .minSelectedDate=${currentYearsHistogramAggregation?.first_bucket_key}\n        .maxSelectedDate=${currentYearsHistogramAggregation?.last_bucket_key}\n        .updateDelay=${100}\n        missingDataMessage=\"...\"\n        ?loading=${this.histogramDataLoading}\n        .width=${150}\n        .bins=${fullYearsHistogramAggregation?.buckets}\n        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n      ></histogram-date-range>\n    `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;\n  }\n\n  updated(changed: PropertyValues) {\n    if (\n      changed.has('displayMode') ||\n      changed.has('showDeleteButtons') ||\n      changed.has('baseNavigationUrl')\n    ) {\n      this.infiniteScroller.reload();\n    }\n    if (\n      changed.has('baseQuery') ||\n      changed.has('additionalQueryClause') ||\n      changed.has('dateRangeQueryClause') ||\n      changed.has('sortParam') ||\n      changed.has('selectedFacets') ||\n      changed.has('searchService')\n    ) {\n      this.handleQueryChange();\n    }\n    if (changed.has('pagesToRender')) {\n      if (!this.endOfDataReached) {\n        this.infiniteScroller.itemCount = this.estimatedTileCount;\n      }\n    }\n  }\n\n  /**\n   * When the visible cells change from the infinite scroller, we want to emit\n   * which page is currently visible so the consumer can update its UI or the URL\n   *\n   * @param e\n   * @returns\n   */\n  private visibleCellsChanged(\n    e: CustomEvent<{ visibleCellIndices: number[] }>\n  ) {\n    if (this.isScrollingToCell) return;\n    const { visibleCellIndices } = e.detail;\n    if (visibleCellIndices.length === 0) return;\n    const lastVisibleCellIndex =\n      visibleCellIndices[visibleCellIndices.length - 1];\n    const lastVisibleCellPage =\n      Math.floor(lastVisibleCellIndex / this.pageSize) + 1;\n    const event = new CustomEvent('visiblePageChanged', {\n      detail: {\n        pageNumber: lastVisibleCellPage,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  // we only want to scroll on the very first query change\n  // so this keeps track of whether we've already set the initial query\n  private initialQueryChangeHappened = false;\n\n  // this lets us store the query key so we know if it's actually changed or not\n  private previousQueryKey?: string;\n\n  private async handleQueryChange() {\n    // only reset if the query has actually changed\n    if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)\n      return;\n    this.previousQueryKey = this.pageFetchQueryKey;\n\n    this.dataSource = {};\n    this.pageFetchesInProgress = {};\n    this.endOfDataReached = false;\n    this.pagesToRender = this.initialPageNumber;\n    if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {\n      this.scrollToPage(this.initialPageNumber);\n    }\n    this.initialQueryChangeHappened = true;\n\n    await Promise.all([\n      this.doInitialPageFetch(),\n      this.fetchFacets(),\n      this.fetchFullYearHistogram(),\n    ]);\n  }\n\n  private async doInitialPageFetch() {\n    this.searchResultsLoading = true;\n    await this.fetchPage(this.initialPageNumber);\n    this.searchResultsLoading = false;\n  }\n\n  private get fullQuery(): string | undefined {\n    let { fullQueryWithoutDate } = this;\n    const { dateRangeQueryClause } = this;\n    if (dateRangeQueryClause) {\n      fullQueryWithoutDate += ` AND ${dateRangeQueryClause}`;\n    }\n    return fullQueryWithoutDate;\n  }\n\n  private get fullQueryWithoutDate(): string | undefined {\n    if (!this.baseQuery) return undefined;\n    let fullQuery = this.baseQuery;\n    const { facetQuery, additionalQueryClause } = this;\n    if (facetQuery) {\n      fullQuery += ` AND ${facetQuery}`;\n    }\n    if (additionalQueryClause) {\n      fullQuery += ` AND ${additionalQueryClause}`;\n    }\n    return fullQuery;\n  }\n\n  private get facetQuery(): string | undefined {\n    const facetQuery = [];\n    for (const [facetName, selectedValues] of Object.entries(\n      this.selectedFacets\n    )) {\n      const values: string[] = [];\n      for (const value of selectedValues) {\n        values.push(`${facetName}:\"${value}\"`);\n      }\n      const valueQuery = values.join(' OR ');\n      facetQuery.push(`(${valueQuery})`);\n    }\n    return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;\n  }\n\n  facetsChanged(e: CustomEvent<Record<string, string[]>>) {\n    this.selectedFacets = e.detail;\n  }\n\n  private async fetchFacets() {\n    if (!this.fullQuery) return;\n\n    const aggregations = new AggregateSearchParams({\n      advancedParams: [\n        {\n          field: 'subjectSorter',\n          size: 6,\n        },\n        {\n          field: 'mediatypeSorter',\n          size: 6,\n        },\n        {\n          field: 'languageSorter',\n          size: 6,\n        },\n        {\n          field: 'creatorSorter',\n          size: 6,\n        },\n        {\n          field: 'collection',\n          size: 12,\n        },\n        {\n          field: 'year',\n          size: 50,\n        },\n      ],\n    });\n\n    const params = new SearchParams({\n      query: this.fullQuery,\n      fields: ['identifier'],\n      aggregations,\n      rows: 1,\n    });\n    this.facetsLoading = true;\n    const results = await this.searchService?.search(params);\n    this.facetsLoading = false;\n\n    this.aggregations = results?.success?.response.aggregations;\n  }\n\n  /**\n   * If we haven't changed the query, we don't need to fetch the full year histogram\n   *\n   * @private\n   * @type {string}\n   * @memberof CollectionBrowser\n   */\n  private previousFullQueryNoDate?: string;\n\n  /**\n   * The query key is a string that uniquely identifies the current query\n   * without the date range.\n   *\n   * If this doesn't change, we don't need to re-fetch the histogram date range\n   */\n  private get fullQueryNoDateKey() {\n    return `${this.fullQueryWithoutDate}-${this.sortParam?.asString}`;\n  }\n\n  /**\n   * This method is similar to fetching the facets above,\n   * but only fetching the year histogram. There is a subtle difference\n   * in how you have to fetch the year histogram where you can't use the\n   * advanced JSON syntax like the other aggregations. It's a special\n   * case that @ximm put it place.\n   */\n  private async fetchFullYearHistogram(): Promise<void> {\n    const { fullQueryNoDateKey } = this;\n    if (\n      !this.fullQueryWithoutDate ||\n      fullQueryNoDateKey === this.previousFullQueryNoDate\n    )\n      return;\n    this.previousFullQueryNoDate = fullQueryNoDateKey;\n\n    const aggregations = new AggregateSearchParams({\n      simpleParams: ['year'],\n    });\n\n    const params = new SearchParams({\n      query: this.fullQueryWithoutDate,\n      fields: ['identifier'],\n      aggregations,\n      rows: 1,\n    });\n\n    this.fullYearAggregationLoading = true;\n    const results = await this.searchService?.search(params);\n    this.fullYearAggregationLoading = false;\n\n    this.fullYearsHistogramAggregation =\n      results?.success?.response?.aggregations?.year_histogram;\n  }\n\n  private scrollToPage(pageNumber: number) {\n    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);\n    // without this setTimeout, Safari just pauses until the `fetchPage` is complete\n    // then scrolls to the cell\n    setTimeout(() => {\n      this.isScrollingToCell = true;\n      this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);\n      // This timeout is to give the scroll animation time to finish\n      // then updating the infinite scroller once we're done scrolling\n      // There's no scroll animation completion callback so we're\n      // giving it 0.5s to finish.\n      setTimeout(() => {\n        this.isScrollingToCell = false;\n        this.infiniteScroller.reload();\n      }, 500);\n    }, 0);\n  }\n\n  /**\n   * The query key is a string that uniquely identifies the current query\n   *\n   * This lets us keep track of queries so we don't persist data that's\n   * no longer relevant.\n   */\n  private get pageFetchQueryKey() {\n    return `${this.fullQuery}-${this.sortParam?.asString}`;\n  }\n\n  // this maps the query to the pages being fetched for that query\n  private pageFetchesInProgress: Record<string, Set<number>> = {};\n\n  async fetchPage(pageNumber: number) {\n    if (!this.fullQuery) return;\n\n    // if we already have data, don't fetch again\n    if (this.dataSource[pageNumber]) return;\n\n    if (this.endOfDataReached) return;\n\n    // if a fetch is already in progress for this query and page, don't fetch again\n    const { pageFetchQueryKey } = this;\n    const pageFetches =\n      this.pageFetchesInProgress[pageFetchQueryKey] ?? new Set();\n    if (pageFetches.has(pageNumber)) return;\n    pageFetches.add(pageNumber);\n    this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;\n\n    const sortParams = this.sortParam ? [this.sortParam] : [];\n    const params = new SearchParams({\n      query: this.fullQuery,\n      fields: [\n        'identifier',\n        'title',\n        'mediatype',\n        'downloads',\n        'avg_rating',\n        'num_favorites',\n        'num_reviews',\n        'item_count',\n        'description',\n        'date',\n        'addeddate',\n        'publicdate',\n        'reviewdate',\n        'creator',\n        'subject', // topic\n        'source',\n        'collection',\n      ],\n      page: pageNumber,\n      rows: this.pageSize,\n      sort: sortParams,\n    });\n    const results = await this.searchService?.search(params);\n    const success = results?.success;\n\n    if (!success) return;\n\n    // this is checking to see if the query has changed since the data was fetched\n    // if so, we just want to discard the data since there should be a new query\n    // right behind it\n    const searchQuery = success.responseHeader.params.qin;\n    const searchSort = success.responseHeader.params.sort;\n    const queryChangedSinceFetch =\n      searchQuery !== this.fullQuery || searchSort !== this.sortParam?.asString;\n    if (queryChangedSinceFetch) return;\n\n    const { docs } = success.response;\n    if (docs && docs.length > 0) {\n      this.updateDataSource(pageNumber, docs);\n    }\n    if (docs.length < this.pageSize) {\n      this.endOfDataReached = true;\n      // this updates the infinite scroller to show the actual size\n      this.infiniteScroller.itemCount = this.actualTileCount;\n    }\n    this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber);\n    this.searchResultsLoading = false;\n  }\n\n  /**\n   * This is useful for determining whether we need to reload the scroller.\n   *\n   * When the fetch completes, we need to reload the scroller if the cells for that\n   * page are visible, but if the page is not currenlty visible, we don't need to reload\n   */\n  private get currentVisiblePageNumbers(): number[] {\n    const visibleCells = this.infiniteScroller.getVisibleCellIndices();\n    const visiblePages = new Set<number>();\n    visibleCells.forEach(cellIndex => {\n      const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;\n      visiblePages.add(visiblePage);\n    });\n    return Array.from(visiblePages);\n  }\n\n  /**\n   * Update the datasource from the fetch response\n   *\n   * @param pageNumber\n   * @param docs\n   */\n  private updateDataSource(pageNumber: number, docs: Metadata[]) {\n    // copy our existing datasource so when we set it below, it gets set\n    // instead of modifying the existing dataSource since object changes\n    // don't trigger a re-render\n    const datasource = { ...this.dataSource };\n    const tiles: TileModel[] = [];\n    docs?.forEach(doc => {\n      if (!doc.identifier) return;\n      tiles.push({\n        identifier: doc.identifier,\n        title: this.etreeTitle(doc.title?.value, doc.mediatype?.value),\n        mediatype: doc.mediatype?.value ?? 'data',\n        viewCount: doc.downloads?.value ?? 0,\n        favCount: doc.num_favorites?.value ?? 0,\n        commentCount: doc.num_reviews?.value ?? 0,\n        itemCount: doc.item_count?.value ?? 0,\n        description: doc.description?.value,\n        dateAdded: doc.addeddate?.value,\n        dateArchived: doc.publicdate?.value,\n        dateReviewed: doc.reviewdate?.value,\n        datePublished: doc.date?.value,\n        creator: doc.creator?.value,\n        averageRating: doc.avg_rating?.value,\n        subject: doc.subject?.value,\n        source: doc.source?.value,\n        collection: doc.collection?.values ?? [],\n      });\n    });\n    datasource[pageNumber] = tiles;\n    this.dataSource = datasource;\n    const visiblePages = this.currentVisiblePageNumbers;\n    const needsReload = visiblePages.includes(pageNumber);\n    if (needsReload) {\n      this.infiniteScroller.reload();\n    }\n  }\n\n  /*\n   * Convert etree titles\n   * \"[Creator] Live at [Place] on [Date]\" => \"[Date]: [Place]\"\n   *\n   * Todo: Check collection(s) for etree, need to get as array.\n   * Current search-service only returns first collection as string.\n   */\n  private etreeTitle(\n    title: string | undefined,\n    mediatype: string | undefined\n  ): string {\n    if (mediatype === 'etree') {\n      // || collections.includes('etree')) {\n      const regex = /^(.*) Live at (.*) on (\\d\\d\\d\\d-\\d\\d-\\d\\d)$/;\n      const newTitle = title?.replace(regex, '$3: $2');\n      if (newTitle) {\n        return `${newTitle}`;\n      }\n    }\n    return title ?? '';\n  }\n\n  cellForIndex(index: number): TemplateResult | undefined {\n    const model = this.tileModelAtCellIndex(index);\n    if (!model) return undefined;\n\n    return html` <tile-dispatcher\n      .baseNavigationUrl=${this.baseNavigationUrl}\n      .model=${model}\n      .displayMode=${this.displayMode}\n      .resizeObserver=${this.resizeObserver}\n      .sortParam=${this.sortParam}\n      ?showDeleteButton=${this.showDeleteButtons}\n    ></tile-dispatcher>`;\n  }\n\n  /**\n   * When the user scrolls near to the bottom of the page, fetch the next page\n   * increase the number of pages to render and start fetching data for the new page\n   */\n  private scrollThresholdReached() {\n    this.pagesToRender += 1;\n    this.fetchPage(this.pagesToRender);\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    #content-container {\n      display: flex;\n    }\n\n    #right-column {\n      flex: 1;\n      position: relative;\n    }\n\n    #left-column {\n      width: 15rem;\n    }\n\n    #facets-container {\n      position: relative;\n    }\n\n    .loading-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(255, 255, 255, 0.75);\n      display: flex;\n      justify-content: center;\n      z-index: 1;\n      padding-top: 50px;\n    }\n\n    circular-activity-indicator {\n      width: 30px;\n      height: 30px;\n    }\n\n    infinite-scroller {\n      display: block;\n      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);\n      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);\n    }\n\n    infinite-scroller.list-compact {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        100%\n      );\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        2rem\n      );\n      --infiniteScrollerCellMaxHeight: var(\n        --collectionBrowserCellMaxHeight,\n        2rem\n      );\n    }\n\n    infinite-scroller.list-detail {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        100%\n      );\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        5rem\n      );\n    }\n\n    infinite-scroller.grid {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        18rem\n      );\n      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        29rem\n      );\n      --infiniteScrollerCellMaxHeight: var(\n        --collectionBrowserCellMaxHeight,\n        29rem\n      );\n    }\n  `;\n}\n"]}
+{"version":3,"file":"collection-browser.js","sourceRoot":"","sources":["../../src/collection-browser.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EACL,IAAI,EACJ,GAAG,EACH,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1E,OAAO,EAGL,YAAY,GAEb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,qBAAqB,GAEtB,MAAM,wDAAwD,CAAC;AAGhE,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAE7B,OAAO,+BAA+B,CAAC;AAGvC,IAAa,iBAAiB,GAA9B,MAAa,iBACX,SAAQ,UAAU;IADpB;;QAU+B,sBAAiB,GAAG,KAAK,CAAC;QAE3B,gBAAW,GAA0B,MAAM,CAAC;QAQ5C,aAAQ,GAAG,EAAE,CAAC;QAM1C;;WAEG;QACK,sBAAiB,GAAG,CAAC,CAAC;QAE9B;;;;;WAKG;QACc,kBAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAEvC,yBAAoB,GAAG,KAAK,CAAC;QAE7B,mBAAc,GAA6B,EAAE,CAAC;QAE9C,kBAAa,GAAG,KAAK,CAAC;QAEtB,+BAA0B,GAAG,KAAK,CAAC;QAMpD;;;WAGG;QACK,sBAAiB,GAAG,KAAK,CAAC;QAElC;;WAEG;QACK,qBAAgB,GAAG,KAAK,CAAC;QAEzB,4BAAuB,GAAG,IAAI,CAAA,+BAA+B,CAAC;QAqCtE;;;;;;WAMG;QACK,eAAU,GAAgC,EAAE,CAAC;QAwJrD,wDAAwD;QACxD,qEAAqE;QAC7D,+BAA0B,GAAG,KAAK,CAAC;QAyM3C,gEAAgE;QACxD,0BAAqB,GAAgC,EAAE,CAAC;IAuQlE,CAAC;IArpBS,oBAAoB,CAAC,KAAa;;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACzD,MAAM,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QACxC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,0CAAG,SAAS,CAAC,CAAC;QACvD;;;;;;;WAOG;QACH,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YACrC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;SAC5B;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,iDAAiD;IACjD,yCAAyC;IACzC,8EAA8E;IAC9E,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;IAC5C,CAAC;IAED,wDAAwD;IACxD,wDAAwD;IACxD,sCAAsC;IACtC,IAAY,eAAe;QACzB,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CACxC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EACjD,CAAC,CACF,CAAC;IACJ,CAAC;IAcD;;;;OAIG;IACH,QAAQ,CAAC,UAAkB;QACzB,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;QAChC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;;4BAKa,IAAI,CAAC,SAAS;6BACb,IAAI,CAAC,UAAU;kCACV,IAAI,CAAC,qBAAqB;kCAC1B,IAAI,CAAC,oBAAoB;sBACrC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,SAAS;4BAC5C,IAAI,CAAC,SAAS;;;;;;0CAMA,IAAI,CAAC,iBAAiB;;cAElD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;+BAElC,IAAI,CAAC,aAAa;8BACnB,IAAI,CAAC,YAAY;;;;;YAKnC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO;;qBAEjD,IAAI,CAAC,WAAW;4BACT,IAAI;uCACO,IAAI,CAAC,uBAAuB;sCAC7B,IAAI,CAAC,sBAAsB;mCAC9B,IAAI,CAAC,mBAAmB;;;;;KAKtD,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,IAAY,gCAAgC;;QAC1C,OAAO,MAAA,IAAI,CAAC,YAAY,0CAAE,cAAc,CAAC;IAC3C,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,0BAA0B,CAAC;IAC/D,CAAC;IAED,IAAY,iBAAiB;QAC3B,MAAM,EAAE,gCAAgC,EAAE,6BAA6B,EAAE,GACvE,IAAI,CAAC;QACP,OAAO,IAAI,CAAA;;mBAEI,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,gBAAgB;mBAC/C,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,eAAe;2BACtC,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,gBAAgB;2BAClD,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,eAAe;uBACrD,GAAG;;mBAEP,IAAI,CAAC,oBAAoB;iBAC3B,GAAG;gBACJ,6BAA6B,aAA7B,6BAA6B,uBAA7B,6BAA6B,CAAE,OAAO;qCACjB,IAAI,CAAC,yBAAyB;;KAE9D,CAAC;IACJ,CAAC;IAEO,yBAAyB,CAC/B,CAGE;QAEF,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,oBAAoB,GAAG,SAAS,OAAO,OAAO,OAAO,GAAG,CAAC;IAChE,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IACE,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC;YAC1B,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC;YAChC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAChC;YACA,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;SAChC;QACD,IACE,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC;YACpC,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC;YACnC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAC7B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAC5B;YACA,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;aAC3D;SACF;IACH,CAAC;IAED;;;;;;OAMG;IACK,mBAAmB,CACzB,CAAgD;QAEhD,IAAI,IAAI,CAAC,iBAAiB;YAAE,OAAO;QACnC,MAAM,EAAE,kBAAkB,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QACxC,IAAI,kBAAkB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC5C,MAAM,oBAAoB,GACxB,kBAAkB,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACpD,MAAM,mBAAmB,GACvB,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;YAClD,MAAM,EAAE;gBACN,UAAU,EAAE,mBAAmB;aAChC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IASO,KAAK,CAAC,iBAAiB;QAC7B,+CAA+C;QAC/C,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,gBAAgB;YACzE,OAAO;QACT,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAE/C,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;QAChC,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAC5C,IAAI,CAAC,IAAI,CAAC,0BAA0B,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,EAAE;YAClE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC3C;QACD,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QAEvC,MAAM,OAAO,CAAC,GAAG,CAAC;YAChB,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,sBAAsB,EAAE;SAC9B,CAAC,CAAC;IACL,CAAC;IAEO,KAAK,CAAC,kBAAkB;QAC9B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7C,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED,IAAY,SAAS;QACnB,IAAI,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QACpC,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QACtC,IAAI,oBAAoB,EAAE;YACxB,oBAAoB,IAAI,QAAQ,oBAAoB,EAAE,CAAC;SACxD;QACD,OAAO,oBAAoB,CAAC;IAC9B,CAAC;IAED,IAAY,oBAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QACtC,IAAI,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/B,MAAM,EAAE,UAAU,EAAE,qBAAqB,EAAE,GAAG,IAAI,CAAC;QACnD,IAAI,UAAU,EAAE;YACd,SAAS,IAAI,QAAQ,UAAU,EAAE,CAAC;SACnC;QACD,IAAI,qBAAqB,EAAE;YACzB,SAAS,IAAI,QAAQ,qBAAqB,EAAE,CAAC;SAC9C;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,UAAU;QACpB,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,KAAK,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,IAAI,MAAM,CAAC,OAAO,CACtD,IAAI,CAAC,cAAc,CACpB,EAAE;YACD,MAAM,MAAM,GAAa,EAAE,CAAC;YAC5B,KAAK,MAAM,KAAK,IAAI,cAAc,EAAE;gBAClC,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,KAAK,KAAK,GAAG,CAAC,CAAC;aACxC;YACD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACvC,UAAU,CAAC,IAAI,CAAC,IAAI,UAAU,GAAG,CAAC,CAAC;SACpC;QACD,OAAO,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,CAAC;IAED,aAAa,CAAC,CAAwC;QACpD,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC;IACjC,CAAC;IAEO,KAAK,CAAC,WAAW;;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,MAAM,YAAY,GAAG,IAAI,qBAAqB,CAAC;YAC7C,cAAc,EAAE;gBACd;oBACE,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,CAAC;iBACR;gBACD;oBACE,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,CAAC;iBACR;gBACD;oBACE,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE,CAAC;iBACR;gBACD;oBACE,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,CAAC;iBACR;gBACD;oBACE,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,EAAE;iBACT;gBACD;oBACE,KAAK,EAAE,MAAM;oBACb,IAAI,EAAE,EAAE;iBACT;aACF;SACF,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,MAAM,EAAE,CAAC,YAAY,CAAC;YACtB,YAAY;YACZ,IAAI,EAAE,CAAC;SACR,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAC,MAAM,CAAC,CAAA,CAAC;QACzD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAE3B,IAAI,CAAC,YAAY,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,QAAQ,CAAC,YAAY,CAAC;IAC9D,CAAC;IAWD;;;;;OAKG;IACH,IAAY,kBAAkB;;QAC5B,OAAO,GAAG,IAAI,CAAC,oBAAoB,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,EAAE,CAAC;IACpE,CAAC;IAED;;;;;;OAMG;IACK,KAAK,CAAC,sBAAsB;;QAClC,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACpC,IACE,CAAC,IAAI,CAAC,oBAAoB;YAC1B,kBAAkB,KAAK,IAAI,CAAC,uBAAuB;YAEnD,OAAO;QACT,IAAI,CAAC,uBAAuB,GAAG,kBAAkB,CAAC;QAElD,MAAM,YAAY,GAAG,IAAI,qBAAqB,CAAC;YAC7C,YAAY,EAAE,CAAC,MAAM,CAAC;SACvB,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,oBAAoB;YAChC,MAAM,EAAE,CAAC,YAAY,CAAC;YACtB,YAAY;YACZ,IAAI,EAAE,CAAC;SACR,CAAC,CAAC;QAEH,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAC,MAAM,CAAC,CAAA,CAAC;QACzD,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;QAExC,IAAI,CAAC,6BAA6B;YAChC,MAAA,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,QAAQ,0CAAE,YAAY,0CAAE,cAAc,CAAC;IAC7D,CAAC;IAEO,YAAY,CAAC,UAAkB;QACrC,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC7D,gFAAgF;QAChF,2BAA2B;QAC3B,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;YAC9D,8DAA8D;YAC9D,gEAAgE;YAChE,2DAA2D;YAC3D,4BAA4B;YAC5B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;gBAC/B,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;YACjC,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;;;OAKG;IACH,IAAY,iBAAiB;;QAC3B,OAAO,GAAG,IAAI,CAAC,SAAS,IAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,EAAE,CAAC;IACzD,CAAC;IAKD,KAAK,CAAC,SAAS,CAAC,UAAkB;;QAChC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,6CAA6C;QAC7C,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;YAAE,OAAO;QAExC,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAElC,+EAA+E;QAC/E,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC;QACnC,MAAM,WAAW,GACf,MAAA,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,mCAAI,IAAI,GAAG,EAAE,CAAC;QAC7D,IAAI,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC;YAAE,OAAO;QACxC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC5B,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,GAAG,WAAW,CAAC;QAE5D,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC;YAC9B,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,MAAM,EAAE;gBACN,YAAY;gBACZ,OAAO;gBACP,WAAW;gBACX,WAAW;gBACX,YAAY;gBACZ,eAAe;gBACf,aAAa;gBACb,YAAY;gBACZ,aAAa;gBACb,MAAM;gBACN,WAAW;gBACX,YAAY;gBACZ,YAAY;gBACZ,SAAS;gBACT,SAAS;gBACT,QAAQ;gBACR,iBAAiB;aAClB;YACD,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,IAAI,CAAC,QAAQ;YACnB,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;QACH,MAAM,OAAO,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,MAAM,CAAC,MAAM,CAAC,CAAA,CAAC;QACzD,MAAM,OAAO,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC;QAEjC,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,8EAA8E;QAC9E,4EAA4E;QAC5E,kBAAkB;QAClB,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC;QACtD,MAAM,UAAU,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC;QACtD,MAAM,sBAAsB,GAC1B,WAAW,KAAK,IAAI,CAAC,SAAS,IAAI,UAAU,MAAK,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,CAAA,CAAC;QAC5E,IAAI,sBAAsB;YAAE,OAAO;QAEnC,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,QAAQ,CAAC;QAClC,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACzC;QACD,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC/B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,6DAA6D;YAC7D,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC;SACxD;QACD,MAAA,IAAI,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,0CAAE,MAAM,CAAC,UAAU,CAAC,CAAC;QAClE,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,IAAY,yBAAyB;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,CAAC;QACnE,MAAM,YAAY,GAAG,IAAI,GAAG,EAAU,CAAC;QACvC,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;YAC9D,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACH,OAAO,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClC,CAAC;IAED;;;;;OAKG;IACK,gBAAgB,CAAC,UAAkB,EAAE,IAAgB;QAC3D,oEAAoE;QACpE,oEAAoE;QACpE,4BAA4B;QAC5B,MAAM,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC1C,MAAM,KAAK,GAAgB,EAAE,CAAC;QAC9B,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAC,GAAG,CAAC,EAAE;;YAClB,IAAI,CAAC,GAAG,CAAC,UAAU;gBAAE,OAAO;YAC5B,KAAK,CAAC,IAAI,CAAC;gBACT,UAAU,EAAE,GAAG,CAAC,UAAU;gBAC1B,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,MAAA,GAAG,CAAC,KAAK,0CAAE,KAAK,EAAE,MAAA,GAAG,CAAC,SAAS,0CAAE,KAAK,CAAC;gBAC9D,SAAS,EAAE,MAAA,MAAA,GAAG,CAAC,SAAS,0CAAE,KAAK,mCAAI,MAAM;gBACzC,SAAS,EAAE,MAAA,MAAA,GAAG,CAAC,SAAS,0CAAE,KAAK,mCAAI,CAAC;gBACpC,QAAQ,EAAE,MAAA,MAAA,GAAG,CAAC,aAAa,0CAAE,KAAK,mCAAI,CAAC;gBACvC,YAAY,EAAE,MAAA,MAAA,GAAG,CAAC,WAAW,0CAAE,KAAK,mCAAI,CAAC;gBACzC,SAAS,EAAE,MAAA,MAAA,GAAG,CAAC,UAAU,0CAAE,KAAK,mCAAI,CAAC;gBACrC,WAAW,EAAE,MAAA,GAAG,CAAC,WAAW,0CAAE,KAAK;gBACnC,SAAS,EAAE,MAAA,GAAG,CAAC,SAAS,0CAAE,KAAK;gBAC/B,YAAY,EAAE,MAAA,GAAG,CAAC,UAAU,0CAAE,KAAK;gBACnC,YAAY,EAAE,MAAA,GAAG,CAAC,UAAU,0CAAE,KAAK;gBACnC,aAAa,EAAE,MAAA,GAAG,CAAC,IAAI,0CAAE,KAAK;gBAC9B,OAAO,EAAE,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK;gBAC3B,aAAa,EAAE,MAAA,GAAG,CAAC,UAAU,0CAAE,KAAK;gBACpC,OAAO,EAAE,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK;gBAC3B,MAAM,EAAE,MAAA,GAAG,CAAC,MAAM,0CAAE,KAAK;gBACzB,WAAW,EAAE,MAAA,MAAA,GAAG,CAAC,eAAe,0CAAE,MAAM,mCAAI,EAAE;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,UAAU,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,yBAAyB,CAAC;QACpD,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,WAAW,EAAE;YACf,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;SAChC;IACH,CAAC;IAED;;;;;;OAMG;IACK,UAAU,CAChB,KAAyB,EACzB,SAA6B;QAE7B,IAAI,SAAS,KAAK,OAAO,EAAE;YACzB,sCAAsC;YACtC,MAAM,KAAK,GAAG,6CAA6C,CAAC;YAC5D,MAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACjD,IAAI,QAAQ,EAAE;gBACZ,OAAO,GAAG,QAAQ,EAAE,CAAC;aACtB;SACF;QACD,OAAO,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC;IACrB,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC/C,IAAI,CAAC,KAAK;YAAE,OAAO,SAAS,CAAC;QAE7B,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,iBAAiB;eAClC,KAAK;qBACC,IAAI,CAAC,WAAW;wBACb,IAAI,CAAC,cAAc;mBACxB,IAAI,CAAC,SAAS;0BACP,IAAI,CAAC,iBAAiB;wBACxB,CAAC;IACvB,CAAC;IAED;;;OAGG;IACK,sBAAsB;QAC5B,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;CA0FF,CAAA;AAxFQ,wBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFlB,CAAC;AAhtB0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA4B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAwC;AAEvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAoB;AAElB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAA2B;AAE3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAA6C;AAE5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAgC;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA+B;AAE9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAgD;AAE/C;IAA3B,KAAK,CAAC,mBAAmB,CAAC;2DAAqC;AAavD;IAAR,KAAK,EAAE;wDAAgD;AAE/C;IAAR,KAAK,EAAE;+DAAsC;AAErC;IAAR,KAAK,EAAE;yDAAuD;AAEtD;IAAR,KAAK,EAAE;wDAA+B;AAE9B;IAAR,KAAK,EAAE;qEAA4C;AAE3C;IAAR,KAAK,EAAE;uDAAoD;AAEnD;IAAR,KAAK,EAAE;wEAAgE;AA4DxE;IADC,KAAK,CAAC,mBAAmB,CAAC;2DACiB;AA7GjC,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CAqtB7B;SArtBY,iBAAiB","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  html,\n  css,\n  LitElement,\n  PropertyValues,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type {\n  InfiniteScroller,\n  InfiniteScrollerCellProviderInterface,\n} from '@internetarchive/infinite-scroller';\nimport {\n  Aggregation,\n  Metadata,\n  SearchParams,\n  SearchServiceInterface,\n} from '@internetarchive/search-service';\nimport {\n  AggregateSearchParams,\n  SortParam,\n} from '@internetarchive/search-service/dist/src/search-params';\nimport { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport type { TileModel, CollectionDisplayMode } from './models';\nimport '@internetarchive/infinite-scroller';\nimport '@internetarchive/histogram-date-range';\nimport './tiles/tile-dispatcher';\nimport './tiles/loading-tile';\nimport './sort-filter-bar/sort-filter-bar';\nimport './collection-facets';\nimport { CollectionFacets } from './collection-facets';\nimport './circular-activity-indicator';\n\n@customElement('collection-browser')\nexport class CollectionBrowser\n  extends LitElement\n  implements InfiniteScrollerCellProviderInterface\n{\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) baseQuery?: string;\n\n  @property({ type: Boolean }) showDeleteButtons = false;\n\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: String }) additionalQueryClause?: string;\n\n  @property({ type: String }) dateRangeQueryClause?: string;\n\n  @property({ type: Number }) pageSize = 50;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @query('collection-facets') collectionFacets!: CollectionFacets;\n\n  /**\n   * The page that the consumer wants to load.\n   */\n  private initialPageNumber = 1;\n\n  /**\n   * This the the number of pages that we want to show.\n   *\n   * The data isn't necessarily loaded for all of the pages, but this lets us\n   * know how many cells we should render.\n   */\n  @state() private pagesToRender = this.initialPageNumber;\n\n  @state() private searchResultsLoading = false;\n\n  @state() private selectedFacets: Record<string, string[]> = {};\n\n  @state() private facetsLoading = false;\n\n  @state() private fullYearAggregationLoading = false;\n\n  @state() private aggregations?: Record<string, Aggregation>;\n\n  @state() private fullYearsHistogramAggregation: Aggregation | undefined;\n\n  /**\n   * When we're animated scrolling to the page, we don't want to fetch\n   * all of the pages as it scrolls so this lets us know if we're scrolling\n   */\n  private isScrollingToCell = false;\n\n  /**\n   * When we've reached the end of the data, stop trying to fetch more\n   */\n  private endOfDataReached = false;\n\n  private placeholderCellTemplate = html`<loading-tile></loading-tile>`;\n\n  private tileModelAtCellIndex(index: number): TileModel | undefined {\n    const pageNumber = Math.floor(index / this.pageSize) + 1;\n    const itemIndex = index % this.pageSize;\n    const model = this.dataSource[pageNumber]?.[itemIndex];\n    /**\n     * If we encounter a model we don't have yet and we're not in the middle of an\n     * automated scroll, fetch the page and just return undefined.\n     * The datasource will be updated once the page is loaded and the cell will be rendered.\n     *\n     * We disable it during the automated scroll since we may fetch pages for cells the\n     * user may never see.\n     */\n    if (!model && !this.isScrollingToCell) {\n      this.fetchPage(pageNumber);\n    }\n    return model;\n  }\n\n  // this is the total number of tiles we expect if\n  // the data returned is a full page worth\n  // this is useful for putting in placeholders for the expected number of tiles\n  private get estimatedTileCount(): number {\n    return this.pagesToRender * this.pageSize;\n  }\n\n  // this is the actual number of tiles in the datasource,\n  // which is useful for removing excess placeholder tiles\n  // once we reached the end of the data\n  private get actualTileCount(): number {\n    return Object.keys(this.dataSource).reduce(\n      (acc, page) => acc + this.dataSource[page].length,\n      0\n    );\n  }\n\n  /**\n   * The results per page so we can paginate.\n   *\n   * This allows us to start in the middle of the search results and\n   * fetch data before or after the current page. If we don't have a key\n   * for the previous/next page, we'll fetch the next/previous page to populate it\n   */\n  private dataSource: Record<string, TileModel[]> = {};\n\n  @query('infinite-scroller')\n  private infiniteScroller!: InfiniteScroller;\n\n  /**\n   *\n   * @param pageNumber\n   * @param scroll\n   */\n  goToPage(pageNumber: number) {\n    this.initialPageNumber = pageNumber;\n    this.pagesToRender = pageNumber;\n    this.scrollToPage(pageNumber);\n  }\n\n  render() {\n    return html`\n      <h1>Collection Browser</h1>\n\n      <div id=\"query\">\n        <ul>\n          <li>Base Query: ${this.baseQuery}</li>\n          <li>Facet Query: ${this.facetQuery}</li>\n          <li>Additional Query: ${this.additionalQueryClause}</li>\n          <li>Date Range Query: ${this.dateRangeQueryClause}</li>\n          <li>Sort: ${this.sortParam?.field} ${this.sortParam?.direction}</li>\n          <li>Full Query: ${this.fullQuery}</li>\n        </ul>\n      </div>\n\n      <div id=\"content-container\">\n        <div id=\"left-column\">\n          <div id=\"histogram-container\">${this.histogramTemplate}</div>\n          <div id=\"facets-container\">\n            ${this.facetsLoading ? this.loadingTemplate : nothing}\n            <collection-facets\n              @facetsChanged=${this.facetsChanged}\n              .aggregations=${this.aggregations}\n            ></collection-facets>\n          </div>\n        </div>\n        <div id=\"right-column\">\n          ${this.searchResultsLoading ? this.loadingTemplate : nothing}\n          <infinite-scroller\n            class=\"${this.displayMode}\"\n            .cellProvider=${this}\n            .placeholderCellTemplate=${this.placeholderCellTemplate}\n            @scrollThresholdReached=${this.scrollThresholdReached}\n            @visibleCellsChanged=${this.visibleCellsChanged}\n          >\n          </infinite-scroller>\n        </div>\n      </div>\n    `;\n  }\n\n  private get loadingTemplate() {\n    return html`\n      <div class=\"loading-cover\">\n        <circular-activity-indicator></circular-activity-indicator>\n      </div>\n    `;\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramDataLoading(): boolean {\n    return this.facetsLoading || this.fullYearAggregationLoading;\n  }\n\n  private get histogramTemplate() {\n    const { currentYearsHistogramAggregation, fullYearsHistogramAggregation } =\n      this;\n    return html`\n      <histogram-date-range\n        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n        .minSelectedDate=${currentYearsHistogramAggregation?.first_bucket_key}\n        .maxSelectedDate=${currentYearsHistogramAggregation?.last_bucket_key}\n        .updateDelay=${100}\n        missingDataMessage=\"...\"\n        ?loading=${this.histogramDataLoading}\n        .width=${150}\n        .bins=${fullYearsHistogramAggregation?.buckets}\n        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n      ></histogram-date-range>\n    `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;\n  }\n\n  updated(changed: PropertyValues) {\n    if (\n      changed.has('displayMode') ||\n      changed.has('showDeleteButtons') ||\n      changed.has('baseNavigationUrl')\n    ) {\n      this.infiniteScroller.reload();\n    }\n    if (\n      changed.has('baseQuery') ||\n      changed.has('additionalQueryClause') ||\n      changed.has('dateRangeQueryClause') ||\n      changed.has('sortParam') ||\n      changed.has('selectedFacets') ||\n      changed.has('searchService')\n    ) {\n      this.handleQueryChange();\n    }\n    if (changed.has('pagesToRender')) {\n      if (!this.endOfDataReached) {\n        this.infiniteScroller.itemCount = this.estimatedTileCount;\n      }\n    }\n  }\n\n  /**\n   * When the visible cells change from the infinite scroller, we want to emit\n   * which page is currently visible so the consumer can update its UI or the URL\n   *\n   * @param e\n   * @returns\n   */\n  private visibleCellsChanged(\n    e: CustomEvent<{ visibleCellIndices: number[] }>\n  ) {\n    if (this.isScrollingToCell) return;\n    const { visibleCellIndices } = e.detail;\n    if (visibleCellIndices.length === 0) return;\n    const lastVisibleCellIndex =\n      visibleCellIndices[visibleCellIndices.length - 1];\n    const lastVisibleCellPage =\n      Math.floor(lastVisibleCellIndex / this.pageSize) + 1;\n    const event = new CustomEvent('visiblePageChanged', {\n      detail: {\n        pageNumber: lastVisibleCellPage,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  // we only want to scroll on the very first query change\n  // so this keeps track of whether we've already set the initial query\n  private initialQueryChangeHappened = false;\n\n  // this lets us store the query key so we know if it's actually changed or not\n  private previousQueryKey?: string;\n\n  private async handleQueryChange() {\n    // only reset if the query has actually changed\n    if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)\n      return;\n    this.previousQueryKey = this.pageFetchQueryKey;\n\n    this.dataSource = {};\n    this.pageFetchesInProgress = {};\n    this.endOfDataReached = false;\n    this.pagesToRender = this.initialPageNumber;\n    if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {\n      this.scrollToPage(this.initialPageNumber);\n    }\n    this.initialQueryChangeHappened = true;\n\n    await Promise.all([\n      this.doInitialPageFetch(),\n      this.fetchFacets(),\n      this.fetchFullYearHistogram(),\n    ]);\n  }\n\n  private async doInitialPageFetch() {\n    this.searchResultsLoading = true;\n    await this.fetchPage(this.initialPageNumber);\n    this.searchResultsLoading = false;\n  }\n\n  private get fullQuery(): string | undefined {\n    let { fullQueryWithoutDate } = this;\n    const { dateRangeQueryClause } = this;\n    if (dateRangeQueryClause) {\n      fullQueryWithoutDate += ` AND ${dateRangeQueryClause}`;\n    }\n    return fullQueryWithoutDate;\n  }\n\n  private get fullQueryWithoutDate(): string | undefined {\n    if (!this.baseQuery) return undefined;\n    let fullQuery = this.baseQuery;\n    const { facetQuery, additionalQueryClause } = this;\n    if (facetQuery) {\n      fullQuery += ` AND ${facetQuery}`;\n    }\n    if (additionalQueryClause) {\n      fullQuery += ` AND ${additionalQueryClause}`;\n    }\n    return fullQuery;\n  }\n\n  private get facetQuery(): string | undefined {\n    const facetQuery = [];\n    for (const [facetName, selectedValues] of Object.entries(\n      this.selectedFacets\n    )) {\n      const values: string[] = [];\n      for (const value of selectedValues) {\n        values.push(`${facetName}:\"${value}\"`);\n      }\n      const valueQuery = values.join(' OR ');\n      facetQuery.push(`(${valueQuery})`);\n    }\n    return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;\n  }\n\n  facetsChanged(e: CustomEvent<Record<string, string[]>>) {\n    this.selectedFacets = e.detail;\n  }\n\n  private async fetchFacets() {\n    if (!this.fullQuery) return;\n\n    const aggregations = new AggregateSearchParams({\n      advancedParams: [\n        {\n          field: 'subjectSorter',\n          size: 6,\n        },\n        {\n          field: 'mediatypeSorter',\n          size: 6,\n        },\n        {\n          field: 'languageSorter',\n          size: 6,\n        },\n        {\n          field: 'creatorSorter',\n          size: 6,\n        },\n        {\n          field: 'collection',\n          size: 12,\n        },\n        {\n          field: 'year',\n          size: 50,\n        },\n      ],\n    });\n\n    const params = new SearchParams({\n      query: this.fullQuery,\n      fields: ['identifier'],\n      aggregations,\n      rows: 1,\n    });\n    this.facetsLoading = true;\n    const results = await this.searchService?.search(params);\n    this.facetsLoading = false;\n\n    this.aggregations = results?.success?.response.aggregations;\n  }\n\n  /**\n   * If we haven't changed the query, we don't need to fetch the full year histogram\n   *\n   * @private\n   * @type {string}\n   * @memberof CollectionBrowser\n   */\n  private previousFullQueryNoDate?: string;\n\n  /**\n   * The query key is a string that uniquely identifies the current query\n   * without the date range.\n   *\n   * If this doesn't change, we don't need to re-fetch the histogram date range\n   */\n  private get fullQueryNoDateKey() {\n    return `${this.fullQueryWithoutDate}-${this.sortParam?.asString}`;\n  }\n\n  /**\n   * This method is similar to fetching the facets above,\n   * but only fetching the year histogram. There is a subtle difference\n   * in how you have to fetch the year histogram where you can't use the\n   * advanced JSON syntax like the other aggregations. It's a special\n   * case that @ximm put it place.\n   */\n  private async fetchFullYearHistogram(): Promise<void> {\n    const { fullQueryNoDateKey } = this;\n    if (\n      !this.fullQueryWithoutDate ||\n      fullQueryNoDateKey === this.previousFullQueryNoDate\n    )\n      return;\n    this.previousFullQueryNoDate = fullQueryNoDateKey;\n\n    const aggregations = new AggregateSearchParams({\n      simpleParams: ['year'],\n    });\n\n    const params = new SearchParams({\n      query: this.fullQueryWithoutDate,\n      fields: ['identifier'],\n      aggregations,\n      rows: 1,\n    });\n\n    this.fullYearAggregationLoading = true;\n    const results = await this.searchService?.search(params);\n    this.fullYearAggregationLoading = false;\n\n    this.fullYearsHistogramAggregation =\n      results?.success?.response?.aggregations?.year_histogram;\n  }\n\n  private scrollToPage(pageNumber: number) {\n    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);\n    // without this setTimeout, Safari just pauses until the `fetchPage` is complete\n    // then scrolls to the cell\n    setTimeout(() => {\n      this.isScrollingToCell = true;\n      this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);\n      // This timeout is to give the scroll animation time to finish\n      // then updating the infinite scroller once we're done scrolling\n      // There's no scroll animation completion callback so we're\n      // giving it 0.5s to finish.\n      setTimeout(() => {\n        this.isScrollingToCell = false;\n        this.infiniteScroller.reload();\n      }, 500);\n    }, 0);\n  }\n\n  /**\n   * The query key is a string that uniquely identifies the current query\n   *\n   * This lets us keep track of queries so we don't persist data that's\n   * no longer relevant.\n   */\n  private get pageFetchQueryKey() {\n    return `${this.fullQuery}-${this.sortParam?.asString}`;\n  }\n\n  // this maps the query to the pages being fetched for that query\n  private pageFetchesInProgress: Record<string, Set<number>> = {};\n\n  async fetchPage(pageNumber: number) {\n    if (!this.fullQuery) return;\n\n    // if we already have data, don't fetch again\n    if (this.dataSource[pageNumber]) return;\n\n    if (this.endOfDataReached) return;\n\n    // if a fetch is already in progress for this query and page, don't fetch again\n    const { pageFetchQueryKey } = this;\n    const pageFetches =\n      this.pageFetchesInProgress[pageFetchQueryKey] ?? new Set();\n    if (pageFetches.has(pageNumber)) return;\n    pageFetches.add(pageNumber);\n    this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;\n\n    const sortParams = this.sortParam ? [this.sortParam] : [];\n    const params = new SearchParams({\n      query: this.fullQuery,\n      fields: [\n        'identifier',\n        'title',\n        'mediatype',\n        'downloads',\n        'avg_rating',\n        'num_favorites',\n        'num_reviews',\n        'item_count',\n        'description',\n        'date',\n        'addeddate',\n        'publicdate',\n        'reviewdate',\n        'creator',\n        'subject', // topic\n        'source',\n        'collections_raw',\n      ],\n      page: pageNumber,\n      rows: this.pageSize,\n      sort: sortParams,\n    });\n    const results = await this.searchService?.search(params);\n    const success = results?.success;\n\n    if (!success) return;\n\n    // this is checking to see if the query has changed since the data was fetched\n    // if so, we just want to discard the data since there should be a new query\n    // right behind it\n    const searchQuery = success.responseHeader.params.qin;\n    const searchSort = success.responseHeader.params.sort;\n    const queryChangedSinceFetch =\n      searchQuery !== this.fullQuery || searchSort !== this.sortParam?.asString;\n    if (queryChangedSinceFetch) return;\n\n    const { docs } = success.response;\n    if (docs && docs.length > 0) {\n      this.updateDataSource(pageNumber, docs);\n    }\n    if (docs.length < this.pageSize) {\n      this.endOfDataReached = true;\n      // this updates the infinite scroller to show the actual size\n      this.infiniteScroller.itemCount = this.actualTileCount;\n    }\n    this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber);\n    this.searchResultsLoading = false;\n  }\n\n  /**\n   * This is useful for determining whether we need to reload the scroller.\n   *\n   * When the fetch completes, we need to reload the scroller if the cells for that\n   * page are visible, but if the page is not currenlty visible, we don't need to reload\n   */\n  private get currentVisiblePageNumbers(): number[] {\n    const visibleCells = this.infiniteScroller.getVisibleCellIndices();\n    const visiblePages = new Set<number>();\n    visibleCells.forEach(cellIndex => {\n      const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;\n      visiblePages.add(visiblePage);\n    });\n    return Array.from(visiblePages);\n  }\n\n  /**\n   * Update the datasource from the fetch response\n   *\n   * @param pageNumber\n   * @param docs\n   */\n  private updateDataSource(pageNumber: number, docs: Metadata[]) {\n    // copy our existing datasource so when we set it below, it gets set\n    // instead of modifying the existing dataSource since object changes\n    // don't trigger a re-render\n    const datasource = { ...this.dataSource };\n    const tiles: TileModel[] = [];\n    docs?.forEach(doc => {\n      if (!doc.identifier) return;\n      tiles.push({\n        identifier: doc.identifier,\n        title: this.etreeTitle(doc.title?.value, doc.mediatype?.value),\n        mediatype: doc.mediatype?.value ?? 'data',\n        viewCount: doc.downloads?.value ?? 0,\n        favCount: doc.num_favorites?.value ?? 0,\n        commentCount: doc.num_reviews?.value ?? 0,\n        itemCount: doc.item_count?.value ?? 0,\n        description: doc.description?.value,\n        dateAdded: doc.addeddate?.value,\n        dateArchived: doc.publicdate?.value,\n        dateReviewed: doc.reviewdate?.value,\n        datePublished: doc.date?.value,\n        creator: doc.creator?.value,\n        averageRating: doc.avg_rating?.value,\n        subject: doc.subject?.value,\n        source: doc.source?.value,\n        collections: doc.collections_raw?.values ?? [],\n      });\n    });\n    datasource[pageNumber] = tiles;\n    this.dataSource = datasource;\n    const visiblePages = this.currentVisiblePageNumbers;\n    const needsReload = visiblePages.includes(pageNumber);\n    if (needsReload) {\n      this.infiniteScroller.reload();\n    }\n  }\n\n  /*\n   * Convert etree titles\n   * \"[Creator] Live at [Place] on [Date]\" => \"[Date]: [Place]\"\n   *\n   * Todo: Check collection(s) for etree, need to get as array.\n   * Current search-service only returns first collection as string.\n   */\n  private etreeTitle(\n    title: string | undefined,\n    mediatype: string | undefined\n  ): string {\n    if (mediatype === 'etree') {\n      // || collections.includes('etree')) {\n      const regex = /^(.*) Live at (.*) on (\\d\\d\\d\\d-\\d\\d-\\d\\d)$/;\n      const newTitle = title?.replace(regex, '$3: $2');\n      if (newTitle) {\n        return `${newTitle}`;\n      }\n    }\n    return title ?? '';\n  }\n\n  cellForIndex(index: number): TemplateResult | undefined {\n    const model = this.tileModelAtCellIndex(index);\n    if (!model) return undefined;\n\n    return html` <tile-dispatcher\n      .baseNavigationUrl=${this.baseNavigationUrl}\n      .model=${model}\n      .displayMode=${this.displayMode}\n      .resizeObserver=${this.resizeObserver}\n      .sortParam=${this.sortParam}\n      ?showDeleteButton=${this.showDeleteButtons}\n    ></tile-dispatcher>`;\n  }\n\n  /**\n   * When the user scrolls near to the bottom of the page, fetch the next page\n   * increase the number of pages to render and start fetching data for the new page\n   */\n  private scrollThresholdReached() {\n    this.pagesToRender += 1;\n    this.fetchPage(this.pagesToRender);\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    #content-container {\n      display: flex;\n    }\n\n    #right-column {\n      flex: 1;\n      position: relative;\n    }\n\n    #left-column {\n      width: 15rem;\n    }\n\n    #facets-container {\n      position: relative;\n    }\n\n    .loading-cover {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(255, 255, 255, 0.75);\n      display: flex;\n      justify-content: center;\n      z-index: 1;\n      padding-top: 50px;\n    }\n\n    circular-activity-indicator {\n      width: 30px;\n      height: 30px;\n    }\n\n    infinite-scroller {\n      display: block;\n      --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);\n      --infiniteScrollerColGap: var(--collectionBrowserColGap, 1.7rem);\n    }\n\n    infinite-scroller.list-compact {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        100%\n      );\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        2rem\n      );\n      --infiniteScrollerCellMaxHeight: var(\n        --collectionBrowserCellMaxHeight,\n        2rem\n      );\n    }\n\n    infinite-scroller.list-detail {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        100%\n      );\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        5rem\n      );\n    }\n\n    infinite-scroller.grid {\n      --infiniteScrollerCellMinWidth: var(\n        --collectionBrowserCellMinWidth,\n        18rem\n      );\n      --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);\n      --infiniteScrollerCellMinHeight: var(\n        --collectionBrowserCellMinHeight,\n        29rem\n      );\n      --infiniteScrollerCellMaxHeight: var(\n        --collectionBrowserCellMaxHeight,\n        29rem\n      );\n    }\n  `;\n}\n"]}

package/dist/src/models.d.ts

@@ -18,6 +18,6 @@ export interface TileModel {
     creator?: string;
     subject?: string;
     source?: string;
-    collection: string[];
+    collections: string[];
 }
 export declare type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';

package/dist/src/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n  identifier: string;\n  title: string;\n  averageRating?: number;\n  dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n  dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n  datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n  mediatype: MediaType;\n  viewCount: number;\n  itemCount: number;\n  favCount: number;\n  commentCount: number;\n  description?: string;\n  collectionIdentifier?: string;\n  collectionName?: string;\n  creator?: string;\n  subject?: string;\n  source?: string;\n  collection: string[];\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../src/models.ts"],"names":[],"mappings":"","sourcesContent":["import type { MediaType } from '@internetarchive/field-parsers';\n\nexport interface TileModel {\n  identifier: string;\n  title: string;\n  averageRating?: number;\n  dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]\n  dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]\n  dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]\n  datePublished?: Date; // Date work published in the world (user-defined) [from: date]\n  mediatype: MediaType;\n  viewCount: number;\n  itemCount: number;\n  favCount: number;\n  commentCount: number;\n  description?: string;\n  collectionIdentifier?: string;\n  collectionName?: string;\n  creator?: string;\n  subject?: string;\n  source?: string;\n  collections: string[];\n}\n\nexport type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';\n"]}

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

@@ -3,6 +3,7 @@ import { TileModel } from '../../models';
 import '../../mediatype-icon';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
+    baseNavigationUrl?: string;
     get renderItemImageView(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;

package/dist/src/tiles/grid/item-tile.js

@@ -9,8 +9,8 @@ import viewsIcon from './icons/views';
 let ItemTile = class ItemTile extends LitElement {
     get renderItemImageView() {
         var _a, _b;
-        const imgSrcUrl = `https://archive.org/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collection.includes('deemphasize');
+        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
+        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collections.includes('deemphasize');
         return !containsDeemphasize
             ? html `<div
           id="item-image"
@@ -25,14 +25,19 @@ let ItemTile = class ItemTile extends LitElement {
         </div>`;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || '';
-        const itemCreator = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) || '-';
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.collections[0]}`;
+        const itemTitle = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.title) || '';
+        const itemCreator = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.creator) || '-';
         return html `
       <div id="container">
+        <div id="stealth-popup">
+          <div id="collection-image" style="background-image:url(${imgSrcUrl})"></div>
+          <p id="collection-name">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections[0]}</p>
+        </div>
         <div id="title-image-container">
           <p id="item-title" title=${itemTitle}>
-            ${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}
+            ${(_e = this.model) === null || _e === void 0 ? void 0 : _e.title}
           </p>
           <div id="item-image-container">
             ${this.renderItemImageView}
@@ -45,19 +50,19 @@ let ItemTile = class ItemTile extends LitElement {
         <div id="item-stats-container">
           <div id="stats-holder">
             <div class="col">
-              <mediatype-icon mediatype="${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}" showText="true">
+              <mediatype-icon mediatype="${(_f = this.model) === null || _f === void 0 ? void 0 : _f.mediatype}" showText="true">
             </div>
             <div class="col">
               ${viewsIcon}
-              <p class="status-text">${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}</p>
+              <p class="status-text">${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.viewCount, 'short', 'short')}</p>
             </div>
             <div class="col">
               ${favoriteFilledIcon}
-              <p class="status-text">${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}</p>
+              <p class="status-text">${formatCount((_h = this.model) === null || _h === void 0 ? void 0 : _h.itemCount, 'short', 'short')}</p>
             </div>
             <div class="col">
               ${reviewsIcon}
-              <p class="status-text">${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}</p>
+              <p class="status-text">${formatCount((_j = this.model) === null || _j === void 0 ? void 0 : _j.favCount, 'short', 'short')}</p>
             </div>
           </div>
         </div>
@@ -175,7 +180,6 @@ let ItemTile = class ItemTile extends LitElement {
         background-color: #fcfcfc;
       }
 
-      /**  creator **/
       .item-creator {
         color: #000000;
         display: -webkit-box;
@@ -227,12 +231,63 @@ let ItemTile = class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
+
+      #container:hover #stealth-popup {
+        margin-top: -30px;
+        visiblity: visible;
+        opacity: 1;
+      }
+
+      #stealth-popup {
+        transition: margin-top 0.3s ease, opacity 0.3s ease;
+        position: absolute;
+        visiblity: hidden;
+        z-index: 1;
+        opacity: 0;
+        color: black;
+        margin-top: -15px;
+        margin-left: -15px;
+        text-align: left;
+        display: flex;
+        align-items: center;
+      }
+
+      #collection-image {
+        transition: opacity 0.3s ease;
+        width: 4.5rem;
+        height: 4.5rem;
+        border-radius: 22px;
+        box-shadow: 0px 0px 10px #ccc;
+        background-color: white;
+        border: 2px solid #ddd;
+        overflow: hidden;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+
+      #collection-name {
+        width: 160px;
+        line-height: 1;
+        max-height: 25px;
+        font-size: 12px;
+        font-weight: bold;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        bottom: 20px;
+        padding: 1rem;
+      }
     `;
     }
 };
 __decorate([
     property({ type: Object })
 ], ItemTile.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemTile.prototype, "baseNavigationUrl", void 0);
 ItemTile = __decorate([
     customElement('item-tile')
 ], ItemTile);

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAGtC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAGtC,IAAI,mBAAmB;;QACrB,MAAM,SAAS,GAAG,oCAAoC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;QAC/E,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC3E,OAAO,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;wCAE4B,SAAS;gBACjC;YACV,CAAC,CAAC,IAAI,CAAA;;;0CAG8B,SAAS;;;eAGpC,CAAC;IACd,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;qCAGsB,SAAS;cAChC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;cAGjB,IAAI,CAAC,mBAAmB;;;;oBAIlB,WAAW;;;;;;2CAOf,MAAA,IAAI,CAAC,KAAK,0CAAE,SACd;;;gBAGE,SAAS;uCACc,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,kBAAkB;uCACK,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,WAAW;uCACY,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EACpB,OAAO,EACP,OAAO,CACR;;;;;KAKV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JnC,CAAC;IACJ,CAAC;CACF,CAAA;AAhP6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AADnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiPpB;SAjPY,QAAQ","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `https://archive.org/services/img/${this.model?.identifier}`;\n    const containsDeemphasize = this.model?.collection.includes('deemphasize');\n    return !containsDeemphasize\n      ? html`<div\n          id=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>`\n      : html`<div id=\"item-image-box\">\n          <div\n            id=\"item-image-deemphasize\"\n            style=\"background-image:url(${imgSrcUrl})\"\n          ></div>\n          <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n        </div>`;\n  }\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <p id=\"item-title\" title=${itemTitle}>\n            ${this.model?.title}\n          </p>\n          <div id=\"item-image-container\">\n            ${this.renderItemImageView}\n          </div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon mediatype=\"${\n                this.model?.mediatype\n              }\" showText=\"true\">\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.viewCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.itemCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.favCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #item-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-image-box {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        border: 5px solid #0000000;\n        position: relative;\n        display: flex;\n      }\n\n      #item-image-deemphasize {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n        filter: blur(15px);\n        position: absolute;\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 2px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      /**  creator **/\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAGtC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,IAAI,mBAAmB;;QACrB,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,iBAAiB,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;QACrF,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC5E,OAAO,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;wCAE4B,SAAS;gBACjC;YACV,CAAC,CAAC,IAAI,CAAA;;;0CAG8B,SAAS;;;eAGpC,CAAC;IACd,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,iBAAiB,iBAAiB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzF,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;mEAGoD,SAAS;oCACxC,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAC,CAAC,CAAC;;;qCAGzB,SAAS;cAChC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;cAGjB,IAAI,CAAC,mBAAmB;;;;oBAIlB,WAAW;;;;;;2CAOf,MAAA,IAAI,CAAC,KAAK,0CAAE,SACd;;;gBAGE,SAAS;uCACc,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,kBAAkB;uCACK,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,WAAW;uCACY,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EACpB,OAAO,EACP,OAAO,CACR;;;;;KAKV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6MnC,CAAC;IACJ,CAAC;CACF,CAAA;AAtS6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAH5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuSpB;SAvSY,QAAQ","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n    const containsDeemphasize = this.model?.collections.includes('deemphasize');\n    return !containsDeemphasize\n      ? html`<div\n          id=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>`\n      : html`<div id=\"item-image-box\">\n          <div\n            id=\"item-image-deemphasize\"\n            style=\"background-image:url(${imgSrcUrl})\"\n          ></div>\n          <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n        </div>`;\n  }\n\n  render() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"stealth-popup\">\n          <div id=\"collection-image\" style=\"background-image:url(${imgSrcUrl})\"></div>\n          <p id=\"collection-name\">${this.model?.collections[0]}</p>\n        </div>\n        <div id=\"title-image-container\">\n          <p id=\"item-title\" title=${itemTitle}>\n            ${this.model?.title}\n          </p>\n          <div id=\"item-image-container\">\n            ${this.renderItemImageView}\n          </div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon mediatype=\"${\n                this.model?.mediatype\n              }\" showText=\"true\">\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.viewCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.itemCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.favCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #item-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-image-box {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        border: 5px solid #0000000;\n        position: relative;\n        display: flex;\n      }\n\n      #item-image-deemphasize {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n        filter: blur(15px);\n        position: absolute;\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 2px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n\n      #container:hover #stealth-popup {\n        margin-top: -30px;\n        visiblity: visible;\n        opacity: 1;\n      }\n\n      #stealth-popup {\n        transition: margin-top 0.3s ease, opacity 0.3s ease;\n        position: absolute;\n        visiblity: hidden;\n        z-index: 1;\n        opacity: 0;\n        color: black;\n        margin-top: -15px;\n        margin-left: -15px;\n        text-align: left;\n        display: flex;\n        align-items: center;\n      }\n\n      #collection-image {\n        transition: opacity 0.3s ease;\n        width: 4.5rem;\n        height: 4.5rem;\n        border-radius: 22px;\n        box-shadow: 0px 0px 10px #ccc;\n        background-color: white;\n        border: 2px solid #ddd;\n        overflow: hidden;\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n      }\n\n      #collection-name {\n        width: 160px;\n        line-height: 1;\n        max-height: 25px;\n        font-size: 12px;\n        font-weight: bold;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 2;\n        overflow: hidden;\n        bottom: 20px;\n        padding: 1rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/tile-dispatcher.js

@@ -79,8 +79,9 @@ let TileDispatcher = class TileDispatcher extends LitElement {
                     default:
                         return html `<item-tile
               .model=${model}
-              .currentWidth=${currentWidth}
-              .currentHeight=${currentHeight}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+              .currentWidth=${this.currentWidth}
+              .currentHeight=${this.currentHeight}
             ></item-tile>`;
                 }
             case 'list-compact':

package/dist/src/tiles/tile-dispatcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.showDeleteButton\n          ? html`<button id=\"delete-button\">X</button>`\n          : nothing}\n        <a\n          href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n          title=${ifDefined(this.model?.title)}\n        >\n          ${this.tile}\n        </a>\n      </div>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .displayMode=${this.displayMode}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.showDeleteButton\n          ? html`<button id=\"delete-button\">X</button>`\n          : nothing}\n        <a\n          href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n          title=${ifDefined(this.model?.title)}\n        >\n          ${this.tile}\n        </a>\n      </div>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${this.baseNavigationUrl}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .displayMode=${this.displayMode}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/collection-browser.ts

@@ -534,7 +534,7 @@ export class CollectionBrowser
         'creator',
         'subject', // topic
         'source',
-        'collection',
+        'collections_raw',
       ],
       page: pageNumber,
       rows: this.pageSize,
@@ -614,7 +614,7 @@ export class CollectionBrowser
         averageRating: doc.avg_rating?.value,
         subject: doc.subject?.value,
         source: doc.source?.value,
-        collection: doc.collection?.values ?? [],
+        collections: doc.collections_raw?.values ?? [],
       });
     });
     datasource[pageNumber] = tiles;

package/src/models.ts

@@ -19,7 +19,7 @@ export interface TileModel {
   creator?: string;
   subject?: string;
   source?: string;
-  collection: string[];
+  collections: string[];
 }
 
 export type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';

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

@@ -13,9 +13,11 @@ import viewsIcon from './icons/views';
 export class ItemTile extends LitElement {
   @property({ type: Object }) model?: TileModel;
 
+  @property({ type: String }) baseNavigationUrl?: string;
+
   get renderItemImageView() {
-    const imgSrcUrl = `https://archive.org/services/img/${this.model?.identifier}`;
-    const containsDeemphasize = this.model?.collection.includes('deemphasize');
+    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
+    const containsDeemphasize = this.model?.collections.includes('deemphasize');
     return !containsDeemphasize
       ? html`<div
           id="item-image"
@@ -31,11 +33,16 @@ export class ItemTile extends LitElement {
   }
 
   render() {
+    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;
     const itemTitle = this.model?.title || '';
     const itemCreator = this.model?.creator || '-';
 
     return html`
       <div id="container">
+        <div id="stealth-popup">
+          <div id="collection-image" style="background-image:url(${imgSrcUrl})"></div>
+          <p id="collection-name">${this.model?.collections[0]}</p>
+        </div>
         <div id="title-image-container">
           <p id="item-title" title=${itemTitle}>
             ${this.model?.title}
@@ -197,7 +204,6 @@ export class ItemTile extends LitElement {
         background-color: #fcfcfc;
       }
 
-      /**  creator **/
       .item-creator {
         color: #000000;
         display: -webkit-box;
@@ -249,6 +255,54 @@ export class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
+
+      #container:hover #stealth-popup {
+        margin-top: -30px;
+        visiblity: visible;
+        opacity: 1;
+      }
+
+      #stealth-popup {
+        transition: margin-top 0.3s ease, opacity 0.3s ease;
+        position: absolute;
+        visiblity: hidden;
+        z-index: 1;
+        opacity: 0;
+        color: black;
+        margin-top: -15px;
+        margin-left: -15px;
+        text-align: left;
+        display: flex;
+        align-items: center;
+      }
+
+      #collection-image {
+        transition: opacity 0.3s ease;
+        width: 4.5rem;
+        height: 4.5rem;
+        border-radius: 22px;
+        box-shadow: 0px 0px 10px #ccc;
+        background-color: white;
+        border: 2px solid #ddd;
+        overflow: hidden;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+
+      #collection-name {
+        width: 160px;
+        line-height: 1;
+        max-height: 25px;
+        font-size: 12px;
+        font-weight: bold;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        bottom: 20px;
+        padding: 1rem;
+      }
     `;
   }
 }

package/src/tiles/tile-dispatcher.ts

@@ -110,8 +110,9 @@ export class TileDispatcher
           default:
             return html`<item-tile
               .model=${model}
-              .currentWidth=${currentWidth}
-              .currentHeight=${currentHeight}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+              .currentWidth=${this.currentWidth}
+              .currentHeight=${this.currentHeight}
             ></item-tile>`;
         }
       case 'list-compact':