@internetarchive/collection-browser 1.4.0 → 1.4.1-alpha.1

package/src/language-code-handler/language-code-handler.ts

@@ -1,4 +1,4 @@
-import { codeToLanguageMap } from './language-code-mapping';
+import { codeToLanguageMap } from './language-code-mapping.js';
 
 // To serialize the list of potential language codes, we store
 // the string in the format `en-us|en|en-gb` with `|` being the separator.

package/src/mediatype/mediatype-config.ts

@@ -1,16 +1,16 @@
-import { accountIcon } from '../assets/img/icons/mediatype/account';
-import { audioIcon } from '../assets/img/icons/mediatype/audio';
-import { collectionIcon } from '../assets/img/icons/mediatype/collection';
-import { dataIcon } from '../assets/img/icons/mediatype/data';
-import { etreeIcon } from '../assets/img/icons/mediatype/etree';
-import { imagesIcon } from '../assets/img/icons/mediatype/images';
-import { filmIcon } from '../assets/img/icons/mediatype/film';
-import { radioIcon } from '../assets/img/icons/mediatype/radio';
-import { softwareIcon } from '../assets/img/icons/mediatype/software';
-import { textsIcon } from '../assets/img/icons/mediatype/texts';
-import { tvIcon } from '../assets/img/icons/mediatype/tv';
-import { videoIcon } from '../assets/img/icons/mediatype/video';
-import { webIcon } from '../assets/img/icons/mediatype/web';
+import { accountIcon } from '../assets/img/icons/mediatype/account.js';
+import { audioIcon } from '../assets/img/icons/mediatype/audio.js';
+import { collectionIcon } from '../assets/img/icons/mediatype/collection.js';
+import { dataIcon } from '../assets/img/icons/mediatype/data.js';
+import { etreeIcon } from '../assets/img/icons/mediatype/etree.js';
+import { imagesIcon } from '../assets/img/icons/mediatype/images.js';
+import { filmIcon } from '../assets/img/icons/mediatype/film.js';
+import { radioIcon } from '../assets/img/icons/mediatype/radio.js';
+import { softwareIcon } from '../assets/img/icons/mediatype/software.js';
+import { textsIcon } from '../assets/img/icons/mediatype/texts.js';
+import { tvIcon } from '../assets/img/icons/mediatype/tv.js';
+import { videoIcon } from '../assets/img/icons/mediatype/video.js';
+import { webIcon } from '../assets/img/icons/mediatype/web.js';
 
 export const mediatypeConfig: { [key: string]: any } = {
   account: {

package/src/restoration-state-handler.ts

@@ -17,8 +17,8 @@ import {
   URLSortField,
   getDefaultSelectedFacets,
   MetadataFieldToURLField,
-} from './models';
-import { arrayEquals } from './utils/array-equals';
+} from './models.js';
+import { arrayEquals } from './utils/array-equals.js';
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;

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

@@ -1,9 +1,9 @@
 import { LitElement, html, css, nothing, TemplateResult } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
-import type { PrefixFilterCounts } from '../models';
+import type { PrefixFilterCounts } from '../models.js';
 
-import './alpha-bar-tooltip';
-import type { AlphaBarTooltip } from './alpha-bar-tooltip';
+import './alpha-bar-tooltip.js';
+import type { AlphaBarTooltip } from './alpha-bar-tooltip.js';
 
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {

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

@@ -21,16 +21,16 @@ import {
   PrefixFilterType,
   SortField,
   SortFieldDisplayName,
-} from '../models';
-import './alpha-bar';
-
-import { sortUpIcon } from './img/sort-toggle-up';
-import { sortDownIcon } from './img/sort-toggle-down';
-import { sortDisabledIcon } from './img/sort-toggle-disabled';
-import { tileIcon } from './img/tile';
-import { listIcon } from './img/list';
-import { compactIcon } from './img/compact';
-import { srOnlyStyle } from '../styles/sr-only';
+} from '../models.js';
+import './alpha-bar.js';
+
+import { sortUpIcon } from './img/sort-toggle-up.js';
+import { sortDownIcon } from './img/sort-toggle-down.js';
+import { sortDisabledIcon } from './img/sort-toggle-disabled.js';
+import { tileIcon } from './img/tile.js';
+import { listIcon } from './img/list.js';
+import { compactIcon } from './img/compact.js';
+import { srOnlyStyle } from '../styles/sr-only.js';
 
 type AlphaSelector = 'creator' | 'title';
 

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

@@ -1,10 +1,10 @@
 import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import './tile-stats';
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
+import '../image-block.js';
+import './tile-stats.js';
 
 @customElement('account-tile')
 export class AccountTile extends LitElement {

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

@@ -7,11 +7,11 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import type { TileModel } from '../../models';
-import { formatUnitSize } from '../../utils/format-unit-size';
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
+import { collectionIcon } from '../../assets/img/icons/mediatype/collection.js';
+import type { TileModel } from '../../models.js';
+import { formatUnitSize } from '../../utils/format-unit-size.js';
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
+import '../image-block.js';
 
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {

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

@@ -11,16 +11,16 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { SortParam } from '@internetarchive/search-service';
 
-import { DateFormat, formatDate } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import type { TileModel } from '../../models';
-
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import '../text-snippet-block';
-import '../item-image';
-import '../mediatype-icon';
-import './tile-stats';
+import { DateFormat, formatDate } from '../../utils/format-date.js';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc.js';
+import type { TileModel } from '../../models.js';
+
+import { baseTileStyles } from './styles/tile-grid-shared-styles.js';
+import '../image-block.js';
+import '../text-snippet-block.js';
+import '../item-image.js';
+import '../mediatype-icon.js';
+import './tile-stats.js';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
+import { srOnlyStyle } from '../../../styles/sr-only.js';
 
 /**
  * Base tile styles

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

@@ -1,13 +1,13 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
-import { reviewsIcon } from '../../assets/img/icons/reviews';
-import { uploadIcon } from '../../assets/img/icons/upload';
-import { viewsIcon } from '../../assets/img/icons/views';
-import { srOnlyStyle } from '../../styles/sr-only';
+import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled.js';
+import { reviewsIcon } from '../../assets/img/icons/reviews.js';
+import { uploadIcon } from '../../assets/img/icons/upload.js';
+import { viewsIcon } from '../../assets/img/icons/views.js';
+import { srOnlyStyle } from '../../styles/sr-only.js';
 
-import { formatCount } from '../../utils/format-count';
+import { formatCount } from '../../utils/format-count.js';
 
 @customElement('tile-stats')
 export class TileStats extends LitElement {

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

@@ -7,7 +7,7 @@ import {
   ReactiveController,
   ReactiveControllerHost,
 } from 'lit';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 
 type HoverPaneState = 'hidden' | 'shown' | 'fading-out';
 

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

@@ -2,8 +2,8 @@ import type { CollectionNameCacheInterface } from '@internetarchive/collection-n
 import type { SortParam } from '@internetarchive/search-service';
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { TileModel } from '../../models';
-import '../list/tile-list';
+import type { TileModel } from '../../models.js';
+import '../list/tile-list.js';
 
 @customElement('tile-hover-pane')
 export class TileHoverPane extends LitElement {

package/src/tiles/image-block.ts

@@ -2,10 +2,10 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import type { TileModel } from '../models';
+import type { TileModel } from '../models.js';
 
-import './overlay/icon-overlay';
-import './overlay/text-overlay';
+import './overlay/icon-overlay.js';
+import './overlay/text-overlay.js';
 
 @customElement('image-block')
 export class ImageBlock extends LitElement {

package/src/tiles/item-image.ts

@@ -2,12 +2,12 @@ import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import type { TileModel } from '../models';
+import type { TileModel } from '../models.js';
 
 import {
   baseItemImageStyles,
   waveformGradientStyles,
-} from '../styles/item-image-styles';
+} from '../styles/item-image-styles.js';
 
 @customElement('item-image')
 export class ItemImage extends LitElement {

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

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { SortParam } from '@internetarchive/search-service';
-import { dateLabel } from './date-label';
-import type { TileModel } from '../../models';
+import { dateLabel } from './date-label.js';
+import type { TileModel } from '../../models.js';
 
 @customElement('tile-list-compact-header')
 export class TileListCompactHeader extends LitElement {

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

@@ -2,15 +2,15 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../../models';
+import type { TileModel } from '../../models.js';
 
-import { formatCount, NumberFormat } from '../../utils/format-count';
-import { formatDate, DateFormat } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import { accountLabel } from './account-label';
+import { formatCount, NumberFormat } from '../../utils/format-count.js';
+import { formatDate, DateFormat } from '../../utils/format-date.js';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc.js';
+import { accountLabel } from './account-label.js';
 
-import '../image-block';
-import '../mediatype-icon';
+import '../image-block.js';
+import '../mediatype-icon.js';
 
 @customElement('tile-list-compact')
 export class TileListCompact extends LitElement {

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

@@ -15,16 +15,16 @@ import DOMPurify from 'dompurify';
 
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { SortParam } from '@internetarchive/search-service';
-import { suppressedCollections, TileModel } from '../../models';
+import { suppressedCollections, TileModel } from '../../models.js';
 
-import { dateLabel } from './date-label';
-import { accountLabel } from './account-label';
-import { formatCount, NumberFormat } from '../../utils/format-count';
-import { formatDate, DateFormat } from '../../utils/format-date';
-import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
+import { dateLabel } from './date-label.js';
+import { accountLabel } from './account-label.js';
+import { formatCount, NumberFormat } from '../../utils/format-count.js';
+import { formatDate, DateFormat } from '../../utils/format-date.js';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc.js';
 
-import '../image-block';
-import '../mediatype-icon';
+import '../image-block.js';
+import '../mediatype-icon.js';
 
 @customElement('tile-list')
 export class TileList extends LitElement {

package/src/tiles/mediatype-icon.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { mediatypeConfig } from '../mediatype/mediatype-config';
+import { mediatypeConfig } from '../mediatype/mediatype-config.js';
 
 @customElement('mediatype-icon')
 export class MediatypeIcon extends LitElement {

package/src/tiles/overlay/icon-overlay.ts

@@ -1,8 +1,8 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { restrictedIcon } from '../../assets/img/icons/restricted';
-import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
 
 @customElement('icon-overlay')
 export class IconOverlay extends LitElement {

package/src/tiles/overlay/icon-text-overlay.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { loginRequiredIcon } from '../../assets/img/icons/login-required';
-import { restrictedIcon } from '../../assets/img/icons/restricted';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
+import { restrictedIcon } from '../../assets/img/icons/restricted.js';
 
 @customElement('icon-text-overlay')
 export class IconTextOverlay extends LitElement {

package/src/tiles/overlay/text-overlay.ts

@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { loginRequiredIcon } from '../../assets/img/icons/login-required';
-import { restrictedIcon } from '../../assets/img/icons/restricted';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required.js';
+import { restrictedIcon } from '../../assets/img/icons/restricted.js';
 
 @customElement('text-overlay')
 export class TextOverlay extends LitElement {

package/src/tiles/tile-dispatcher.ts

@@ -7,21 +7,21 @@ import type {
 } from '@internetarchive/shared-resize-observer';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { SortParam } from '@internetarchive/search-service';
-import type { TileDisplayMode, TileModel } from '../models';
-import './grid/collection-tile';
-import './grid/item-tile';
-import './grid/account-tile';
-import './hover/tile-hover-pane';
-import './list/tile-list';
-import './list/tile-list-compact';
-import './list/tile-list-compact-header';
-import type { TileHoverPane } from './hover/tile-hover-pane';
+import type { TileDisplayMode, TileModel } from '../models.js';
+import './grid/collection-tile.js';
+import './grid/item-tile.js';
+import './grid/account-tile.js';
+import './hover/tile-hover-pane.js';
+import './list/tile-list.js';
+import './list/tile-list-compact.js';
+import './list/tile-list-compact-header.js';
+import type { TileHoverPane } from './hover/tile-hover-pane.js';
 import {
   HoverPaneController,
   HoverPaneControllerInterface,
   HoverPaneProperties,
   HoverPaneProviderInterface,
-} from './hover/hover-pane-controller';
+} from './hover/hover-pane-controller.js';
 
 @customElement('tile-dispatcher')
 export class TileDispatcher
@@ -56,6 +56,8 @@ export class TileDispatcher
   /** Whether this tile should include a hover pane at all (for applicable tile modes) */
   @property({ type: Boolean }) enableHoverPane = false;
 
+  @property({ type: Boolean }) prerender = false;
+
   private hoverPaneController?: HoverPaneControllerInterface;
 
   @query('#container')
@@ -158,6 +160,7 @@ export class TileDispatcher
   }
 
   private get isHoverEnabled(): boolean {
+    if (this.prerender) return false;
     return window.matchMedia('(hover: hover)').matches;
   }