@internetarchive/collection-browser 2.7.14-alpha-webdev7002.4 → 2.7.14-alpha-webdev7397.1

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

@@ -228,7 +228,7 @@ export class SortFilterBar
 
     if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
       const oldObserver = changed.get(
-        'resizeObserver'
+        'resizeObserver',
       ) as SharedResizeObserverInterface;
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
       this.setupResizeObserver();
@@ -239,12 +239,12 @@ export class SortFilterBar
     if (this.dropdownBackdropVisible) {
       document.addEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener,
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundSortBarSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener,
       );
     }
   }
@@ -267,7 +267,7 @@ export class SortFilterBar
   }
 
   private disconnectResizeObserver(
-    resizeObserver: SharedResizeObserverInterface
+    resizeObserver: SharedResizeObserverInterface,
   ) {
     if (this.sortSelectorContainer) {
       resizeObserver.removeObserver({
@@ -430,7 +430,7 @@ export class SortFilterBar
       .filter(opt => opt.shownInSortBar)
       .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
       .filter(
-        opt => this.showDateFavorited || opt.field !== SortField.datefavorited
+        opt => this.showDateFavorited || opt.field !== SortField.datefavorited,
       );
 
     return html`
@@ -439,12 +439,11 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SORT_OPTIONS[this.finalizedSortField]
-            .displayName}`,
+          displayName: html`${SORT_OPTIONS[this.finalizedSortField].displayName}`,
           id: 'mobile-dropdown',
           selected: true,
           dropdownOptions: displayedOptions.map(opt =>
-            this.getDropdownOption(opt.field)
+            this.getDropdownOption(opt.field),
           ),
           selectedOption: this.finalizedSortField,
           onOptionSelected: this.mobileSortChanged,
@@ -452,7 +451,7 @@ export class SortFilterBar
             this.dropdownBackdropVisible = this.mobileDropdown.open;
             this.mobileDropdown.classList.toggle(
               'open',
-              this.mobileDropdown.open
+              this.mobileDropdown.open,
             );
           },
         })}
@@ -479,7 +478,7 @@ export class SortFilterBar
       displayName?: TemplateResult;
       selected?: boolean;
       onClick?: (e: Event) => void;
-    }
+    },
   ): TemplateResult {
     const isSelected =
       options?.selected ?? this.finalizedSortField === sortField;
@@ -759,7 +758,7 @@ export class SortFilterBar
   /** Toggles the current sort direction between 'asc' and 'desc' */
   private toggleSortDirection() {
     this.setSortDirection(
-      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'
+      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',
     );
   }
 
@@ -896,14 +895,14 @@ export class SortFilterBar
   }
 
   private titleLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>
+    e: CustomEvent<{ selectedLetter: string | undefined }>,
   ) {
     this.selectedTitleFilter = e.detail.selectedLetter ?? null;
     this.emitTitleLetterChangedEvent();
   }
 
   private creatorLetterChanged(
-    e: CustomEvent<{ selectedLetter: string | undefined }>
+    e: CustomEvent<{ selectedLetter: string | undefined }>,
   ) {
     this.selectedCreatorFilter = e.detail.selectedLetter ?? null;
     this.emitCreatorLetterChangedEvent();
@@ -914,7 +913,7 @@ export class SortFilterBar
       'titleLetterChanged',
       {
         detail: { selectedLetter: this.selectedTitleFilter },
-      }
+      },
     );
     this.dispatchEvent(event);
   }
@@ -924,7 +923,7 @@ export class SortFilterBar
       'creatorLetterChanged',
       {
         detail: { selectedLetter: this.selectedCreatorFilter },
-      }
+      },
     );
     this.dispatchEvent(event);
   }

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

@@ -87,7 +87,7 @@ export class AccountTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -99,7 +99,7 @@ export class CollectionTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -202,12 +201,13 @@ export class ItemTile extends BaseTileComponent {
       <ul class="capture-dates">
         ${map(
           this.model.captureDates,
-          date => html`<li>
-            ${this.displayValueProvider.webArchivesCaptureLink(
-              this.model!.title,
-              date
-            )}
-          </li>`
+          date =>
+            html`<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(
+                this.model!.title,
+                date,
+              )}
+            </li>`,
         )}
       </ul>
     `;
@@ -215,7 +215,7 @@ export class ItemTile extends BaseTileComponent {
 
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.effectiveSort?.field as string
+      this.effectiveSort?.field as string,
     );
   }
 
@@ -234,7 +234,7 @@ export class ItemTile extends BaseTileComponent {
     e.preventDefault();
     const event = new CustomEvent<{ x: number; y: number }>(
       'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } }
+      { detail: { x: e.clientX, y: e.clientY } },
     );
     this.dispatchEvent(event);
   }

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

@@ -29,7 +29,7 @@ export class TileStats extends LitElement {
     const formattedReviewCount = formatCount(
       this.commentCount,
       'short',
-      'short'
+      'short',
     );
 
     const uploadsOrViewsTitle =
@@ -57,10 +57,10 @@ export class TileStats extends LitElement {
               </span>
               ${formatCount(
                 this.mediatype === 'account'
-                  ? this.itemCount ?? 0
-                  : this.viewCount ?? 0,
+                  ? (this.itemCount ?? 0)
+                  : (this.viewCount ?? 0),
+                'short',
                 'short',
-                'short'
               )}
             </p>
           </li>

package/src/tiles/hover/hover-pane-controller.ts

@@ -151,7 +151,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
       HoverPaneProviderInterface &
       HTMLElement,
     /** Options for adjusting the hover pane behavior (offsets, delays, etc.) */
-    options: HoverPaneControllerOptions = {}
+    options: HoverPaneControllerOptions = {},
   ) {
     this.mobileBreakpoint = options.mobileBreakpoint ?? this.mobileBreakpoint;
     this.offsetX = options.offsetX ?? this.offsetX;

package/src/tiles/hover/tile-hover-pane.ts

@@ -26,7 +26,7 @@ export class TileHoverPane extends LitElement {
 
   @property({ type: Number }) mobileBreakpoint?: number;
 
-  @property({ type: Number }) currentWidth?: Number;
+  @property({ type: Number }) currentWidth?: number;
 
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
@@ -95,7 +95,9 @@ export class TileHoverPane extends LitElement {
         visibility: hidden;
         opacity: 0;
         transform: translateY(8px);
-        transition: opacity 0.1s ease-in, transform 0.1s ease-in;
+        transition:
+          opacity 0.1s ease-in,
+          transform 0.1s ease-in;
         --image-width: auto;
       }
 

package/src/tiles/item-image.ts

@@ -64,7 +64,7 @@ export class ItemImage extends LitElement {
         return this.baseImageUrl
           ? `https://web.archive.org/thumb/${domain}?generate=1`
           : nothing;
-      } catch (err) {
+      } catch {
         return `${this.baseImageUrl}/images/notfound.png`;
       }
     }

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

@@ -73,7 +73,7 @@ export class TileListCompact extends BaseTileComponent {
 
     return this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      this.model.mediatype === 'collection'
+      this.model.mediatype === 'collection',
     );
   }
 
@@ -155,7 +155,7 @@ export class TileListCompact extends BaseTileComponent {
 
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
-      this.effectiveSort?.field as string
+      this.effectiveSort?.field as string,
     );
   }
 

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

@@ -90,7 +90,7 @@ export class TileList extends BaseTileComponent {
     const isCollection = this.model.mediatype === 'collection';
     const href = this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      isCollection
+      isCollection,
     );
 
     return html`<a href=${href}>
@@ -149,7 +149,7 @@ export class TileList extends BaseTileComponent {
       : this.detailsLink(
           this.model.identifier,
           this.model.title,
-          this.model.mediatype === 'collection'
+          this.model.mediatype === 'collection',
         );
   }
 
@@ -203,7 +203,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('By'))}
         ${join(
           map(this.model.creators, id => this.searchLink('creator', id)),
-          ', '
+          ', ',
         )}
       </div>
     `;
@@ -233,7 +233,7 @@ export class TileList extends BaseTileComponent {
     ) {
       return this.metadataTemplate(
         formatDate(this.date, 'long'),
-        this.displayValueProvider.dateLabel
+        this.displayValueProvider.dateLabel,
       );
     }
     return nothing;
@@ -253,7 +253,7 @@ export class TileList extends BaseTileComponent {
 
     return this.metadataTemplate(
       `${formatCount(viewCount, this.formatSize)}`,
-      msg('Views')
+      msg('Views'),
     );
   }
 
@@ -274,7 +274,7 @@ export class TileList extends BaseTileComponent {
         ${this.labelTemplate(msg('Topics'))}
         ${join(
           map(this.model.subjects, id => this.searchLink('subject', id)),
-          ', '
+          ', ',
         )}
       </div>
     `;
@@ -296,10 +296,10 @@ export class TileList extends BaseTileComponent {
     return this.metadataTemplate(
       // Sanitize away any HTML tags and convert line breaks to spaces.
       unsafeHTML(
-        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? '')
+        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? ''),
       ),
       '',
-      'description'
+      'description',
     );
   }
 
@@ -340,19 +340,20 @@ export class TileList extends BaseTileComponent {
       <ul class="capture-dates">
         ${map(
           this.model.captureDates,
-          date => html`<li>
-            ${this.displayValueProvider.webArchivesCaptureLink(
-              this.model!.title,
-              date
-            )}
-          </li>`
+          date =>
+            html`<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(
+                this.model!.title,
+                date,
+              )}
+            </li>`,
         )}
       </ul>
     `;
   }
 
   // Utility functions
-  // eslint-disable-next-line default-param-last
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private metadataTemplate(text: any, label = '', id?: string) {
     if (!text) return nothing;
     return html`
@@ -375,28 +376,25 @@ export class TileList extends BaseTileComponent {
     const query = encodeURIComponent(`${field}:"${searchTerm}"`);
     // No whitespace after closing tag
     // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
-
-    /* eslint-disable lit/no-invalid-html */
     return html`<a
       href="${this.baseNavigationUrl}/search?query=${query}"
       rel="nofollow"
     >
       ${DOMPurify.sanitize(searchTerm)}</a
     >`;
-    /* eslint-enable lit/no-invalid-html */
   }
 
   private detailsLink(
     identifier?: string,
     text?: string,
-    isCollection = false
+    isCollection = false,
   ): TemplateResult | typeof nothing {
     if (!identifier) return nothing;
 
     const linkText = text ?? identifier;
     const linkHref = this.displayValueProvider.itemPageUrl(
       identifier,
-      isCollection
+      isCollection,
     );
 
     return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;
@@ -417,7 +415,7 @@ export class TileList extends BaseTileComponent {
       default:
         return this.displayValueProvider.itemPageUrl(
           this.model.mediatype,
-          true
+          true,
         );
     }
   }
@@ -447,8 +445,8 @@ export class TileList extends BaseTileComponent {
           this.detailsLink(
             collection,
             this.collectionTitles?.get(collection) ?? collection,
-            true
-          )
+            true,
+          ),
         );
       }
     }
@@ -664,7 +662,7 @@ export class TileList extends BaseTileComponent {
       /*
        * With the exception of the title line, allow these to wrap if
        * the space becomes too small to accommodate them together.
-       * 
+       *
        * The title line is excluded because it contains the mediatype icon
        * which we don't want to wrap.
        */

package/src/tiles/tile-dispatcher.ts

@@ -60,7 +60,7 @@ export class TileDispatcher
   @property({ type: Boolean }) enableHoverPane = false;
 
   @property({ type: String }) manageCheckTitle = msg(
-    'Remove this item from the list'
+    'Remove this item from the list',
   );
 
   private hoverPaneController?: HoverPaneControllerInterface;
@@ -155,7 +155,7 @@ export class TileDispatcher
 
     return this.displayValueProvider.itemPageUrl(
       this.model.identifier,
-      this.model.mediatype === 'collection'
+      this.model.mediatype === 'collection',
     );
   }
 
@@ -229,7 +229,7 @@ export class TileDispatcher
   updated(props: PropertyValues) {
     if (props.has('resizeObserver')) {
       const previousObserver = props.get(
-        'resizeObserver'
+        'resizeObserver',
       ) as SharedResizeObserverInterface;
       this.stopResizeObservation(previousObserver);
       this.startResizeObservation();
@@ -247,7 +247,7 @@ export class TileDispatcher
     }
 
     this.dispatchEvent(
-      new CustomEvent('resultSelected', { detail: this.model })
+      new CustomEvent('resultSelected', { detail: this.model }),
     );
   }
 
@@ -263,7 +263,7 @@ export class TileDispatcher
   }
 
   private tileInfoButtonPressed(
-    e: CustomEvent<{ x: number; y: number }>
+    e: CustomEvent<{ x: number; y: number }>,
   ): void {
     this.hoverPaneController?.toggleHoverPane({
       coords: e.detail,

package/src/tiles/tile-display-value-provider.ts

@@ -26,7 +26,7 @@ export class TileDisplayValueProvider {
       collectionPagePath?: string;
       sortParam?: SortParam;
       creatorFilter?: string;
-    } = {}
+    } = {},
   ) {
     this.model = options.model;
     this.baseNavigationUrl = options.baseNavigationUrl;
@@ -55,7 +55,7 @@ export class TileDisplayValueProvider {
           .normalize('NFD')
           .replace(/[^A-Z]+/gi, '')
           .toUpperCase()
-          .startsWith(firstLetter)
+          .startsWith(firstLetter),
       );
     }
 
@@ -98,7 +98,7 @@ export class TileDisplayValueProvider {
    */
   itemPageUrl(
     identifier?: string,
-    isCollection = false
+    isCollection = false,
   ): string | typeof nothing {
     if (!identifier || this.baseNavigationUrl == null) return nothing;
     const basePath = isCollection ? this.collectionPagePath : '/details/';
@@ -115,7 +115,7 @@ export class TileDisplayValueProvider {
       .replace(/[TZ:-]/g, '')
       .replace(/\..*/, '');
     const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
-      url
+      url,
     )}`;
     const captureText = formatDate(date, 'long');
 

package/src/utils/facet-utils.ts

@@ -33,8 +33,8 @@ export function forEachFacetBucket(
     facetType: FacetOption,
     bucketKey: string,
     bucket: FacetBucket,
-    selectedFacets: SelectedFacets
-  ) => unknown
+    selectedFacets: SelectedFacets,
+  ) => unknown,
 ): void {
   if (!selectedFacets) return;
   for (const [facetType, facetBuckets] of Object.entries(selectedFacets)) {
@@ -59,7 +59,7 @@ export function updateSelectedFacetBucket(
   selectedFacets: SelectedFacets | undefined,
   facetType: FacetOption,
   bucket: FacetBucket,
-  omitNoneState = false
+  omitNoneState = false,
 ): SelectedFacets {
   const defaultedSelectedFacets = selectedFacets ?? getDefaultSelectedFacets();
   const newFacets = {
@@ -89,7 +89,7 @@ export function updateSelectedFacetBucket(
  * @param selectedFacets The SelectedFacets object to be cloned
  */
 export function cloneSelectedFacets(
-  selectedFacets: SelectedFacets | undefined
+  selectedFacets: SelectedFacets | undefined,
 ): SelectedFacets {
   const cloneResult = getDefaultSelectedFacets();
   forEachFacetBucket(selectedFacets, (facetType, bucketKey, bucket) => {
@@ -120,7 +120,7 @@ export function cloneSelectedFacets(
  */
 export function mergeSelectedFacets(
   destination: SelectedFacets | undefined,
-  source: SelectedFacets | undefined
+  source: SelectedFacets | undefined,
 ): SelectedFacets {
   const mergeResult = cloneSelectedFacets(destination);
   forEachFacetBucket(source, (facetType, bucketKey, bucket) => {
@@ -160,7 +160,7 @@ const BUCKET_STATE_ORDER = ['selected', 'hidden', 'none'];
  */
 export function sortBucketsBySelectionState(
   buckets: FacetBucket[],
-  sort = AggregationSortType.COUNT
+  sort = AggregationSortType.COUNT,
 ) {
   return buckets.sort((a, b) => {
     const aStateIndex = BUCKET_STATE_ORDER.indexOf(a.state);

package/src/utils/format-count.ts

@@ -31,7 +31,6 @@ function magnitude(number: number, numberFormat: NumberFormat): Divisor {
  * Round a number given passed magnitude.
  * Significant digits of value less than 10 get a decimal.
  */
-// eslint-disable-next-line default-param-last
 function round(number: number = 0, divisor: Divisor): number {
   const result = number / divisor;
   const roundToOne = result < 10;
@@ -51,7 +50,7 @@ function labelize(
   rounded: number,
   divisor: Divisor,
   format: LabelFormat,
-  locale: string
+  locale: string,
 ): string {
   switch (divisor) {
     case 1_000_000_000:
@@ -83,7 +82,7 @@ export function formatCount(
   count: number | undefined,
   numberFormat: NumberFormat = 'long',
   labelFormat: LabelFormat = 'short',
-  locale: string = 'en-US'
+  locale: string = 'en-US',
 ): string {
   // Return blank if undefined
   const number = count ?? -1;

package/src/utils/format-date.ts

@@ -10,7 +10,7 @@ export type DateFormat =
 export function formatDate(
   date: Date | undefined,
   format: DateFormat = 'short',
-  locale: string = 'en-US'
+  locale: string = 'en-US',
 ): string {
   // Return blank if undefined
   if (!date) return '';

package/src/utils/format-unit-size.ts

@@ -18,7 +18,7 @@ enum unitSizes {
 export function formatUnitSize(
   size: number | undefined,
   nDecimals: number,
-  separator: string = ' '
+  separator: string = ' ',
 ) {
   let itemSize = size;
   if (itemSize === undefined) return nothing; // early return.

package/src/utils/log.ts

@@ -1,4 +1,3 @@
-/* eslint-disable semi */
 /**
  * console.log() utility -- production ignores 'log()' JS calls; dev invokes 'console.log()'
  */
@@ -11,6 +10,5 @@ export const log =
     window.location.host.match(/^ia-petabox-/) ||
     window.location.host.match(/^local\.archive\.org/) ||
     window.location.host.match(/^internetarchive\.github\.io$/))
-    ? // eslint-disable-next-line no-console
-      console.log.bind(console) // convenient, no?  Stateless function
+    ? console.log.bind(console) // convenient, no?  Stateless function
     : () => {};