@internetarchive/collection-browser 1.14.17-alpha.4 → 1.14.17-alpha.40

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

@@ -1 +1 @@
-{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.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,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAavC,MAAM;;QACJ,MAAM,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QACvE,MAAM,oBAAoB,GAAG,WAAW,CACtC,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,OAAO,CACR,CAAC;QAEF,MAAM,mBAAmB,GACvB,IAAI,CAAC,SAAS,KAAK,SAAS;YAC1B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,UAAU;YAC7B,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,MAAA,IAAI,CAAC,SAAS,mCAAI,gBAAgB,EAAE,CAAC;QAEhE,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY;;;;;yCAKhC,IAAI,CAAC,SAAS;;mCAEpB,mBAAmB;cACxC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;;gBAEtD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;mCAGoB,iBAAiB;cACtC,kBAAkB;;;gBAGhB,iBAAiB;;;2CAGU,oBAAoB;cACjD,WAAW;;;gBAGT,oBAAoB;;;;;KAK/B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6DF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAtI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AAXvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuIrB;SAvIY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: String }) viewLabel?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short'\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount} uploads`\n        : `${this.viewCount} ${this.viewLabel ?? 'all-time views'}`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">Mediatype:</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account' ? this.itemCount : this.viewCount,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Favorites:</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col reviews\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">Reviews:</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset; // unset all property values\n          list-style-type: none; // remove default list-style\n        }\n\n        li {\n          list-style-type: none; // remove default list-style\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { msg } from '@lit/localize';\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\nimport { srOnlyStyle } from '../../styles/sr-only';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: Number }) itemCount?: number;\n\n  @property({ type: Number }) viewCount?: number;\n\n  @property({ type: String }) viewLabel?: number;\n\n  @property({ type: Number }) favCount?: number;\n\n  @property({ type: Number }) commentCount?: number;\n\n  render() {\n    const formattedFavCount = formatCount(this.favCount, 'short', 'short');\n    const formattedReviewCount = formatCount(\n      this.commentCount,\n      'short',\n      'short'\n    );\n\n    const uploadsOrViewsTitle =\n      this.mediatype === 'account'\n        ? `${this.itemCount ?? 0} uploads`\n        : `${this.viewCount ?? 0} ${this.viewLabel ?? 'all-time views'}`;\n\n    return html`\n      <div class=\"item-stats\">\n        <p class=\"sr-only\">\n          ${this.mediatype === 'account' ? 'Account Stats' : 'Item Stats'}\n        </p>\n        <ul id=\"stats-row\">\n          <li class=\"col\">\n            <p class=\"sr-only\">${msg('Mediatype:')}</p>\n            <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n          </li>\n          <li class=\"col\" title=\"${uploadsOrViewsTitle}\">\n            ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">\n                ${this.mediatype === 'account'\n                  ? msg('Uploads:')\n                  : msg('Views:')}\n              </span>\n              ${formatCount(\n                this.mediatype === 'account'\n                  ? this.itemCount ?? 0\n                  : this.viewCount ?? 0,\n                'short',\n                'short'\n              )}\n            </p>\n          </li>\n          <li class=\"col\" title=\"${formattedFavCount} favorites\">\n            ${favoriteFilledIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Favorites:')}</span>\n              ${formattedFavCount}\n            </p>\n          </li>\n          <li class=\"col reviews\" title=\"${formattedReviewCount} reviews\">\n            ${reviewsIcon}\n            <p class=\"status-text\">\n              <span class=\"sr-only\">${msg('Reviews:')}</span>\n              ${formattedReviewCount}\n            </p>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        mediatype-icon {\n          --iconHeight: 25px;\n          --iconWidth: 25px;\n        }\n\n        ul {\n          all: unset; // unset all property values\n          list-style-type: none; // remove default list-style\n        }\n\n        li {\n          list-style-type: none; // remove default list-style\n        }\n\n        svg {\n          height: 13px;\n          width: 13px;\n          display: block;\n          margin: auto;\n          pointer-events: none;\n        }\n\n        /* Make the reviews icon slightly smaller/lower, for even visual weight */\n        .reviews svg {\n          height: 11px;\n          width: 11px;\n          margin-top: 2px;\n        }\n\n        .item-stats {\n          height: 30px;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n          text-align: center;\n        }\n\n        #stats-row {\n          display: flex;\n          justify-content: space-between;\n          flex-wrap: wrap;\n          width: 100%;\n          padding-bottom: 5px;\n        }\n\n        .col {\n          min-width: 15px;\n          max-width: 25%;\n          height: 25px;\n        }\n\n        .status-text {\n          font-size: 14px;\n          height: 15px;\n          color: #2c2c2c;\n          line-height: 17px;\n          margin: auto;\n          display: block;\n          text-align: center;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/item-image.d.ts

@@ -7,6 +7,7 @@ export declare class ItemImage extends LitElement {
     isCompactTile: boolean;
     loggedIn: boolean;
     private isWaveform;
+    private isNotFound;
     private baseImage;
     render(): import("lit-html").TemplateResult<1>;
     private get imageTemplate();
@@ -14,6 +15,7 @@ export declare class ItemImage extends LitElement {
      * Helpers
      */
     private get imageSrc();
+    private get notFoundSrc();
     private get hashBasedGradient();
     private hashStrToInt;
     /**
@@ -29,6 +31,7 @@ export declare class ItemImage extends LitElement {
      * Event listener sets isWaveform true if image is waveform
      */
     private onLoad;
+    private onError;
     /**
      * CSS
      */

package/dist/src/tiles/item-image.js

@@ -11,6 +11,7 @@ let ItemImage = class ItemImage extends LitElement {
         this.isCompactTile = false;
         this.loggedIn = false;
         this.isWaveform = false;
+        this.isNotFound = false;
     }
     render() {
         return html `
@@ -28,6 +29,7 @@ let ItemImage = class ItemImage extends LitElement {
         src="${this.imageSrc}"
         alt=""
         @load=${this.onLoad}
+        @error=${this.onError}
       />
     `;
     }
@@ -35,12 +37,32 @@ let ItemImage = class ItemImage extends LitElement {
      * Helpers
      */
     get imageSrc() {
-        var _a;
+        var _a, _b;
+        if (this.isNotFound)
+            return this.notFoundSrc;
+        // Use the correct image for web capture tiles, if possible
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) && this.model.identifier) {
+            try {
+                const url = new URL(this.model.identifier);
+                const domain = encodeURIComponent(url.hostname);
+                return this.baseImageUrl
+                    ? `https://web.archive.org/thumb/${domain}?generate=1`
+                    : nothing;
+            }
+            catch (err) {
+                return `${this.baseImageUrl}/images/notfound.png`;
+            }
+        }
         // Don't try to load invalid image URLs
-        return this.baseImageUrl && ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)
+        return this.baseImageUrl && ((_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier)
             ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
             : nothing;
     }
+    get notFoundSrc() {
+        return this.baseImageUrl
+            ? `${this.baseImageUrl}/images/notfound.png`
+            : nothing;
+    }
     get hashBasedGradient() {
         var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
@@ -98,6 +120,9 @@ let ItemImage = class ItemImage extends LitElement {
             this.isWaveform = true;
         }
     }
+    onError() {
+        this.isNotFound = true;
+    }
     /**
      * CSS
      */
@@ -145,6 +170,9 @@ __decorate([
 __decorate([
     state()
 ], ItemImage.prototype, "isWaveform", void 0);
+__decorate([
+    state()
+], ItemImage.prototype, "isNotFound", void 0);
 __decorate([
     query('img')
 ], ItemImage.prototype, "baseImage", void 0);

package/dist/src/tiles/item-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport {\n  baseItemImageStyles,\n  waveformGradientStyles,\n} from '../styles/item-image-styles';\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\n\n@customElement('item-image')\nexport class ItemImage extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @state() private isWaveform = false;\n\n  @state() private isNotFound = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  render() {\n    return html`\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (this.model?.mediatype === 'search') {\n      return html`${searchIcon}`;\n    }\n\n    return html`\n      <img\n        class=${classMap(this.itemImageClass)}\n        src=\"${this.imageSrc}\"\n        alt=\"\"\n        @load=${this.onLoad}\n        @error=${this.onError}\n      />\n    `;\n  }\n\n  /**\n   * Helpers\n   */\n  private get imageSrc() {\n    if (this.isNotFound) return this.notFoundSrc;\n\n    // Use the correct image for web capture tiles, if possible\n    if (this.model?.captureDates && this.model.identifier) {\n      try {\n        const url = new URL(this.model.identifier);\n        const domain = encodeURIComponent(url.hostname);\n        return this.baseImageUrl\n          ? `https://web.archive.org/thumb/${domain}?generate=1`\n          : nothing;\n      } catch (err) {\n        return `${this.baseImageUrl}/images/notfound.png`;\n      }\n    }\n\n    // Don't try to load invalid image URLs\n    return this.baseImageUrl && this.model?.identifier\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\n      : nothing;\n  }\n\n  private get notFoundSrc() {\n    return this.baseImageUrl\n      ? `${this.baseImageUrl}/images/notfound.png`\n      : nothing;\n  }\n\n  private get hashBasedGradient() {\n    if (!this.model?.identifier) {\n      return 'waveform-grad0';\n    }\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\n    return `waveform-grad${gradient}`;\n  }\n\n  private hashStrToInt(str: string): number {\n    return str\n      .split('')\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\n  }\n\n  /**\n   * Classes\n   */\n  private get itemBaseClass(): ClassInfo {\n    return {\n      'drop-shadow': true,\n      'list-box': this.isListTile,\n      'search-image': this.model?.mediatype === 'search',\n      [this.hashBasedGradient]: this.isWaveform,\n    };\n  }\n\n  private get itemImageClass(): ClassInfo {\n    const toBlur = this.model?.contentWarning || this.model?.loginRequired;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: toBlur || false,\n      waveform: this.isWaveform,\n      'account-image': this.isAccountImage, // for account tile image\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\n    };\n  }\n\n  /**\n   * Helper function to determine if account tile image\n   */\n  private get isAccountImage() {\n    return (\n      this.model?.mediatype === 'account' &&\n      !this.isCompactTile &&\n      !this.isListTile\n    );\n  }\n\n  /**\n   * Event listener sets isWaveform true if image is waveform\n   */\n  private onLoad() {\n    if (\n      (this.model?.mediatype === 'audio' ||\n        this.model?.mediatype === 'etree') &&\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\n    ) {\n      this.isWaveform = true;\n    }\n  }\n\n  private onError() {\n    this.isNotFound = true;\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    return [\n      baseItemImageStyles,\n      waveformGradientStyles,\n      css`\n        img {\n          height: var(--imgHeight, 16rem);\n          width: var(--imgWidth, 16rem);\n        }\n\n        .search-image {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          background: rgb(245, 245, 247);\n          border-radius: 4px;\n        }\n\n        svg {\n          height: 10rem;\n          width: 10rem;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -31,6 +31,7 @@ export declare class TileList extends BaseTileComponent {
     private get descriptionTemplate();
     private get textSnippetsTemplate();
     private get hasSnippets();
+    private get webArchivesCaptureDatesTemplate();
     private metadataTemplate;
     private labelTemplate;
     private searchLink;

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

@@ -92,6 +92,7 @@ let TileList = class TileList extends BaseTileComponent {
       ${this.itemLineTemplate} ${this.creatorTemplate}
       <div id="dates-line">
         ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+        ${this.webArchivesCaptureDatesTemplate}
       </div>
       <div id="views-line">
         ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
@@ -206,11 +207,13 @@ let TileList = class TileList extends BaseTileComponent {
         const viewCount = ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) === 'week'
             ? (_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount // weekly views
             : (_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount; // all-time views
+        if (viewCount == null)
+            return nothing;
         // when its a search-tile, we don't have any stats to show
         if (((_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype) === 'search') {
             return this.metadataTemplate('(Favorited search query)', '');
         }
-        return this.metadataTemplate(`${formatCount(viewCount !== null && viewCount !== void 0 ? viewCount : 0, this.formatSize)}`, msg('Views'));
+        return this.metadataTemplate(`${formatCount(viewCount, this.formatSize)}`, msg('Views'));
     }
     get ratingTemplate() {
         var _a;
@@ -262,6 +265,18 @@ let TileList = class TileList extends BaseTileComponent {
         var _a, _b;
         return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
     }
+    get webArchivesCaptureDatesTemplate() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.title))
+            return nothing;
+        return html `
+      <ul class="capture-dates">
+        ${map(this.model.captureDates, date => html `<li>
+            ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
+          </li>`)}
+      </ul>
+    `;
+    }
     // Utility functions
     // eslint-disable-next-line default-param-last
     metadataTemplate(text, label = '', id) {
@@ -545,6 +560,20 @@ let TileList = class TileList extends BaseTileComponent {
       #views-line {
         flex-wrap: wrap;
       }
+
+      .capture-dates {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+      }
+
+      .capture-dates a:link {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      .capture-dates a:hover {
+        text-decoration: underline;
+      }
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport DOMPurify from 'dompurify';\n\nimport { suppressedCollections } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        ${this.classSize === 'mobile'\n          ? this.mobileTemplate\n          : this.desktopTemplate}\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get mobileTemplate() {\n    return html`\n      <div id=\"list-line-top\">\n        <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n        <div id=\"list-line-right\">\n          <div id=\"title-line\">\n            <div id=\"title\">${this.titleTemplate}</div>\n            ${this.iconRightTemplate}\n          </div>\n        </div>\n      </div>\n      <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n    `;\n  }\n\n  private get desktopTemplate() {\n    return html`\n      <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n      <div id=\"list-line-right\">\n        <div id=\"title-line\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.iconRightTemplate}\n        </div>\n        ${this.detailsTemplate}\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate() {\n    if (!this.model) return nothing;\n\n    const isCollection = this.model.mediatype === 'collection';\n    const href = this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      isCollection\n    );\n\n    return html`<a href=${href}>\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isCompactTile=${false}\n        .isListTile=${true}\n        .viewSize=${this.classSize}\n        .loggedIn=${this.loggedIn}\n      >\n      </image-block>\n    </a> `;\n  }\n\n  private get detailsTemplate() {\n    return html`\n      ${this.itemLineTemplate} ${this.creatorTemplate}\n      <div id=\"dates-line\">\n        ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n      </div>\n      <div id=\"views-line\">\n        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n      </div>\n      ${this.topicsTemplate} ${this.collectionsTemplate}\n      ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n    `;\n  }\n\n  // Data templates\n  private get iconRightTemplate() {\n    return html`\n      <a id=\"icon-right\" href=${this.mediatypeURL}>\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .collections=${this.model?.collections}\n        >\n        </mediatype-icon>\n      </a>\n    `;\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n\n    // If the model has a server-specified href, use it\n    // Otherwise construct a details link using the identifier\n    return this.model?.href\n      ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n          >${this.model.title ?? this.model.identifier}</a\n        >`\n      : this.detailsLink(\n          this.model.identifier,\n          this.model.title,\n          this.model.mediatype === 'collection'\n        );\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    const volume = this.volumeTemplate;\n    const issue = this.issueTemplate;\n    if (!source && !volume && !issue) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\" class=\"metadata\">\n        ${this.labelTemplate(msg('Source'))}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, msg('Volume'));\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, msg('Issue'));\n  }\n\n  private get creatorTemplate() {\n    // \"Archivist since\" if account\n    if (this.model?.mediatype === 'account') {\n      return html`\n        <div id=\"creator\" class=\"metadata\">\n          <span class=\"label\"\n            >${this.displayValueProvider.accountLabel ?? nothing}</span\n          >\n        </div>\n      `;\n    }\n    // \"Creator\" if not account tile\n    if (!this.model?.creators || this.model.creators.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\" class=\"metadata\">\n        ${this.labelTemplate(msg('By'))}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          ', '\n        )}\n      </div>\n    `;\n  }\n\n  private get datePublishedTemplate() {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    const date: Date | undefined = this.model?.datePublished;\n    let format: DateFormat = 'long';\n    if (isFirstMillisecondOfUTCYear(date)) {\n      format = 'year-only';\n    }\n\n    return this.metadataTemplate(formatDate(date, format), msg('Published'));\n  }\n\n  // Show date label/value when sorted by date type\n  // Except datePublished which is always shown\n  private get dateSortByTemplate() {\n    if (\n      this.sortParam &&\n      (this.sortParam.field === 'addeddate' ||\n        this.sortParam.field === 'reviewdate' ||\n        this.sortParam.field === 'publicdate')\n    ) {\n      return this.metadataTemplate(\n        formatDate(this.date, 'long'),\n        this.displayValueProvider.dateLabel\n      );\n    }\n    return nothing;\n  }\n\n  private get viewsTemplate() {\n    const viewCount =\n      this.sortParam?.field === 'week'\n        ? this.model?.weeklyViewCount // weekly views\n        : this.model?.viewCount; // all-time views\n\n    // when its a search-tile, we don't have any stats to show\n    if (this.model?.mediatype === 'search') {\n      return this.metadataTemplate('(Favorited search query)', '');\n    }\n\n    return this.metadataTemplate(\n      `${formatCount(viewCount ?? 0, this.formatSize)}`,\n      msg('Views')\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\" class=\"metadata\">\n        ${this.labelTemplate(msg('Topics'))}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          ', '\n        )}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.collectionLinks || this.collectionLinks.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate(msg('Collections'))}\n        ${join(this.collectionLinks, ', ')}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      // Sanitize away any HTML tags and convert line breaks to spaces.\n      unsafeHTML(\n        DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n      ),\n      '',\n      'description'\n    );\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"list\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  // Utility functions\n  // eslint-disable-next-line default-param-last\n  private metadataTemplate(text: any, label = '', id?: string) {\n    if (!text) return nothing;\n    return html`\n      <div id=${ifDefined(id)} class=\"metadata\">\n        ${this.labelTemplate(label)} ${text}\n      </div>\n    `;\n  }\n\n  private labelTemplate(label: string) {\n    return html` ${label\n      ? html`<span class=\"label\">${label}: </span>`\n      : nothing}`;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // No whitespace after closing tag\n    // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n    /* eslint-disable lit/no-invalid-html */\n    return html`<a\n      href=\"${this.baseNavigationUrl}/search?query=${query}\"\n      rel=\"nofollow\"\n    >\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n    /* eslint-enable lit/no-invalid-html */\n  }\n\n  private detailsLink(\n    identifier?: string,\n    text?: string,\n    isCollection = false\n  ): TemplateResult | typeof nothing {\n    if (!identifier) return nothing;\n\n    const linkText = text ?? identifier;\n    const linkHref = this.displayValueProvider.itemPageUrl(\n      identifier,\n      isCollection\n    );\n\n    return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;\n  }\n\n  /** The URL of this item's mediatype collection, if defined. */\n  private get mediatypeURL(): string | typeof nothing {\n    // NB: baseNavigationUrl can be an empty string\n    if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n      return nothing;\n\n    // Need special handling for certain mediatypes that don't have a top-level collection page\n    switch (this.model.mediatype) {\n      case 'collection':\n        return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n      case 'account':\n        return nothing;\n      default:\n        return this.displayValueProvider.itemPageUrl(\n          this.model.mediatype,\n          true\n        );\n    }\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model') || changed.has('collectionTitles')) {\n      this.buildCollectionLinks();\n    }\n  }\n\n  private async buildCollectionLinks() {\n    if (!this.model?.collections || this.model.collections.length === 0) {\n      return;\n    }\n\n    // Note: quirk of Lit: need to replace collectionLinks array,\n    // otherwise it will not re-render. Can't simply alter the array.\n    this.collectionLinks = [];\n    const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];\n    for (const collection of this.model.collections) {\n      // Don't include favorites or collections that are meant to be suppressed\n      if (\n        !suppressedCollections[collection] &&\n        !collection.startsWith('fav-')\n      ) {\n        newCollectionLinks.push(\n          this.detailsLink(\n            collection,\n            this.collectionTitles?.get(collection) ?? collection,\n            true\n          )\n        );\n      }\n    }\n    this.collectionLinks = newCollectionLinks;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      div a {\n        text-decoration: none;\n      }\n\n      div a:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      #list-line.mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      #list-line.desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      /* fields */\n      #icon-right {\n        width: 20px;\n        padding-top: 5px;\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n        --iconTextAlign: right;\n        margin-top: -8px;\n        text-align: right;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        /* align top of text with image */\n        line-height: 25px;\n        margin-top: -4px;\n        padding-bottom: 2px;\n        flex-grow: 1;\n\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 3;\n        overflow: hidden;\n        overflow-wrap: anywhere;\n      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #description,\n      #creator,\n      #topics,\n      #source {\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n\n        /*\n         * Safari doesn't always respect the line-clamping rules above,\n         * so we add this to ensure these fields still get truncated\n         */\n        max-height: 60px;\n      }\n\n      #collections {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 3;\n        overflow: hidden;\n        overflow-wrap: anywhere;\n      }\n\n      #collections > a {\n        display: inline-block;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      #description {\n        padding-top: 10px;\n      }\n\n      /* Top level container */\n      #list-line {\n        display: flex;\n      }\n\n      #list-line.mobile {\n        flex-direction: column;\n      }\n\n      #list-line.desktop {\n        column-gap: 10px;\n      }\n\n      #list-line-top {\n        display: flex;\n        column-gap: 7px;\n      }\n\n      #list-line-bottom {\n        padding-top: 4px;\n      }\n\n      #list-line-right,\n      #list-line-top,\n      #list-line-bottom {\n        width: 100%;\n      }\n\n      /*\n       * If the container becomes very tiny, don't let the thumbnail side take\n       * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n       */\n      #list-line-left {\n        max-width: 25%;\n\n        display: flex;\n        flex-direction: column;\n        row-gap: 5px;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      /* Lines containing multiple div as row */\n      #item-line,\n      #dates-line,\n      #views-line,\n      #title-line {\n        display: flex;\n        flex-direction: row;\n        column-gap: 10px;\n      }\n\n      /*\n       * With the exception of the title line, allow these to wrap if\n       * the space becomes too small to accommodate them together.\n       * \n       * The title line is excluded because it contains the mediatype icon\n       * which we don't want to wrap.\n       */\n      #item-line,\n      #dates-line,\n      #views-line {\n        flex-wrap: wrap;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport DOMPurify from 'dompurify';\n\nimport { suppressedCollections } from '../../models';\nimport type { CollectionTitles } from '../../data-source/models';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        ${this.classSize === 'mobile'\n          ? this.mobileTemplate\n          : this.desktopTemplate}\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get mobileTemplate() {\n    return html`\n      <div id=\"list-line-top\">\n        <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n        <div id=\"list-line-right\">\n          <div id=\"title-line\">\n            <div id=\"title\">${this.titleTemplate}</div>\n            ${this.iconRightTemplate}\n          </div>\n        </div>\n      </div>\n      <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n    `;\n  }\n\n  private get desktopTemplate() {\n    return html`\n      <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n      <div id=\"list-line-right\">\n        <div id=\"title-line\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.iconRightTemplate}\n        </div>\n        ${this.detailsTemplate}\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate() {\n    if (!this.model) return nothing;\n\n    const isCollection = this.model.mediatype === 'collection';\n    const href = this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      isCollection\n    );\n\n    return html`<a href=${href}>\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isCompactTile=${false}\n        .isListTile=${true}\n        .viewSize=${this.classSize}\n        .loggedIn=${this.loggedIn}\n      >\n      </image-block>\n    </a> `;\n  }\n\n  private get detailsTemplate() {\n    return html`\n      ${this.itemLineTemplate} ${this.creatorTemplate}\n      <div id=\"dates-line\">\n        ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n        ${this.webArchivesCaptureDatesTemplate}\n      </div>\n      <div id=\"views-line\">\n        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n      </div>\n      ${this.topicsTemplate} ${this.collectionsTemplate}\n      ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n    `;\n  }\n\n  // Data templates\n  private get iconRightTemplate() {\n    return html`\n      <a id=\"icon-right\" href=${this.mediatypeURL}>\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .collections=${this.model?.collections}\n        >\n        </mediatype-icon>\n      </a>\n    `;\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n\n    // If the model has a server-specified href, use it\n    // Otherwise construct a details link using the identifier\n    return this.model?.href\n      ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\n          >${this.model.title ?? this.model.identifier}</a\n        >`\n      : this.detailsLink(\n          this.model.identifier,\n          this.model.title,\n          this.model.mediatype === 'collection'\n        );\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    const volume = this.volumeTemplate;\n    const issue = this.issueTemplate;\n    if (!source && !volume && !issue) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\" class=\"metadata\">\n        ${this.labelTemplate(msg('Source'))}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, msg('Volume'));\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, msg('Issue'));\n  }\n\n  private get creatorTemplate() {\n    // \"Archivist since\" if account\n    if (this.model?.mediatype === 'account') {\n      return html`\n        <div id=\"creator\" class=\"metadata\">\n          <span class=\"label\"\n            >${this.displayValueProvider.accountLabel ?? nothing}</span\n          >\n        </div>\n      `;\n    }\n    // \"Creator\" if not account tile\n    if (!this.model?.creators || this.model.creators.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\" class=\"metadata\">\n        ${this.labelTemplate(msg('By'))}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          ', '\n        )}\n      </div>\n    `;\n  }\n\n  private get datePublishedTemplate() {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    const date: Date | undefined = this.model?.datePublished;\n    let format: DateFormat = 'long';\n    if (isFirstMillisecondOfUTCYear(date)) {\n      format = 'year-only';\n    }\n\n    return this.metadataTemplate(formatDate(date, format), msg('Published'));\n  }\n\n  // Show date label/value when sorted by date type\n  // Except datePublished which is always shown\n  private get dateSortByTemplate() {\n    if (\n      this.sortParam &&\n      (this.sortParam.field === 'addeddate' ||\n        this.sortParam.field === 'reviewdate' ||\n        this.sortParam.field === 'publicdate')\n    ) {\n      return this.metadataTemplate(\n        formatDate(this.date, 'long'),\n        this.displayValueProvider.dateLabel\n      );\n    }\n    return nothing;\n  }\n\n  private get viewsTemplate() {\n    const viewCount =\n      this.sortParam?.field === 'week'\n        ? this.model?.weeklyViewCount // weekly views\n        : this.model?.viewCount; // all-time views\n    if (viewCount == null) return nothing;\n\n    // when its a search-tile, we don't have any stats to show\n    if (this.model?.mediatype === 'search') {\n      return this.metadataTemplate('(Favorited search query)', '');\n    }\n\n    return this.metadataTemplate(\n      `${formatCount(viewCount, this.formatSize)}`,\n      msg('Views')\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\" class=\"metadata\">\n        ${this.labelTemplate(msg('Topics'))}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          ', '\n        )}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.collectionLinks || this.collectionLinks.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate(msg('Collections'))}\n        ${join(this.collectionLinks, ', ')}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      // Sanitize away any HTML tags and convert line breaks to spaces.\n      unsafeHTML(\n        DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? '')\n      ),\n      '',\n      'description'\n    );\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"list\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private get webArchivesCaptureDatesTemplate():\n    | TemplateResult\n    | typeof nothing {\n    if (!this.model?.captureDates || !this.model?.title) return nothing;\n\n    return html`\n      <ul class=\"capture-dates\">\n        ${map(\n          this.model.captureDates,\n          date => html`<li>\n            ${this.displayValueProvider.webArchivesCaptureLink(\n              this.model!.title,\n              date\n            )}\n          </li>`\n        )}\n      </ul>\n    `;\n  }\n\n  // Utility functions\n  // eslint-disable-next-line default-param-last\n  private metadataTemplate(text: any, label = '', id?: string) {\n    if (!text) return nothing;\n    return html`\n      <div id=${ifDefined(id)} class=\"metadata\">\n        ${this.labelTemplate(label)} ${text}\n      </div>\n    `;\n  }\n\n  private labelTemplate(label: string) {\n    return html` ${label\n      ? html`<span class=\"label\">${label}: </span>`\n      : nothing}`;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // No whitespace after closing tag\n    // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n    /* eslint-disable lit/no-invalid-html */\n    return html`<a\n      href=\"${this.baseNavigationUrl}/search?query=${query}\"\n      rel=\"nofollow\"\n    >\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n    /* eslint-enable lit/no-invalid-html */\n  }\n\n  private detailsLink(\n    identifier?: string,\n    text?: string,\n    isCollection = false\n  ): TemplateResult | typeof nothing {\n    if (!identifier) return nothing;\n\n    const linkText = text ?? identifier;\n    const linkHref = this.displayValueProvider.itemPageUrl(\n      identifier,\n      isCollection\n    );\n\n    return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;\n  }\n\n  /** The URL of this item's mediatype collection, if defined. */\n  private get mediatypeURL(): string | typeof nothing {\n    // NB: baseNavigationUrl can be an empty string\n    if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\n      return nothing;\n\n    // Need special handling for certain mediatypes that don't have a top-level collection page\n    switch (this.model.mediatype) {\n      case 'collection':\n        return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\n      case 'account':\n        return nothing;\n      default:\n        return this.displayValueProvider.itemPageUrl(\n          this.model.mediatype,\n          true\n        );\n    }\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model') || changed.has('collectionTitles')) {\n      this.buildCollectionLinks();\n    }\n  }\n\n  private async buildCollectionLinks() {\n    if (!this.model?.collections || this.model.collections.length === 0) {\n      return;\n    }\n\n    // Note: quirk of Lit: need to replace collectionLinks array,\n    // otherwise it will not re-render. Can't simply alter the array.\n    this.collectionLinks = [];\n    const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];\n    for (const collection of this.model.collections) {\n      // Don't include favorites or collections that are meant to be suppressed\n      if (\n        !suppressedCollections[collection] &&\n        !collection.startsWith('fav-')\n      ) {\n        newCollectionLinks.push(\n          this.detailsLink(\n            collection,\n            this.collectionTitles?.get(collection) ?? collection,\n            true\n          )\n        );\n      }\n    }\n    this.collectionLinks = newCollectionLinks;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      div a {\n        text-decoration: none;\n      }\n\n      div a:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      #list-line.mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      #list-line.desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      /* fields */\n      #icon-right {\n        width: 20px;\n        padding-top: 5px;\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n        --iconTextAlign: right;\n        margin-top: -8px;\n        text-align: right;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        /* align top of text with image */\n        line-height: 25px;\n        margin-top: -4px;\n        padding-bottom: 2px;\n        flex-grow: 1;\n\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 3;\n        overflow: hidden;\n        overflow-wrap: anywhere;\n      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #description,\n      #creator,\n      #topics,\n      #source {\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n\n        /*\n         * Safari doesn't always respect the line-clamping rules above,\n         * so we add this to ensure these fields still get truncated\n         */\n        max-height: 60px;\n      }\n\n      #collections {\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 3;\n        overflow: hidden;\n        overflow-wrap: anywhere;\n      }\n\n      #collections > a {\n        display: inline-block;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      #description {\n        padding-top: 10px;\n      }\n\n      /* Top level container */\n      #list-line {\n        display: flex;\n      }\n\n      #list-line.mobile {\n        flex-direction: column;\n      }\n\n      #list-line.desktop {\n        column-gap: 10px;\n      }\n\n      #list-line-top {\n        display: flex;\n        column-gap: 7px;\n      }\n\n      #list-line-bottom {\n        padding-top: 4px;\n      }\n\n      #list-line-right,\n      #list-line-top,\n      #list-line-bottom {\n        width: 100%;\n      }\n\n      /*\n       * If the container becomes very tiny, don't let the thumbnail side take\n       * up too much space. Shouldn't make a difference on ordinary viewport sizes.\n       */\n      #list-line-left {\n        max-width: 25%;\n\n        display: flex;\n        flex-direction: column;\n        row-gap: 5px;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      /* Lines containing multiple div as row */\n      #item-line,\n      #dates-line,\n      #views-line,\n      #title-line {\n        display: flex;\n        flex-direction: row;\n        column-gap: 10px;\n      }\n\n      /*\n       * With the exception of the title line, allow these to wrap if\n       * the space becomes too small to accommodate them together.\n       * \n       * The title line is excluded because it contains the mediatype icon\n       * which we don't want to wrap.\n       */\n      #item-line,\n      #dates-line,\n      #views-line {\n        flex-wrap: wrap;\n      }\n\n      .capture-dates {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n      }\n\n      .capture-dates a:link {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      .capture-dates a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

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

@@ -125,11 +125,12 @@ let TileDispatcher = TileDispatcher_1 = class TileDispatcher extends BaseTileCom
      * (e.g., whether mouse listeners should be attached, etc.)
      */
     get shouldPrepareHoverPane() {
-        var _a;
+        var _a, _b;
         return (this.enableHoverPane &&
             !!this.tileDisplayMode &&
             TileDispatcher_1.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&
-            ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'search' // don't show hover panes on search tiles
+            ((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'search' && // don't show hover panes on search tiles
+            !((_b = this.model) === null || _b === void 0 ? void 0 : _b.captureDates) // don't show hover panes on web archive tiles
         );
     }
     get isHoverEnabled() {

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, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport {\n  HoverPaneController,\n  HoverPaneControllerInterface,\n  HoverPaneProperties,\n  HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends BaseTileComponent\n  implements\n    SharedResizeObserverResizeHandlerInterface,\n    HoverPaneProviderInterface\n{\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Boolean }) isManageView = false;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n  @property({ type: Boolean }) enableHoverPane = false;\n\n  @property({ type: String }) manageCheckTitle = msg(\n    'Remove this item from the list'\n  );\n\n  private hoverPaneController?: HoverPaneControllerInterface;\n\n  @query('#container')\n  private container!: HTMLDivElement;\n\n  @query('tile-hover-pane')\n  private hoverPane?: TileHoverPane;\n\n  /** Maps each display mode to whether hover panes should appear in that mode */\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n    TileDisplayMode,\n    boolean\n  > = {\n    grid: true,\n    'list-compact': true,\n    'list-detail': false,\n    'list-header': false,\n  };\n\n  render() {\n    const isGridMode = this.tileDisplayMode === 'grid';\n    const hoverPaneTemplate =\n      this.hoverPaneController?.getTemplate() ?? nothing;\n    return html`\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n        ${this.manageCheckTemplate} ${hoverPaneTemplate}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    if (this.shouldPrepareHoverPane) {\n      this.hoverPaneController = new HoverPaneController(this, {\n        mobileBreakpoint: this.mobileBreakpoint,\n        enableLongPress: false,\n      });\n    }\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n      this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam || defaultSortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=${this.linkTileHref}\n        aria-label=${this.model?.title ?? 'Untitled item'}\n        title=${this.shouldPrepareHoverPane\n          ? nothing // Don't show title tooltips when we have the tile info popups\n          : ifDefined(this.model?.title)}\n        @click=${this.handleLinkClicked}\n        @contextmenu=${this.handleLinkContextMenu}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  private get linkTileHref(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection'\n    );\n  }\n\n  private get manageCheckTemplate() {\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n    return html`\n      <div class=\"manage-check\">\n        <input\n          type=\"checkbox\"\n          title=${this.manageCheckTitle}\n          .checked=${this.model?.checked}\n          @change=${() => {\n            if (this.model) this.model.checked = !this.model.checked;\n          }}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Whether hover pane behavior should be prepared for this tile\n   * (e.g., whether mouse listeners should be attached, etc.)\n   */\n  private get shouldPrepareHoverPane(): boolean {\n    return (\n      this.enableHoverPane &&\n      !!this.tileDisplayMode &&\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n      this.model?.mediatype !== 'search' // don't show hover panes on search tiles\n    );\n  }\n\n  private get isHoverEnabled(): boolean {\n    return window.matchMedia('(hover: hover)').matches;\n  }\n\n  /** @inheritdoc */\n  getHoverPane(): TileHoverPane | undefined {\n    return this.hoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPaneProps(): HoverPaneProperties {\n    return this;\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  /**\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n   * In manage view, it also checks/unchecks the tile.\n   */\n  private handleLinkClicked(e: Event): void {\n    if (this.isManageView) {\n      e.preventDefault();\n      if (this.model) this.model.checked = !this.model.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('resultSelected', { detail: this.model })\n    );\n  }\n\n  /**\n   * Handler for when the tile link is right-clicked.\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n   */\n  private handleLinkContextMenu(e: Event): void {\n    if (this.isManageView && this.linkTileHref !== nothing) {\n      e.preventDefault();\n      window.open(this.linkTileHref, '_blank');\n    }\n  }\n\n  private tileInfoButtonPressed(\n    e: CustomEvent<{ x: number; y: number }>\n  ): void {\n    this.hoverPaneController?.toggleHoverPane({\n      coords: e.detail,\n      enableTouchBackdrop: true,\n    });\n  }\n\n  private get tile() {\n    const {\n      model,\n      collectionPagePath,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      creatorFilter,\n      mobileBreakpoint,\n      defaultSortParam,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </account-tile>`;\n          case 'search':\n            return html`<search-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${false}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </search-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam || defaultSortParam}\n              .creatorFilter=${creatorFilter}\n              .loggedIn=${this.loggedIn}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam || defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .collectionTitles=${this.collectionTitles}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam || defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\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      collection-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n      }\n\n      account-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #fcf5e6;\n      }\n\n      item-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #f1f1f4;\n      }\n\n      search-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n        --iconFillColor: #2c2c2c;\n      }\n\n      #container {\n        position: relative;\n        height: 100%;\n        border-radius: 4px;\n      }\n\n      #container.hoverable:hover {\n        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n        transition: box-shadow 0.1s ease;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n        transition: transform 0.05s ease;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n\n      .manage-check {\n        position: absolute;\n        right: 0;\n        top: 0;\n        border: 5px solid #2c2c2c;\n        border-radius: 3px;\n        background-color: #2c2c2c;\n        z-index: 1;\n      }\n\n      .manage-check > input[type='checkbox'] {\n        display: block;\n        margin: 0;\n      }\n\n      #touch-backdrop {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 2;\n        background: transparent;\n      }\n\n      tile-hover-pane {\n        position: absolute;\n        top: 0;\n        left: -9999px;\n        z-index: 2;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAOpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EACL,mBAAmB,GAIpB,MAAM,+BAA+B,CAAC;AAGvC,IAAa,cAAc,sBAA3B,MAAa,cACX,SAAQ,iBAAiB;IAD3B;QAME;;;;;;;;;;;;WAYG;;QAI0B,iBAAY,GAAG,KAAK,CAAC;QAOlD,uFAAuF;QAC1D,oBAAe,GAAG,KAAK,CAAC;QAEzB,qBAAgB,GAAG,GAAG,CAChD,gCAAgC,CACjC,CAAC;IAsZJ,CAAC;IAjYC,MAAM;;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC;QACnD,MAAM,iBAAiB,GACrB,MAAA,MAAA,IAAI,CAAC,mBAAmB,0CAAE,WAAW,EAAE,mCAAI,OAAO,CAAC;QACrD,OAAO,IAAI,CAAA;kCACmB,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO;UAC1D,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,cAAc;YACrB,CAAC,CAAC,IAAI,CAAC,YAAY;UACnB,IAAI,CAAC,mBAAmB,IAAI,iBAAiB;;KAElD,CAAC;IACJ,CAAC;IAES,YAAY;QACpB,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE;gBACvD,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;gBACvC,eAAe,EAAE,KAAK;aACvB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GACnE,IAAI,CAAC;QACP,OAAO,IAAI,CAAA;;;wBAGS,YAAY;qBACf,SAAS,IAAI,gBAAgB;4BACtB,gBAAgB;;;KAGvC,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,KAAK,aAAa;YACtC,CAAC,CAAC,IAAI,CAAC,IAAI;YACX,CAAC,CAAC,IAAI,CAAC,gBAAgB;KAC1B,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,YAAY;qBACX,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,mCAAI,eAAe;gBACzC,IAAI,CAAC,sBAAsB;YACjC,CAAC,CAAC,OAAO,CAAC,8DAA8D;YACxE,CAAC,CAAC,SAAS,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC;iBACvB,IAAI,CAAC,iBAAiB;uBAChB,IAAI,CAAC,qBAAqB;;UAEvC,IAAI,CAAC,IAAI;;KAEd,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI;YAC3D,OAAO,OAAO,CAAC;QAEjB,8CAA8C;QAC9C,oEAAoE;QACpE,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACnB,OAAO,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;SACtD;QAED,OAAO,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAC1C,IAAI,CAAC,KAAK,CAAC,UAAU,EACrB,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,YAAY,CACtC,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;;QAC7B,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM;YAAE,OAAO,OAAO,CAAC;QAE1E,OAAO,IAAI,CAAA;;;;kBAIG,IAAI,CAAC,gBAAgB;qBAClB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;oBACpB,GAAG,EAAE;YACb,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAC3D,CAAC;;;KAGN,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;;QAChC,OAAO,CACL,IAAI,CAAC,eAAe;YACpB,CAAC,CAAC,IAAI,CAAC,eAAe;YACtB,gBAAc,CAAC,wBAAwB,CAAC,IAAI,CAAC,eAAe,CAAC;YAC7D,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,QAAQ,IAAI,yCAAyC;YAC/E,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAA,CAAC,8CAA8C;SACzE,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC;IACrD,CAAC;IAED,kBAAkB;IAClB,YAAY;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,kBAAkB;IAClB,iBAAiB;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC5C,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAClD,CAAC;IAEO,qBAAqB,CAAC,QAAwC;QACpE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,CAAC;YACvB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAEO,sBAAsB;;QAC5B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,MAAA,IAAI,CAAC,cAAc,0CAAE,WAAW,CAAC;YAC/B,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAqB;QAC3B,IAAI,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE;YAC/B,MAAM,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAChC,gBAAgB,CACgB,CAAC;YACnC,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;YAC7C,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC/B;IACH,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,CAAQ;QAChC,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,KAAK;gBAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;SAC1D;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAC1D,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,qBAAqB,CAAC,CAAQ;QACpC,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO,EAAE;YACtD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;SAC1C;IACH,CAAC;IAEO,qBAAqB,CAC3B,CAAwC;;QAExC,MAAA,IAAI,CAAC,mBAAmB,0CAAE,eAAe,CAAC;YACxC,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC;IACL,CAAC;IAED,IAAY,IAAI;QACd,MAAM,EACJ,KAAK,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAE3B,QAAQ,IAAI,CAAC,eAAe,EAAE;YAC5B,KAAK,MAAM;gBACT,QAAQ,KAAK,CAAC,SAAS,EAAE;oBACvB,KAAK,YAAY;wBACf,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;8BACd,IAAI,CAAC,YAAY;gCACf,CAAC,IAAI,CAAC,cAAc;mCACjB,IAAI,CAAC,qBAAqB;;+BAE9B,CAAC;oBACtB,KAAK,SAAS;wBACZ,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;8BACd,IAAI,CAAC,YAAY;gCACf,CAAC,IAAI,CAAC,cAAc;mCACjB,IAAI,CAAC,qBAAqB;;4BAEjC,CAAC;oBACnB,KAAK,QAAQ;wBACX,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;8BACjB,YAAY;+BACX,aAAa;+BACb,aAAa;8BACd,IAAI,CAAC,YAAY;gCACf,KAAK;mCACF,IAAI,CAAC,qBAAqB;;2BAElC,CAAC;oBAClB;wBACE,OAAO,IAAI,CAAA;uBACA,KAAK;oCACQ,kBAAkB;8BACxB,IAAI,CAAC,YAAY;+BAChB,IAAI,CAAC,aAAa;8BACnB,IAAI,CAAC,YAAY;2BACpB,SAAS,IAAI,gBAAgB;+BACzB,aAAa;0BAClB,IAAI,CAAC,QAAQ;8BACT,IAAI,CAAC,YAAY;gCACf,CAAC,IAAI,CAAC,cAAc;mCACjB,IAAI,CAAC,qBAAqB;;yBAEpC,CAAC;iBACjB;YACH,KAAK,cAAc;gBACjB,OAAO,IAAI,CAAA;mBACA,KAAK;gCACQ,kBAAkB;0BACxB,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS,IAAI,gBAAgB;2BACzB,aAAa;8BACV,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;;6BAEN,CAAC;YACxB,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAA;mBACA,KAAK;gCACQ,kBAAkB;8BACpB,IAAI,CAAC,gBAAgB;0BACzB,YAAY;2BACX,aAAa;+BACT,iBAAiB;uBACzB,SAAS,IAAI,gBAAgB;2BACzB,aAAa;8BACV,gBAAgB;0BACpB,IAAI,CAAC,YAAY;sBACrB,IAAI,CAAC,QAAQ;;qBAEd,CAAC;YAChB;gBACE,OAAO,OAAO,CAAC;SAClB;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoFT,CAAC;IACJ,CAAC;CACF,CAAA;AA5YC,+EAA+E;AACvD,uCAAwB,GAG5C;IACF,IAAI,EAAE,IAAI;IACV,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,KAAK;IACpB,aAAa,EAAE,KAAK;CACpB,CAAA;AAjC0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAmC;AAEjC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAAsB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAgD;AAG3E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAGP;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAyB;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAEzB;AAKF;IADC,KAAK,CAAC,YAAY,CAAC;iDACe;AAGnC;IADC,KAAK,CAAC,iBAAiB,CAAC;iDACS;AA1CvB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAwb1B;SAxbY,cAAc","sourcesContent":["import { css, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\nimport type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport type { TileDisplayMode } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './grid/search-tile';\nimport './hover/tile-hover-pane';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\nimport type { TileHoverPane } from './hover/tile-hover-pane';\nimport { BaseTileComponent } from './base-tile-component';\nimport {\n  HoverPaneController,\n  HoverPaneControllerInterface,\n  HoverPaneProperties,\n  HoverPaneProviderInterface,\n} from './hover/hover-pane-controller';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends BaseTileComponent\n  implements\n    SharedResizeObserverResizeHandlerInterface,\n    HoverPaneProviderInterface\n{\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  @property({ type: String }) tileDisplayMode?: TileDisplayMode;\n\n  @property({ type: Boolean }) isManageView = false;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  /** Whether this tile should include a hover pane at all (for applicable tile modes) */\n  @property({ type: Boolean }) enableHoverPane = false;\n\n  @property({ type: String }) manageCheckTitle = msg(\n    'Remove this item from the list'\n  );\n\n  private hoverPaneController?: HoverPaneControllerInterface;\n\n  @query('#container')\n  private container!: HTMLDivElement;\n\n  @query('tile-hover-pane')\n  private hoverPane?: TileHoverPane;\n\n  /** Maps each display mode to whether hover panes should appear in that mode */\n  private static readonly HOVER_PANE_DISPLAY_MODES: Record<\n    TileDisplayMode,\n    boolean\n  > = {\n    grid: true,\n    'list-compact': true,\n    'list-detail': false,\n    'list-header': false,\n  };\n\n  render() {\n    const isGridMode = this.tileDisplayMode === 'grid';\n    const hoverPaneTemplate =\n      this.hoverPaneController?.getTemplate() ?? nothing;\n    return html`\n      <div id=\"container\" class=${isGridMode ? 'hoverable' : nothing}>\n        ${this.tileDisplayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n        ${this.manageCheckTemplate} ${hoverPaneTemplate}\n      </div>\n    `;\n  }\n\n  protected firstUpdated(): void {\n    if (this.shouldPrepareHoverPane) {\n      this.hoverPaneController = new HoverPaneController(this, {\n        mobileBreakpoint: this.mobileBreakpoint,\n        enableLongPress: false,\n      });\n    }\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam, defaultSortParam, mobileBreakpoint } =\n      this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam || defaultSortParam}\n        .mobileBreakpoint=${mobileBreakpoint}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.tileDisplayMode === 'list-detail'\n        ? this.tile\n        : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=${this.linkTileHref}\n        aria-label=${this.model?.title ?? 'Untitled item'}\n        title=${this.shouldPrepareHoverPane\n          ? nothing // Don't show title tooltips when we have the tile info popups\n          : ifDefined(this.model?.title)}\n        @click=${this.handleLinkClicked}\n        @contextmenu=${this.handleLinkContextMenu}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  private get linkTileHref(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection'\n    );\n  }\n\n  private get manageCheckTemplate() {\n    if (!this.isManageView || this.tileDisplayMode !== 'grid') return nothing;\n\n    return html`\n      <div class=\"manage-check\">\n        <input\n          type=\"checkbox\"\n          title=${this.manageCheckTitle}\n          .checked=${this.model?.checked}\n          @change=${() => {\n            if (this.model) this.model.checked = !this.model.checked;\n          }}\n        />\n      </div>\n    `;\n  }\n\n  /**\n   * Whether hover pane behavior should be prepared for this tile\n   * (e.g., whether mouse listeners should be attached, etc.)\n   */\n  private get shouldPrepareHoverPane(): boolean {\n    return (\n      this.enableHoverPane &&\n      !!this.tileDisplayMode &&\n      TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&\n      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles\n      !this.model?.captureDates // don't show hover panes on web archive tiles\n    );\n  }\n\n  private get isHoverEnabled(): boolean {\n    return window.matchMedia('(hover: hover)').matches;\n  }\n\n  /** @inheritdoc */\n  getHoverPane(): TileHoverPane | undefined {\n    return this.hoverPane;\n  }\n\n  /** @inheritdoc */\n  getHoverPaneProps(): HoverPaneProperties {\n    return this;\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  /**\n   * Handler for when the tile link is left-clicked. Emits the `resultSelected` event.\n   * In manage view, it also checks/unchecks the tile.\n   */\n  private handleLinkClicked(e: Event): void {\n    if (this.isManageView) {\n      e.preventDefault();\n      if (this.model) this.model.checked = !this.model.checked;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('resultSelected', { detail: this.model })\n    );\n  }\n\n  /**\n   * Handler for when the tile link is right-clicked.\n   * In manage view, it opens the item in a new tab. Otherwise, does nothing.\n   */\n  private handleLinkContextMenu(e: Event): void {\n    if (this.isManageView && this.linkTileHref !== nothing) {\n      e.preventDefault();\n      window.open(this.linkTileHref, '_blank');\n    }\n  }\n\n  private tileInfoButtonPressed(\n    e: CustomEvent<{ x: number; y: number }>\n  ): void {\n    this.hoverPaneController?.toggleHoverPane({\n      coords: e.detail,\n      enableTouchBackdrop: true,\n    });\n  }\n\n  private get tile() {\n    const {\n      model,\n      collectionPagePath,\n      baseNavigationUrl,\n      currentWidth,\n      currentHeight,\n      sortParam,\n      creatorFilter,\n      mobileBreakpoint,\n      defaultSortParam,\n    } = this;\n\n    if (!model) return nothing;\n\n    switch (this.tileDisplayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </account-tile>`;\n          case 'search':\n            return html`<search-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .baseImageUrl=${this.baseImageUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .creatorFilter=${creatorFilter}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${false}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </search-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .collectionPagePath=${collectionPagePath}\n              .currentWidth=${this.currentWidth}\n              .currentHeight=${this.currentHeight}\n              .baseImageUrl=${this.baseImageUrl}\n              .sortParam=${sortParam || defaultSortParam}\n              .creatorFilter=${creatorFilter}\n              .loggedIn=${this.loggedIn}\n              .isManageView=${this.isManageView}\n              ?showInfoButton=${!this.isHoverEnabled}\n              @infoButtonPressed=${this.tileInfoButtonPressed}\n            >\n            </item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam || defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\n        </tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .collectionPagePath=${collectionPagePath}\n          .collectionTitles=${this.collectionTitles}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam || defaultSortParam}\n          .creatorFilter=${creatorFilter}\n          .mobileBreakpoint=${mobileBreakpoint}\n          .baseImageUrl=${this.baseImageUrl}\n          .loggedIn=${this.loggedIn}\n        >\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      collection-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n      }\n\n      account-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #fcf5e6;\n      }\n\n      item-tile {\n        --tileBorderColor: #dddddd;\n        --imageBlockBackgroundColor: #f1f1f4;\n      }\n\n      search-tile {\n        --tileBorderColor: #555555;\n        --tileBackgroundColor: #666666;\n        --imageBlockBackgroundColor: #666666;\n        --iconFillColor: #2c2c2c;\n      }\n\n      #container {\n        position: relative;\n        height: 100%;\n        border-radius: 4px;\n      }\n\n      #container.hoverable:hover {\n        box-shadow: 0 0 6px 2px rgba(8, 8, 32, 0.8);\n        transition: box-shadow 0.1s ease;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n        transition: transform 0.05s ease;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n\n      .manage-check {\n        position: absolute;\n        right: 0;\n        top: 0;\n        border: 5px solid #2c2c2c;\n        border-radius: 3px;\n        background-color: #2c2c2c;\n        z-index: 1;\n      }\n\n      .manage-check > input[type='checkbox'] {\n        display: block;\n        margin: 0;\n      }\n\n      #touch-backdrop {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 2;\n        background: transparent;\n      }\n\n      tile-hover-pane {\n        position: absolute;\n        top: 0;\n        left: -9999px;\n        z-index: 2;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { nothing } from 'lit';
+import { TemplateResult, nothing } from 'lit';
 import type { SortParam } from '@internetarchive/search-service';
 import type { TileModel } from '../models';
 /**
@@ -40,4 +40,8 @@ export declare class TileDisplayValueProvider {
      * item is specified to be a collection (default false).
      */
     itemPageUrl(identifier?: string, isCollection?: boolean): string | typeof nothing;
+    /**
+     * Produces a template for a link to a single web capture of the given URL and date
+     */
+    webArchivesCaptureLink(url: string, date: Date): TemplateResult;
 }

package/dist/src/tiles/tile-display-value-provider.js

@@ -1,5 +1,6 @@
-import { nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { msg, str } from '@lit/localize';
+import { formatDate } from '../utils/format-date';
 /**
  * A class encapsulating shared logic for converting model values into display values
  * across different types of tiles.
@@ -77,5 +78,18 @@ export class TileDisplayValueProvider {
         const basePath = isCollection ? this.collectionPagePath : '/details/';
         return `${this.baseNavigationUrl}${basePath}${identifier}`;
     }
+    /**
+     * Produces a template for a link to a single web capture of the given URL and date
+     */
+    webArchivesCaptureLink(url, date) {
+        // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
+        const captureDateStr = date
+            .toISOString()
+            .replace(/[TZ:-]/g, '')
+            .replace(/\..*/, '');
+        const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(url)}`;
+        const captureText = formatDate(date, 'long');
+        return html ` <a href=${captureHref}> ${captureText} </a> `;
+    }
 }
 //# sourceMappingURL=tile-display-value-provider.js.map

package/dist/src/tiles/tile-display-value-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-display-value-provider.js","sourceRoot":"","sources":["../../../src/tiles/tile-display-value-provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIzC;;;GAGG;AACH,MAAM,OAAO,wBAAwB;IAWnC,YACE,UAMI,EAAE;;QAEN,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACnD,IAAI,CAAC,kBAAkB,GAAG,MAAA,OAAO,CAAC,kBAAkB,mCAAI,WAAW,CAAC;QACpE,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC;IAC7C,CAAC;IAED;;;;OAIG;IACH,IAAI,0BAA0B;;QAC5B,IAAI,eAAe,CAAC;QAEpB,4EAA4E;QAC5E,uDAAuD;QACvD,IAAI,IAAI,CAAC,aAAa,KAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAC,MAAM,CAAA,EAAE;YACrD,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,8BAA8B;YACtE,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACnD,oFAAoF;YACpF,mFAAmF;YACnF,iFAAiF;YACjF,OAAO;iBACJ,SAAS,CAAC,KAAK,CAAC;iBAChB,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;iBACxB,WAAW,EAAE;iBACb,UAAU,CAAC,WAAW,CAAC,CAC3B,CAAC;SACH;QAED,OAAO,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;IAChD,CAAC;IAED;;;OAGG;IACH,IAAI,YAAY;;QACd,OAAO,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;YAC1B,CAAC,CAAC,GAAG,CAAC,GAAG,CAAA,mBAAmB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;YACjE,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED;;;OAGG;IACH,IAAI,SAAS;;QACX,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,YAAY;gBACf,OAAO,GAAG,CAAC,UAAU,CAAC,CAAC;YACzB,KAAK,YAAY;gBACf,OAAO,GAAG,CAAC,UAAU,CAAC,CAAC;YACzB,KAAK,WAAW;gBACd,OAAO,GAAG,CAAC,OAAO,CAAC,CAAC;YACtB,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC,WAAW,CAAC,CAAC;YAC1B;gBACE,OAAO,EAAE,CAAC;SACb;IACH,CAAC;IAED;;;;OAIG;IACH,WAAW,CACT,UAAmB,EACnB,YAAY,GAAG,KAAK;QAEpB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI;YAAE,OAAO,OAAO,CAAC;QAClE,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC;QACtE,OAAO,GAAG,IAAI,CAAC,iBAAiB,GAAG,QAAQ,GAAG,UAAU,EAAE,CAAC;IAC7D,CAAC;CACF","sourcesContent":["import { nothing } from 'lit';\nimport { msg, str } from '@lit/localize';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../models';\n\n/**\n * A class encapsulating shared logic for converting model values into display values\n * across different types of tiles.\n */\nexport class TileDisplayValueProvider {\n  private model?: TileModel;\n\n  private baseNavigationUrl?: string;\n\n  private collectionPagePath?: string;\n\n  private sortParam?: SortParam;\n\n  private creatorFilter?: string;\n\n  constructor(\n    options: {\n      model?: TileModel;\n      baseNavigationUrl?: string;\n      collectionPagePath?: string;\n      sortParam?: SortParam;\n      creatorFilter?: string;\n    } = {}\n  ) {\n    this.model = options.model;\n    this.baseNavigationUrl = options.baseNavigationUrl;\n    this.collectionPagePath = options.collectionPagePath ?? '/details/';\n    this.sortParam = options.sortParam;\n    this.creatorFilter = options.creatorFilter;\n  }\n\n  /**\n   * Examines the creator(s) for the given tile model, returning\n   * the first creator whose name matches the provided filter\n   * (or simply the first creator overall if no filter is provided).\n   */\n  get firstCreatorMatchingFilter(): string | undefined {\n    let matchingCreator;\n\n    // If we're filtering by creator initial and have multiple creators, we want\n    // to surface the first creator who matches the filter.\n    if (this.creatorFilter && this.model?.creators.length) {\n      const firstLetter = this.creatorFilter; // This is just to satisfy tsc\n      matchingCreator = this.model.creators.find(creator =>\n        // Decompose combining characters first, so that e.g., filtering on E matches É too.\n        // Then remove anything that isn't strictly alphabetic, since our filters currently\n        // only handle A-Z. The first such letter (if one exists) is what needs to match.\n        creator\n          .normalize('NFD')\n          .replace(/[^A-Z]+/gi, '')\n          .toUpperCase()\n          .startsWith(firstLetter)\n      );\n    }\n\n    return matchingCreator ?? this.model?.creator;\n  }\n\n  /**\n   * The label indicating what year an account item was created.\n   * E.g., \"Archivist since 2015\"\n   */\n  get accountLabel(): string {\n    return this.model?.dateAdded\n      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)\n      : '';\n  }\n\n  /**\n   * The readable label for the current sort if it is a type of date sort,\n   * or the empty string otherwise.\n   */\n  get dateLabel(): string {\n    switch (this.sortParam?.field) {\n      case 'publicdate':\n        return msg('Archived');\n      case 'reviewdate':\n        return msg('Reviewed');\n      case 'addeddate':\n        return msg('Added');\n      case 'date':\n        return msg('Published');\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Produces a URL pointing at the item page for the given identifier,\n   * using the current base URL and the correct path based on whether the\n   * item is specified to be a collection (default false).\n   */\n  itemPageUrl(\n    identifier?: string,\n    isCollection = false\n  ): string | typeof nothing {\n    if (!identifier || this.baseNavigationUrl == null) return nothing;\n    const basePath = isCollection ? this.collectionPagePath : '/details/';\n    return `${this.baseNavigationUrl}${basePath}${identifier}`;\n  }\n}\n"]}
+{"version":3,"file":"tile-display-value-provider.js","sourceRoot":"","sources":["../../../src/tiles/tile-display-value-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, nothing } from 'lit';\nimport { msg, str } from '@lit/localize';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../models';\nimport { formatDate } from '../utils/format-date';\n\n/**\n * A class encapsulating shared logic for converting model values into display values\n * across different types of tiles.\n */\nexport class TileDisplayValueProvider {\n  private model?: TileModel;\n\n  private baseNavigationUrl?: string;\n\n  private collectionPagePath?: string;\n\n  private sortParam?: SortParam;\n\n  private creatorFilter?: string;\n\n  constructor(\n    options: {\n      model?: TileModel;\n      baseNavigationUrl?: string;\n      collectionPagePath?: string;\n      sortParam?: SortParam;\n      creatorFilter?: string;\n    } = {}\n  ) {\n    this.model = options.model;\n    this.baseNavigationUrl = options.baseNavigationUrl;\n    this.collectionPagePath = options.collectionPagePath ?? '/details/';\n    this.sortParam = options.sortParam;\n    this.creatorFilter = options.creatorFilter;\n  }\n\n  /**\n   * Examines the creator(s) for the given tile model, returning\n   * the first creator whose name matches the provided filter\n   * (or simply the first creator overall if no filter is provided).\n   */\n  get firstCreatorMatchingFilter(): string | undefined {\n    let matchingCreator;\n\n    // If we're filtering by creator initial and have multiple creators, we want\n    // to surface the first creator who matches the filter.\n    if (this.creatorFilter && this.model?.creators.length) {\n      const firstLetter = this.creatorFilter; // This is just to satisfy tsc\n      matchingCreator = this.model.creators.find(creator =>\n        // Decompose combining characters first, so that e.g., filtering on E matches É too.\n        // Then remove anything that isn't strictly alphabetic, since our filters currently\n        // only handle A-Z. The first such letter (if one exists) is what needs to match.\n        creator\n          .normalize('NFD')\n          .replace(/[^A-Z]+/gi, '')\n          .toUpperCase()\n          .startsWith(firstLetter)\n      );\n    }\n\n    return matchingCreator ?? this.model?.creator;\n  }\n\n  /**\n   * The label indicating what year an account item was created.\n   * E.g., \"Archivist since 2015\"\n   */\n  get accountLabel(): string {\n    return this.model?.dateAdded\n      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)\n      : '';\n  }\n\n  /**\n   * The readable label for the current sort if it is a type of date sort,\n   * or the empty string otherwise.\n   */\n  get dateLabel(): string {\n    switch (this.sortParam?.field) {\n      case 'publicdate':\n        return msg('Archived');\n      case 'reviewdate':\n        return msg('Reviewed');\n      case 'addeddate':\n        return msg('Added');\n      case 'date':\n        return msg('Published');\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Produces a URL pointing at the item page for the given identifier,\n   * using the current base URL and the correct path based on whether the\n   * item is specified to be a collection (default false).\n   */\n  itemPageUrl(\n    identifier?: string,\n    isCollection = false\n  ): string | typeof nothing {\n    if (!identifier || this.baseNavigationUrl == null) return nothing;\n    const basePath = isCollection ? this.collectionPagePath : '/details/';\n    return `${this.baseNavigationUrl}${basePath}${identifier}`;\n  }\n\n  /**\n   * Produces a template for a link to a single web capture of the given URL and date\n   */\n  webArchivesCaptureLink(url: string, date: Date): TemplateResult {\n    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')\n    const captureDateStr = date\n      .toISOString()\n      .replace(/[TZ:-]/g, '')\n      .replace(/\\..*/, '');\n    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(\n      url\n    )}`;\n    const captureText = formatDate(date, 'long');\n\n    return html` <a href=${captureHref}> ${captureText} </a> `;\n  }\n}\n"]}

package/dist/test/collection-browser.test.js

@@ -656,12 +656,12 @@ describe('Collection Browser', () => {
         el.sortDirection = 'asc';
         el.selectedCreatorFilter = 'X';
         await el.updateComplete;
-        await el.initialSearchComplete;
+        await nextTick();
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('first-creator');
         expect((_d = (_c = (_b = searchService.searchParams) === null || _b === void 0 ? void 0 : _b.filters) === null || _c === void 0 ? void 0 : _c.firstCreator) === null || _d === void 0 ? void 0 : _d.X).to.equal(FilterConstraint.INCLUDE);
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
-        await el.initialSearchComplete;
+        await nextTick();
         expect((_e = searchService.searchParams) === null || _e === void 0 ? void 0 : _e.query).to.equal('collection:foo');
         expect((_g = (_f = searchService.searchParams) === null || _f === void 0 ? void 0 : _f.filters) === null || _g === void 0 ? void 0 : _g.firstCreator).not.to.exist;
     });
@@ -1034,8 +1034,6 @@ describe('Collection Browser', () => {
         .withinCollection=${'foobar'}
       >
       </collection-browser>`);
-        await el.initialSearchComplete;
-        await el.updateComplete;
         el.baseQuery = 'bar';
         await el.updateComplete;
         expect(el.withinCollection).to.equal('foobar');
@@ -1066,8 +1064,6 @@ describe('Collection Browser', () => {
         .withinCollection=${'foobar'}
       >
       </collection-browser>`);
-        await el.initialSearchComplete;
-        await el.updateComplete;
         el.withinCollection = 'bar';
         await el.updateComplete;
         expect(el.withinCollection).to.equal('bar');