@internetarchive/collection-browser 4.4.0 → 4.5.0

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

@@ -19,6 +19,7 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         /*
          * Reactive properties inherited from BaseTileComponent:
          *  - model?: TileModel;
+         *  - tileActions: TileAction[] = [];
          *  - currentWidth?: number;
          *  - currentHeight?: number;
          *  - baseNavigationUrl?: string;
@@ -46,30 +47,30 @@ let ItemTile = class ItemTile extends BaseTileComponent {
             'snippets-only': this.layoutType === 'snippets-only',
             minimal: this.layoutType === 'minimal',
         });
-        return html `
-      <div class=${containerClasses}>
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.imageBlockTemplate}
-
-            <div id="title">
-              <h3 class="truncated" title=${ifDefined(itemTitle)}>
-                ${itemTitle}
-              </h3>
-            </div>
-
-            ${this.volumeIssueTemplate}
+        return html `
+      <div class=${containerClasses}>
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.imageBlockTemplate}
+
+            <div id="title">
+              <h3 class="truncated" title=${ifDefined(itemTitle)}>
+                ${itemTitle}
+              </h3>
+            </div>
+
+            ${this.volumeIssueTemplate}
             ${this.isSortedByDate
             ? this.sortedDateInfoTemplate
-            : this.creatorTemplate}
-            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
-            ${this.reviewBlockTemplate}
-          </div>
-
-          ${this.tileStatsTemplate}
-        </div>
-      </div>
+            : this.creatorTemplate}
+            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
+            ${this.reviewBlockTemplate}
+          </div>
+
+          ${this.tileStatsTemplate}
+        </div>
+      </div>
     `;
     }
     /**
@@ -79,26 +80,26 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
         if (!displayedCreator)
             return nothing;
-        return html `
-      <div class="created-by">
-        <span class="truncated" title=${displayedCreator}>
-          by&nbsp;${displayedCreator}
-        </span>
-      </div>
+        return html `
+      <div class="created-by">
+        <span class="truncated" title=${displayedCreator}>
+          by&nbsp;${displayedCreator}
+        </span>
+      </div>
     `;
     }
     get imageBlockTemplate() {
-        return html `
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'grid'}
-      >
-      </image-block>
+        return html `
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.suppressBlurring}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'grid'}
+      >
+      </image-block>
     `;
     }
     get sortedDateInfoTemplate() {
@@ -129,18 +130,18 @@ let ItemTile = class ItemTile extends BaseTileComponent {
             return nothing;
         }
         const formattedDate = this.getFormattedDate(sortedValue.value, format);
-        return html `
-      <div class="date-sorted-by truncated">
-        <span>${sortedValue.field} ${formattedDate}</span>
-      </div>
+        return html `
+      <div class="date-sorted-by truncated">
+        <span>${sortedValue.field} ${formattedDate}</span>
+      </div>
     `;
     }
     get infoButtonTemplate() {
         // &#9432; is an information icon
         return this.showInfoButton
-            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
+            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
         </button>`
             : nothing;
     }
@@ -148,14 +149,14 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         if (!this.model?.review)
             return nothing;
         const { reviewtitle, reviewbody, stars } = this.model.review;
-        return html `
-      <review-block
-        viewsize="grid"
-        title=${ifDefined(reviewtitle)}
-        body=${ifDefined(reviewbody)}
-        starRating=${ifDefined(stars)}
-      >
-      </review-block>
+        return html `
+      <review-block
+        viewsize="grid"
+        title=${ifDefined(reviewtitle)}
+        body=${ifDefined(reviewbody)}
+        starRating=${ifDefined(stars)}
+      >
+      </review-block>
     `;
     }
     get textSnippetsTemplate() {
@@ -164,31 +165,31 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         if (['stats-only', 'minimal'].includes(this.layoutType)) {
             return nothing;
         }
-        return html `
-      <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
-      </text-snippet-block>
+        return html `
+      <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
+      </text-snippet-block>
     `;
     }
     get volumeIssueTemplate() {
         if (!this.model?.volume || !this.model?.issue)
             return nothing;
-        return html `
-      <div class="volume-issue">
-        <span class="truncated" title="volume|issue">
-          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}
-        </span>
-      </div>
+        return html `
+      <div class="volume-issue">
+        <span class="truncated" title="volume|issue">
+          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}
+        </span>
+      </div>
     `;
     }
     get webArchivesCaptureDatesTemplate() {
         if (!this.model?.captureDates || !this.model.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>
+        return html `
+      <ul class="capture-dates">
+        ${map(this.model.captureDates, date => html `<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
+            </li>`)}
+      </ul>
     `;
     }
     /**
@@ -202,18 +203,18 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         const [viewCount, viewLabel] = effectiveSort?.field === 'week'
             ? [this.model?.weeklyViewCount, 'weekly views']
             : [this.model?.viewCount, 'all-time views'];
-        return html `
-      <tile-stats
-        .model=${this.model}
-        .mediatype=${this.model?.mediatype}
-        .viewCount=${viewCount}
-        .viewLabel=${viewLabel}
-        .favCount=${this.model?.favCount}
-        .commentCount=${this.model?.commentCount}
-        .tvClipCount=${this.model?.tvClipCount}
-        .showTvClips=${this.showTvClips}
-      >
-      </tile-stats>
+        return html `
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${this.model?.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${this.model?.favCount}
+        .commentCount=${this.model?.commentCount}
+        .tvClipCount=${this.model?.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
     `;
     }
     get isSortedByDate() {
@@ -240,63 +241,63 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
         return [
             baseTileStyles,
-            css `
-        a:link {
-          text-decoration: none;
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-        a:hover {
-          text-decoration: underline;
-        }
-
-        .container {
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .simple #title > .truncated {
-          -webkit-line-clamp: 2;
-        }
-
-        .simple .created-by > .truncated,
-        .simple .date-sorted-by > .truncated,
-        .simple .volume-issue > .truncated {
-          -webkit-line-clamp: 1;
-        }
-
-        .simple.snippets-only .item-info,
-        .simple.minimal .item-info {
-          padding-bottom: 5px;
-        }
-
-        .simple.snippets-only text-snippet-block {
-          margin-top: auto; /* Force the snippets to the bottom of the tile */
-        }
-
-        .capture-dates {
-          margin: 0;
-          padding: 0 5px;
-          list-style-type: none;
-        }
-
-        review-block,
-        text-snippet-block {
-          --containerLeftMargin: 5px;
-          --containerTopMargin: 5px;
-        }
-
-        /**
-         * iOS Safari long-press on tiles (to bring up hover pane)
-         * gets messy without this
-         */
-        @media screen and (pointer: coarse) and (hover: none) {
-          .container {
-            -webkit-touch-callout: none;
-          }
-
-          .truncated {
-            -webkit-touch-callout: default;
-          }
-        }
+            css `
+        a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+
+        .container {
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+
+        .simple.snippets-only .item-info,
+        .simple.minimal .item-info {
+          padding-bottom: 5px;
+        }
+
+        .simple.snippets-only text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
+
+        .capture-dates {
+          margin: 0;
+          padding: 0 5px;
+          list-style-type: none;
+        }
+
+        review-block,
+        text-snippet-block {
+          --containerLeftMargin: 5px;
+          --containerTopMargin: 5px;
+        }
+
+        /**
+         * iOS Safari long-press on tiles (to bring up hover pane)
+         * gets messy without this
+         */
+        @media screen and (pointer: coarse) and (hover: none) {
+          .container {
+            -webkit-touch-callout: none;
+          }
+
+          .truncated {
+            -webkit-touch-callout: default;
+          }
+        }
       `,
         ];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,iBAAiB;IAAxC;QACL;;;;;;;;;;;;;;;WAeG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;QAEvB,gBAAW,GAAG,KAAK,CAAC;QAErB,eAAU,GAAe,SAAS,CAAC;IA6SjE,CAAC;IA3SC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;QACpC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;YACrC,YAAY,EAAE,IAAI,CAAC,UAAU,KAAK,YAAY;YAC9C,eAAe,EAAE,IAAI,CAAC,UAAU,KAAK,eAAe;YACpD,OAAO,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACvC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,gBAAgB;UACzB,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,kBAAkB;;;4CAGO,SAAS,CAAC,SAAS,CAAC;kBAC9C,SAAS;;;;cAIb,IAAI,CAAC,mBAAmB;cACxB,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAC,sBAAsB;YAC7B,CAAC,CAAC,IAAI,CAAC,eAAe;cACtB,IAAI,CAAC,+BAA+B,IAAI,IAAI,CAAC,oBAAoB;cACjE,IAAI,CAAC,mBAAmB;;;YAG1B,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,eAAe;QACzB,MAAM,gBAAgB,GACpB,IAAI,CAAC,oBAAoB,CAAC,0BAA0B,CAAC;QACvD,IAAI,CAAC,gBAAgB;YAAE,OAAO,OAAO,CAAC;QAEtC,OAAO,IAAI,CAAA;;wCAEyB,gBAAgB;oBACpC,gBAAgB;;;KAG/B,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,gBAAgB;yBACxB,KAAK;sBACR,KAAK;oBACP,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,sBAAsB;QAChC,IAAI,WAAW,CAAC;QAChB,IAAI,MAAM,GAAe,MAAM,CAAC;QAChC,QAAQ,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;YAClC,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC;gBAChD,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;gBAC3D,IAAI,2BAA2B,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC/C,MAAM,GAAG,WAAW,CAAC;gBACvB,CAAC;gBACD,MAAM;YACR,CAAC;YACD,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR,KAAK,WAAW;gBACd,WAAW,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;gBAC/D,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;YACxB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvE,OAAO,IAAI,CAAA;;gBAEC,WAAW,CAAC,KAAK,IAAI,aAAa;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO,OAAO,CAAC;QAExC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7D,OAAO,IAAI,CAAA;;;gBAGC,SAAS,CAAC,WAAW,CAAC;eACvB,SAAS,CAAC,UAAU,CAAC;qBACf,SAAS,CAAC,KAAK,CAAC;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,oBAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACxD,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;sDACuC,IAAI,CAAC,KAAK,EAAE,QAAQ;;KAErE,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK;YAAE,OAAO,OAAO,CAAC;QAE9D,OAAO,IAAI,CAAA;;;wBAGS,IAAI,CAAC,KAAK,EAAE,MAAM,gBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK;;;KAGtE,CAAC;IACJ,CAAC;IAED,IAAY,+BAA+B;QAGzC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEnE,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,CAAC,KAAK,CAAC,YAAY,EACvB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gBACA,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAChD,IAAI,CAAC,KAAM,CAAC,KAAK,EACjB,IAAI,CACL;kBACG,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,iBAAiB;QAC3B,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3D,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;QAC9D,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAC1B,aAAa,EAAE,KAAK,KAAK,MAAM;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE,cAAc,CAAC;YAC/C,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,KAAK,EAAE,SAAS;qBACrB,SAAS;qBACT,SAAS;oBACV,IAAI,CAAC,KAAK,EAAE,QAAQ;wBAChB,IAAI,CAAC,KAAK,EAAE,YAAY;uBACzB,IAAI,CAAC,KAAK,EAAE,WAAW;uBACvB,IAAI,CAAC,WAAW;;;KAGlC,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAC/D,IAAI,CAAC,aAAa,EAAE,KAAe,CACpC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;IACjD,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC;IACxC,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;;;;;;;;;8BAUqB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+CtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjT8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAwB;AAEvB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoC;AAtBpD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmUpB","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { map } from 'lit/directives/map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { BaseTileComponent } from '../base-tile-component';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { LayoutType } from '../models';\n\nimport '../image-block';\nimport '../review-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../tile-mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile 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   *  - defaultSortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  @property({ type: Boolean }) showTvClips = false;\n\n  @property({ type: String }) layoutType: LayoutType = 'default';\n\n  render() {\n    const itemTitle = this.model?.title;\n    const containerClasses = classMap({\n      container: true,\n      simple: this.layoutType !== 'default',\n      'stats-only': this.layoutType === 'stats-only',\n      'snippets-only': this.layoutType === 'snippets-only',\n      minimal: this.layoutType === 'minimal',\n    });\n\n    return html`\n      <div class=${containerClasses}>\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.imageBlockTemplate}\n\n            <div id=\"title\">\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\n                ${itemTitle}\n              </h3>\n            </div>\n\n            ${this.volumeIssueTemplate}\n            ${this.isSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate}\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\n            ${this.reviewBlockTemplate}\n          </div>\n\n          ${this.tileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get creatorTemplate(): TemplateResult | typeof nothing {\n    const displayedCreator =\n      this.displayValueProvider.firstCreatorMatchingFilter;\n    if (!displayedCreator) return nothing;\n\n    return html`\n      <div class=\"created-by\">\n        <span class=\"truncated\" title=${displayedCreator}>\n          by&nbsp;${displayedCreator}\n        </span>\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .loggedIn=${this.loggedIn}\n        .suppressBlurring=${this.suppressBlurring}\n        .isCompactTile=${false}\n        .isListTile=${false}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n    let format: DateFormat = 'long';\n    switch (this.effectiveSort?.field) {\n      case 'date': {\n        const datePublished = this.model?.datePublished;\n        sortedValue = { field: 'published', value: datePublished };\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\n          format = 'year-only';\n        }\n        break;\n      }\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    if (!sortedValue?.value) {\n      return nothing;\n    }\n\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>${sortedValue.field} ${formattedDate}</span>\n      </div>\n    `;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.review) return nothing;\n\n    const { reviewtitle, reviewbody, stars } = this.model.review;\n    return html`\n      <review-block\n        viewsize=\"grid\"\n        title=${ifDefined(reviewtitle)}\n        body=${ifDefined(reviewbody)}\n        starRating=${ifDefined(stars)}\n      >\n      </review-block>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n    if (['stats-only', 'minimal'].includes(this.layoutType)) {\n      return nothing;\n    }\n\n    return html`\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n      </text-snippet-block>\n    `;\n  }\n\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.volume || !this.model?.issue) return nothing;\n\n    return html`\n      <div class=\"volume-issue\">\n        <span class=\"truncated\" title=\"volume|issue\">\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n        </span>\n      </div>\n    `;\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 =>\n            html`<li>\n              ${this.displayValueProvider.webArchivesCaptureLink(\n                this.model!.title,\n                date,\n              )}\n            </li>`,\n        )}\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for the stats row along the bottom of the tile.\n   */\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\n    if (['snippets-only', 'minimal'].includes(this.layoutType)) {\n      return nothing;\n    }\n\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\n    const [viewCount, viewLabel] =\n      effectiveSort?.field === 'week'\n        ? [this.model?.weeklyViewCount, 'weekly views']\n        : [this.model?.viewCount, 'all-time views'];\n\n    return html`\n      <tile-stats\n        .model=${this.model}\n        .mediatype=${this.model?.mediatype}\n        .viewCount=${viewCount}\n        .viewLabel=${viewLabel}\n        .favCount=${this.model?.favCount}\n        .commentCount=${this.model?.commentCount}\n        .tvClipCount=${this.model?.tvClipCount}\n        .showTvClips=${this.showTvClips}\n      >\n      </tile-stats>\n    `;\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.effectiveSort?.field as string,\n    );\n  }\n\n  /**\n   * Returns the active sort param if one is set, or the default sort param otherwise.\n   */\n  private get effectiveSort(): SortParam | null {\n    return this.sortParam ?? this.defaultSortParam;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private infoButtonPressed(e: PointerEvent): void {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        a:link {\n          text-decoration: none;\n          color: var(--ia-theme-link-color, #4b64ff);\n        }\n        a:hover {\n          text-decoration: underline;\n        }\n\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .simple #title > .truncated {\n          -webkit-line-clamp: 2;\n        }\n\n        .simple .created-by > .truncated,\n        .simple .date-sorted-by > .truncated,\n        .simple .volume-issue > .truncated {\n          -webkit-line-clamp: 1;\n        }\n\n        .simple.snippets-only .item-info,\n        .simple.minimal .item-info {\n          padding-bottom: 5px;\n        }\n\n        .simple.snippets-only text-snippet-block {\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\n        }\n\n        .capture-dates {\n          margin: 0;\n          padding: 0 5px;\n          list-style-type: none;\n        }\n\n        review-block,\n        text-snippet-block {\n          --containerLeftMargin: 5px;\n          --containerTopMargin: 5px;\n        }\n\n        /**\n         * iOS Safari long-press on tiles (to bring up hover pane)\n         * gets messy without this\n         */\n        @media screen and (pointer: coarse) and (hover: none) {\n          .container {\n            -webkit-touch-callout: none;\n          }\n\n          .truncated {\n            -webkit-touch-callout: default;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAIpC,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,eAAe,CAAC;AACvB,OAAO,wBAAwB,CAAC;AAChC,OAAO,cAAc,CAAC;AAGf,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,iBAAiB;IAAxC;QACL;;;;;;;;;;;;;;;;WAgBG;;QAE0B,mBAAc,GAAG,KAAK,CAAC;QAEvB,gBAAW,GAAG,KAAK,CAAC;QAErB,eAAU,GAAe,SAAS,CAAC;IA6SjE,CAAC;IA3SC,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC;QACpC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,SAAS,EAAE,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;YACrC,YAAY,EAAE,IAAI,CAAC,UAAU,KAAK,YAAY;YAC9C,eAAe,EAAE,IAAI,CAAC,UAAU,KAAK,eAAe;YACpD,OAAO,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACvC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;mBACI,gBAAgB;UACzB,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,kBAAkB;;;4CAGO,SAAS,CAAC,SAAS,CAAC;kBAC9C,SAAS;;;;cAIb,IAAI,CAAC,mBAAmB;cACxB,IAAI,CAAC,cAAc;YACnB,CAAC,CAAC,IAAI,CAAC,sBAAsB;YAC7B,CAAC,CAAC,IAAI,CAAC,eAAe;cACtB,IAAI,CAAC,+BAA+B,IAAI,IAAI,CAAC,oBAAoB;cACjE,IAAI,CAAC,mBAAmB;;;YAG1B,IAAI,CAAC,iBAAiB;;;KAG7B,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,eAAe;QACzB,MAAM,gBAAgB,GACpB,IAAI,CAAC,oBAAoB,CAAC,0BAA0B,CAAC;QACvD,IAAI,CAAC,gBAAgB;YAAE,OAAO,OAAO,CAAC;QAEtC,OAAO,IAAI,CAAA;;wCAEyB,gBAAgB;oBACpC,gBAAgB;;;KAG/B,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,IAAI,CAAC,QAAQ;4BACL,IAAI,CAAC,gBAAgB;yBACxB,KAAK;sBACR,KAAK;oBACP,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,sBAAsB;QAChC,IAAI,WAAW,CAAC;QAChB,IAAI,MAAM,GAAe,MAAM,CAAC;QAChC,QAAQ,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC;YAClC,KAAK,MAAM,CAAC,CAAC,CAAC;gBACZ,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC;gBAChD,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;gBAC3D,IAAI,2BAA2B,CAAC,aAAa,CAAC,EAAE,CAAC;oBAC/C,MAAM,GAAG,WAAW,CAAC;gBACvB,CAAC;gBACD,MAAM;YACR,CAAC;YACD,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR,KAAK,WAAW;gBACd,WAAW,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,CAAC;gBAC/D,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC;gBACrE,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC;YACxB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACvE,OAAO,IAAI,CAAA;;gBAEC,WAAW,CAAC,KAAK,IAAI,aAAa;;KAE7C,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;kCAEtC,GAAG,CAAC,WAAW,CAAC;kBAChC;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;YAAE,OAAO,OAAO,CAAC;QAExC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC7D,OAAO,IAAI,CAAA;;;gBAGC,SAAS,CAAC,WAAW,CAAC;eACvB,SAAS,CAAC,UAAU,CAAC;qBACf,SAAS,CAAC,KAAK,CAAC;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,oBAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO,OAAO,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YACxD,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;sDACuC,IAAI,CAAC,KAAK,EAAE,QAAQ;;KAErE,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK;YAAE,OAAO,OAAO,CAAC;QAE9D,OAAO,IAAI,CAAA;;;wBAGS,IAAI,CAAC,KAAK,EAAE,MAAM,gBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK;;;KAGtE,CAAC;IACJ,CAAC;IAED,IAAY,+BAA+B;QAGzC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEnE,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,CAAC,KAAK,CAAC,YAAY,EACvB,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gBACA,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAChD,IAAI,CAAC,KAAM,CAAC,KAAK,EACjB,IAAI,CACL;kBACG,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,iBAAiB;QAC3B,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC;YAC3D,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;QAC9D,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAC1B,aAAa,EAAE,KAAK,KAAK,MAAM;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE,cAAc,CAAC;YAC/C,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QAEhD,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,KAAK,EAAE,SAAS;qBACrB,SAAS;qBACT,SAAS;oBACV,IAAI,CAAC,KAAK,EAAE,QAAQ;wBAChB,IAAI,CAAC,KAAK,EAAE,YAAY;uBACzB,IAAI,CAAC,KAAK,EAAE,WAAW;uBACvB,IAAI,CAAC,WAAW;;;KAGlC,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAC/D,IAAI,CAAC,aAAa,EAAE,KAAe,CACpC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,CAAC;IACjD,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC;IACxC,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;;;;;;;;;8BAUqB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+CtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjT8B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAwB;AAEvB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoC;AAvBpD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoUpB","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { msg } from '@lit/localize';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\nimport { LayoutType } from '../models';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../item-image';\r\nimport '../tile-mediatype-icon';\r\nimport './tile-stats';\r\n\r\n@customElement('item-tile')\r\nexport class ItemTile extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - tileActions: TileAction[] = [];\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - defaultSortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: Boolean }) showInfoButton = false;\r\n\r\n  @property({ type: Boolean }) showTvClips = false;\r\n\r\n  @property({ type: String }) layoutType: LayoutType = 'default';\r\n\r\n  render() {\r\n    const itemTitle = this.model?.title;\r\n    const containerClasses = classMap({\r\n      container: true,\r\n      simple: this.layoutType !== 'default',\r\n      'stats-only': this.layoutType === 'stats-only',\r\n      'snippets-only': this.layoutType === 'snippets-only',\r\n      minimal: this.layoutType === 'minimal',\r\n    });\r\n\r\n    return html`\r\n      <div class=${containerClasses}>\r\n        ${this.infoButtonTemplate}\r\n        <div class=\"tile-details\">\r\n          <div class=\"item-info\">\r\n            ${this.imageBlockTemplate}\r\n\r\n            <div id=\"title\">\r\n              <h3 class=\"truncated\" title=${ifDefined(itemTitle)}>\r\n                ${itemTitle}\r\n              </h3>\r\n            </div>\r\n\r\n            ${this.volumeIssueTemplate}\r\n            ${this.isSortedByDate\r\n              ? this.sortedDateInfoTemplate\r\n              : this.creatorTemplate}\r\n            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}\r\n            ${this.reviewBlockTemplate}\r\n          </div>\r\n\r\n          ${this.tileStatsTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Templates\r\n   */\r\n  private get creatorTemplate(): TemplateResult | typeof nothing {\r\n    const displayedCreator =\r\n      this.displayValueProvider.firstCreatorMatchingFilter;\r\n    if (!displayedCreator) return nothing;\r\n\r\n    return html`\r\n      <div class=\"created-by\">\r\n        <span class=\"truncated\" title=${displayedCreator}>\r\n          by&nbsp;${displayedCreator}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get imageBlockTemplate(): TemplateResult {\r\n    return html`\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .loggedIn=${this.loggedIn}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n        .isCompactTile=${false}\r\n        .isListTile=${false}\r\n        .viewSize=${'grid'}\r\n      >\r\n      </image-block>\r\n    `;\r\n  }\r\n\r\n  private get sortedDateInfoTemplate() {\r\n    let sortedValue;\r\n    let format: DateFormat = 'long';\r\n    switch (this.effectiveSort?.field) {\r\n      case 'date': {\r\n        const datePublished = this.model?.datePublished;\r\n        sortedValue = { field: 'published', value: datePublished };\r\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\r\n          format = 'year-only';\r\n        }\r\n        break;\r\n      }\r\n      case 'reviewdate':\r\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\r\n        break;\r\n      case 'addeddate':\r\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\r\n        break;\r\n      case 'publicdate':\r\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (!sortedValue?.value) {\r\n      return nothing;\r\n    }\r\n\r\n    const formattedDate = this.getFormattedDate(sortedValue.value, format);\r\n    return html`\r\n      <div class=\"date-sorted-by truncated\">\r\n        <span>${sortedValue.field} ${formattedDate}</span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n    // &#9432; is an information icon\r\n    return this.showInfoButton\r\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n          &#9432;\r\n          <span class=\"sr-only\">${msg('More info')}</span>\r\n        </button>`\r\n      : nothing;\r\n  }\r\n\r\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.review) return nothing;\r\n\r\n    const { reviewtitle, reviewbody, stars } = this.model.review;\r\n    return html`\r\n      <review-block\r\n        viewsize=\"grid\"\r\n        title=${ifDefined(reviewtitle)}\r\n        body=${ifDefined(reviewbody)}\r\n        starRating=${ifDefined(stars)}\r\n      >\r\n      </review-block>\r\n    `;\r\n  }\r\n\r\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.hasSnippets) return nothing;\r\n    if (['stats-only', 'minimal'].includes(this.layoutType)) {\r\n      return nothing;\r\n    }\r\n\r\n    return html`\r\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\r\n      </text-snippet-block>\r\n    `;\r\n  }\r\n\r\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.volume || !this.model?.issue) return nothing;\r\n\r\n    return html`\r\n      <div class=\"volume-issue\">\r\n        <span class=\"truncated\" title=\"volume|issue\">\r\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\r\n        </span>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get webArchivesCaptureDatesTemplate():\r\n    | TemplateResult\r\n    | typeof nothing {\r\n    if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n    return html`\r\n      <ul class=\"capture-dates\">\r\n        ${map(\r\n          this.model.captureDates,\r\n          date =>\r\n            html`<li>\r\n              ${this.displayValueProvider.webArchivesCaptureLink(\r\n                this.model!.title,\r\n                date,\r\n              )}\r\n            </li>`,\r\n        )}\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the stats row along the bottom of the tile.\r\n   */\r\n  private get tileStatsTemplate(): TemplateResult | typeof nothing {\r\n    if (['snippets-only', 'minimal'].includes(this.layoutType)) {\r\n      return nothing;\r\n    }\r\n\r\n    const effectiveSort = this.sortParam ?? this.defaultSortParam;\r\n    const [viewCount, viewLabel] =\r\n      effectiveSort?.field === 'week'\r\n        ? [this.model?.weeklyViewCount, 'weekly views']\r\n        : [this.model?.viewCount, 'all-time views'];\r\n\r\n    return html`\r\n      <tile-stats\r\n        .model=${this.model}\r\n        .mediatype=${this.model?.mediatype}\r\n        .viewCount=${viewCount}\r\n        .viewLabel=${viewLabel}\r\n        .favCount=${this.model?.favCount}\r\n        .commentCount=${this.model?.commentCount}\r\n        .tvClipCount=${this.model?.tvClipCount}\r\n        .showTvClips=${this.showTvClips}\r\n      >\r\n      </tile-stats>\r\n    `;\r\n  }\r\n\r\n  private get isSortedByDate(): boolean {\r\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\r\n      this.effectiveSort?.field as string,\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get hasSnippets(): boolean {\r\n    return !!this.model?.snippets?.length;\r\n  }\r\n\r\n  private infoButtonPressed(e: PointerEvent): void {\r\n    e.preventDefault();\r\n    const event = new CustomEvent<{ x: number; y: number }>(\r\n      'infoButtonPressed',\r\n      { detail: { x: e.clientX, y: e.clientY } },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * CSS\r\n   */\r\n  static get styles(): CSSResultGroup {\r\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\r\n\r\n    return [\r\n      baseTileStyles,\r\n      css`\r\n        a:link {\r\n          text-decoration: none;\r\n          color: var(--ia-theme-link-color, #4b64ff);\r\n        }\r\n        a:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        .container {\r\n          border: 1px solid ${tileBorderColor};\r\n        }\r\n\r\n        .simple #title > .truncated {\r\n          -webkit-line-clamp: 2;\r\n        }\r\n\r\n        .simple .created-by > .truncated,\r\n        .simple .date-sorted-by > .truncated,\r\n        .simple .volume-issue > .truncated {\r\n          -webkit-line-clamp: 1;\r\n        }\r\n\r\n        .simple.snippets-only .item-info,\r\n        .simple.minimal .item-info {\r\n          padding-bottom: 5px;\r\n        }\r\n\r\n        .simple.snippets-only text-snippet-block {\r\n          margin-top: auto; /* Force the snippets to the bottom of the tile */\r\n        }\r\n\r\n        .capture-dates {\r\n          margin: 0;\r\n          padding: 0 5px;\r\n          list-style-type: none;\r\n        }\r\n\r\n        review-block,\r\n        text-snippet-block {\r\n          --containerLeftMargin: 5px;\r\n          --containerTopMargin: 5px;\r\n        }\r\n\r\n        /**\r\n         * iOS Safari long-press on tiles (to bring up hover pane)\r\n         * gets messy without this\r\n         */\r\n        @media screen and (pointer: coarse) and (hover: none) {\r\n          .container {\r\n            -webkit-touch-callout: none;\r\n          }\r\n\r\n          .truncated {\r\n            -webkit-touch-callout: default;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

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

@@ -32,22 +32,22 @@ let ItemImage = class ItemImage extends LitElement {
         }
     }
     render() {
-        return html `
-      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
+        return html `
+      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
     `;
     }
     get imageTemplate() {
         if (this.model?.mediatype === 'search') {
             return html `${searchIcon}`;
         }
-        return html `
-      <img
-        class=${classMap(this.itemImageClass)}
-        src="${this.imageSrc}"
-        alt=""
-        @load=${this.onLoad}
-        @error=${this.onError}
-      />
+        return html `
+      <img
+        class=${classMap(this.itemImageClass)}
+        src="${this.imageSrc}"
+        alt=""
+        @load=${this.onLoad}
+        @error=${this.onError}
+      />
     `;
     }
     /**
@@ -148,24 +148,24 @@ let ItemImage = class ItemImage extends LitElement {
         return [
             baseItemImageStyles,
             waveformGradientStyles,
-            css `
-        img {
-          height: var(--imgHeight, 16rem);
-          width: var(--imgWidth, 16rem);
-        }
-
-        .search-image {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: rgb(245, 245, 247);
-          border-radius: 4px;
-        }
-
-        svg {
-          height: 10rem;
-          width: 10rem;
-        }
+            css `
+        img {
+          height: var(--imgHeight, 16rem);
+          width: var(--imgWidth, 16rem);
+        }
+
+        .search-image {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgb(245, 245, 247);
+          border-radius: 4px;
+        }
+
+        svg {
+          height: 10rem;
+          width: 10rem;
+        }
       `,
         ];
     }

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 {\r\n  css,\r\n  CSSResultGroup,\r\n  html,\r\n  LitElement,\r\n  nothing,\r\n  PropertyValues,\r\n} from 'lit';\r\nimport { customElement, property, query, state } from 'lit/decorators.js';\r\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\r\n\r\nimport type { TileModel } from '../models';\r\n\r\nimport {\r\n  baseItemImageStyles,\r\n  waveformGradientStyles,\r\n} from '../styles/item-image-styles';\r\nimport { searchIcon } from '../assets/img/icons/mediatype/search';\r\n\r\n@customElement('item-image')\r\nexport class ItemImage extends LitElement {\r\n  /**\r\n   * Map to cache which identifiers have waveform-style thumbnails, so that\r\n   * they can have their waveform styling applied immediately, rather than\r\n   * waiting for the image content to load before applying it (which can\r\n   * cause noticeable flicker when such tiles refresh).\r\n   */\r\n  private static readonly waveformByIdentifier = new Map<string, boolean>();\r\n\r\n  @property({ type: Object }) model?: TileModel;\r\n\r\n  @property({ type: String }) baseImageUrl?: string;\r\n\r\n  @property({ type: Boolean }) isListTile = false;\r\n\r\n  @property({ type: Boolean }) isCompactTile = false;\r\n\r\n  @property({ type: Boolean }) loggedIn = false;\r\n\r\n  @property({ type: Boolean }) suppressBlurring = false;\r\n\r\n  @state() private isWaveform = false;\r\n\r\n  @state() private isNotFound = false;\r\n\r\n  @query('img') private baseImage!: HTMLImageElement;\r\n\r\n  protected willUpdate(changed: PropertyValues): void {\r\n    if (changed.has('model')) {\r\n      // If this identifier is known to have a waveform image, then set isWaveform upfront\r\n      const identifier = this.model?.identifier;\r\n      this.isWaveform =\r\n        ItemImage.waveformByIdentifier.get(identifier as string) === true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>\r\n    `;\r\n  }\r\n\r\n  private get imageTemplate() {\r\n    if (this.model?.mediatype === 'search') {\r\n      return html`${searchIcon}`;\r\n    }\r\n\r\n    return html`\r\n      <img\r\n        class=${classMap(this.itemImageClass)}\r\n        src=\"${this.imageSrc}\"\r\n        alt=\"\"\r\n        @load=${this.onLoad}\r\n        @error=${this.onError}\r\n      />\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Helpers\r\n   */\r\n  private get imageSrc() {\r\n    if (this.isNotFound) return this.notFoundSrc;\r\n\r\n    // Use the correct image for web capture tiles, if possible\r\n    if (this.model?.captureDates && this.model.identifier) {\r\n      try {\r\n        const url = new URL(this.model.identifier);\r\n        const domain = encodeURIComponent(url.hostname);\r\n        return this.baseImageUrl\r\n          ? `https://web.archive.org/thumb/${domain}?generate=1`\r\n          : nothing;\r\n      } catch {\r\n        return `${this.baseImageUrl}/images/notfound.png`;\r\n      }\r\n    }\r\n\r\n    // Use the thumbnail URL specified in the model if it exists\r\n    if (this.model?.thumbnailUrl) return this.model.thumbnailUrl;\r\n\r\n    // Don't try to load invalid image URLs\r\n    return this.baseImageUrl && this.model?.identifier\r\n      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`\r\n      : nothing;\r\n  }\r\n\r\n  private get notFoundSrc() {\r\n    return this.baseImageUrl\r\n      ? `${this.baseImageUrl}/images/notfound.png`\r\n      : nothing;\r\n  }\r\n\r\n  private get hashBasedGradient() {\r\n    if (!this.model?.identifier) {\r\n      return 'waveform-grad0';\r\n    }\r\n    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5\r\n    return `waveform-grad${gradient}`;\r\n  }\r\n\r\n  private hashStrToInt(str: string): number {\r\n    return str\r\n      .split('')\r\n      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);\r\n  }\r\n\r\n  /**\r\n   * Classes\r\n   */\r\n  private get itemBaseClass(): ClassInfo {\r\n    return {\r\n      'drop-shadow': true,\r\n      'list-box': this.isListTile,\r\n      'search-image': this.model?.mediatype === 'search',\r\n      [this.hashBasedGradient]: this.isWaveform,\r\n    };\r\n  }\r\n\r\n  private get itemImageClass(): ClassInfo {\r\n    const hasSensitiveContent = !!(\r\n      this.model?.contentWarning || this.model?.loginRequired\r\n    );\r\n    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;\r\n\r\n    return {\r\n      contain: !this.isCompactTile && !this.isWaveform,\r\n      cover: this.isCompactTile,\r\n      blur: shouldBlur,\r\n      waveform: this.isWaveform,\r\n      'account-image': this.isAccountImage, // for account tile image\r\n      'collection-image': this.model?.mediatype === 'collection', // for collection tile image\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Helper function to determine if account tile image\r\n   */\r\n  private get isAccountImage() {\r\n    return (\r\n      this.model?.mediatype === 'account' &&\r\n      !this.isCompactTile &&\r\n      !this.isListTile\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Event listener sets isWaveform true if image is waveform\r\n   */\r\n  private onLoad() {\r\n    if (\r\n      (this.model?.mediatype === 'audio' ||\r\n        this.model?.mediatype === 'etree') &&\r\n      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4\r\n    ) {\r\n      this.isWaveform = true;\r\n      if (this.model?.identifier) {\r\n        ItemImage.waveformByIdentifier.set(this.model.identifier, true);\r\n      }\r\n    }\r\n  }\r\n\r\n  private onError() {\r\n    this.isNotFound = true;\r\n  }\r\n\r\n  /**\r\n   * CSS\r\n   */\r\n  static get styles(): CSSResultGroup {\r\n    return [\r\n      baseItemImageStyles,\r\n      waveformGradientStyles,\r\n      css`\r\n        img {\r\n          height: var(--imgHeight, 16rem);\r\n          width: var(--imgWidth, 16rem);\r\n        }\r\n\r\n        .search-image {\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          background: rgb(245, 245, 247);\r\n          border-radius: 4px;\r\n        }\r\n\r\n        svg {\r\n          height: 10rem;\r\n          width: 10rem;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"item-image.js","sourceRoot":"","sources":["../../../src/tiles/item-image.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n} 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  /**\n   * Map to cache which identifiers have waveform-style thumbnails, so that\n   * they can have their waveform styling applied immediately, rather than\n   * waiting for the image content to load before applying it (which can\n   * cause noticeable flicker when such tiles refresh).\n   */\n  private static readonly waveformByIdentifier = new Map<string, boolean>();\n\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  @property({ type: Boolean }) suppressBlurring = false;\n\n  @state() private isWaveform = false;\n\n  @state() private isNotFound = false;\n\n  @query('img') private baseImage!: HTMLImageElement;\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      // If this identifier is known to have a waveform image, then set isWaveform upfront\n      const identifier = this.model?.identifier;\n      this.isWaveform =\n        ItemImage.waveformByIdentifier.get(identifier as string) === true;\n    }\n  }\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 {\n        return `${this.baseImageUrl}/images/notfound.png`;\n      }\n    }\n\n    // Use the thumbnail URL specified in the model if it exists\n    if (this.model?.thumbnailUrl) return this.model.thumbnailUrl;\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 hasSensitiveContent = !!(\n      this.model?.contentWarning || this.model?.loginRequired\n    );\n    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;\n\n    return {\n      contain: !this.isCompactTile && !this.isWaveform,\n      cover: this.isCompactTile,\n      blur: shouldBlur,\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      if (this.model?.identifier) {\n        ItemImage.waveformByIdentifier.set(this.model.identifier, true);\n      }\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"]}