@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

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

@@ -1,73 +1,277 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, LitElement, nothing, } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { join } from 'lit/directives/join.js';
+import { map } from 'lit/directives/map.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
+import { dateLabel } from './date-label';
+import { accountLabel } from './account-label';
 import { formatCount } from '../../utils/format-count';
 import { formatDate } from '../../utils/format-date';
-import '../../mediatype-icon';
-/*
-at 750 creator, title trimmed
-at 530
-*/
+import '../mediatype-icon';
 let TileList = class TileList extends LitElement {
     constructor() {
         super(...arguments);
-        this.displayMode = 'list-compact';
+        this.sortParam = null;
+        this.collectionLinks = [];
+    }
+    updated(changed) {
+        if (changed.has('model')) {
+            this.fetchCollectionNames();
+        }
+    }
+    async fetchCollectionNames() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.collections) ||
+            this.model.collections.length === 0 ||
+            !this.collectionNameCache) {
+            return;
+        }
+        // Note: quirk of Lit: need to replace collectionLinks array,
+        // otherwise it will not re-render. Can't simply alter the array.
+        this.collectionLinks = [];
+        const newCollellectionLinks = [];
+        const promises = [];
+        for (const collection of this.model.collections) {
+            promises.push((_b = this.collectionNameCache) === null || _b === void 0 ? void 0 : _b.collectionNameFor(collection).then(name => {
+                newCollellectionLinks.push(this.detailsLink(collection, name !== null && name !== void 0 ? name : collection));
+            }));
+        }
+        await Promise.all(promises);
+        this.collectionLinks = newCollellectionLinks;
     }
-    // private HtmlSanitizer = HtmlSanitizer();
     render() {
-        var _a, _b, _c, _d, _e;
         return html `
       <div id="list-line" class="${this.classSize}">
-        <div id="views">
-          ${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}
+        ${this.classSize === 'mobile'
+            ? this.mobileTemplate
+            : this.desktopTemplate}
+      </div>
+    `;
+    }
+    get mobileTemplate() {
+        return html `
+      <div id="list-line-top">
+        <div id="list-line-left">
+          <div id="thumb">${this.imgTemplate}</div>
         </div>
-        <div id="title">${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}</div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
-        <div id="creator">${(_d = this.model) === null || _d === void 0 ? void 0 : _d.creator}</div>
-        <div id="icon">
-          <mediatype-icon .mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}></mediatype-icon>
+        <div id="list-line-right">
+          <div id="title-line">
+            <div id="title">${this.titleTemplate}</div>
+            ${this.iconRightTemplate}
+          </div>
+        </div>
+      </div>
+      <div id="list-line-bottom">${this.detailsTemplate}</div>
+    `;
+    }
+    get desktopTemplate() {
+        return html `
+      <div id="list-line-left">
+        <div id="thumb">${this.imgTemplate}</div>
+      </div>
+      <div id="list-line-right">
+        <div id="title-line">
+          <div id="title">${this.titleTemplate}</div>
+          ${this.iconRightTemplate}
         </div>
+        ${this.detailsTemplate}
       </div>
-      ${this.displayMode === 'list-detail' ? this.detail() : html ``}
     `;
     }
-    detail() {
-        const descriptionHtml = this.description();
-        const topicHtml = this.topic();
-        const sourceHtml = this.source();
-        if (descriptionHtml || topicHtml || sourceHtml) {
+    get detailsTemplate() {
+        return html `
+      ${this.itemLineTemplate} ${this.creatorTemplate}
+      <div id="dates-line">
+        ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+      </div>
+      <div id="views-line">
+        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
+      </div>
+      ${this.topicsTemplate} ${this.collectionsTemplate}
+      ${this.descriptionTemplate}
+    `;
+    }
+    // Data templates
+    get imgTemplate() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return nothing;
+        }
+        return html ` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
+    />`;
+    }
+    get iconRightTemplate() {
+        var _a, _b;
+        return html `
+      <div id="icon-right">
+        <mediatype-icon
+          .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}
+          .collections=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.collections}
+          style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
+        >
+        </mediatype-icon>
+      </div>
+    `;
+    }
+    // Only in list, not tile
+    get collectionColor() {
+        var _a;
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) !== 'collection') {
+            return undefined;
+        }
+        return '#4666FF';
+    }
+    get titleTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.title)) {
+            return nothing;
+        }
+        return html ` ${this.detailsLink(this.model.identifier, this.model.title)} `;
+    }
+    get itemLineTemplate() {
+        const source = this.sourceTemplate;
+        const volume = this.volumeTemplate;
+        const issue = this.issueTemplate;
+        if (!source && !volume && !issue) {
+            return nothing;
+        }
+        return html ` <div id="item-line">${source} ${volume} ${issue}</div> `;
+    }
+    get sourceTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.source)) {
+            return nothing;
+        }
+        return html `
+      <div id="source" class="metadata">
+        ${this.labelTemplate('Source')}
+        ${this.searchLink('source', this.model.source)}
+      </div>
+    `;
+    }
+    get volumeTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume, 'Volume');
+    }
+    get issueTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, 'Issue');
+    }
+    get creatorTemplate() {
+        var _a, _b, _c;
+        // "Achivist since" if account
+        if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account') {
             return html `
-        <div id="list-detail" class="${this.classSize}">
-          <div></div>
-          <div id="details">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>
-          <div></div>
+        <div id="creator" class="metadata">
+          <span class="label"> ${accountLabel((_b = this.model) === null || _b === void 0 ? void 0 : _b.dateAdded)} </span>
         </div>
       `;
         }
-        return html ``;
+        // "Creator" if not account tile
+        if (!((_c = this.model) === null || _c === void 0 ? void 0 : _c.creators) || this.model.creators.length === 0) {
+            return nothing;
+        }
+        return html `
+      <div id="creator" class="metadata">
+        ${this.labelTemplate('By')}
+        ${join(map(this.model.creators, id => this.searchLink('creator', id)), html `, `)}
+      </div>
+    `;
     }
-    description() {
-        var _a, _b;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.description) {
-            const description = DOMPurify.sanitize(`${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}`);
-            return html ` <div id="description">${description}</div> `;
+    get datePublishedTemplate() {
+        var _a;
+        return this.metadataTemplate(formatDate((_a = this.model) === null || _a === void 0 ? void 0 : _a.datePublished, 'long'), 'Published');
+    }
+    // Show date label/value when sorted by date type
+    // Except datePublished which is always shown
+    get dateSortByTemplate() {
+        if (this.sortParam &&
+            (this.sortParam.field === 'addeddate' ||
+                this.sortParam.field === 'reviewdate' ||
+                this.sortParam.field === 'publicdate')) {
+            return this.metadataTemplate(formatDate(this.date, 'long'), dateLabel(this.sortParam.field));
         }
-        return html ``;
+        return nothing;
     }
-    topic() {
+    get viewsTemplate() {
         var _a, _b;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.subject) {
-            return html ` <div id="topic">Topic: ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.subject}</div> `;
+        return this.metadataTemplate(`${formatCount((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.viewCount) !== null && _b !== void 0 ? _b : 0, this.formatSize)}`, 'Views');
+    }
+    get ratingTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating, 'Avg Rating');
+    }
+    get reviewsTemplate() {
+        var _a;
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount, 'Reviews');
+    }
+    get topicsTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.subjects) || this.model.subjects.length === 0) {
+            return nothing;
         }
-        return html ``;
+        return html `
+      <div id="topics" class="metadata">
+        ${this.labelTemplate('Topics')}
+        ${join(map(this.model.subjects, id => this.searchLink('subject', id)), html `, `)}
+      </div>
+    `;
     }
-    source() {
+    get collectionsTemplate() {
+        if (!this.collectionLinks || this.collectionLinks.length === 0) {
+            return nothing;
+        }
+        return html `
+      <div id="collections" class="metadata">
+        ${this.labelTemplate('Collections')}
+        ${join(this.collectionLinks, html `, `)}
+      </div>
+    `;
+    }
+    get descriptionTemplate() {
         var _a, _b;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.source) {
-            return html ` <div id="source">Source: ${(_b = this.model) === null || _b === void 0 ? void 0 : _b.source}</div> `;
+        return this.metadataTemplate(DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''), '', 'description');
+    }
+    // Utility functions
+    metadataTemplate(text, label = '', id) {
+        if (!text)
+            return nothing;
+        return html `
+      <div id=${ifDefined(id)} class="metadata">
+        ${this.labelTemplate(label)} ${text}
+      </div>
+    `;
+    }
+    labelTemplate(label) {
+        return html ` ${label
+            ? html `<span class="label">${label}: </span>`
+            : nothing}`;
+    }
+    searchLink(field, searchTerm) {
+        if (!field || !searchTerm) {
+            return nothing;
         }
-        return html ``;
+        const query = encodeURIComponent(`${field}:"${searchTerm}"`);
+        // No whitespace after closing tag
+        // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
+        // eslint-disable-next-line lit/no-invalid-html
+        return html `<a href="${this.baseNavigationUrl}/search.php?query=${query}">
+      ${DOMPurify.sanitize(searchTerm)}</a
+    >`;
+    }
+    detailsLink(identifier, text) {
+        const linkText = text !== null && text !== void 0 ? text : identifier;
+        // No whitespace after closing tag
+        // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway
+        return html `<a
+      href="${this.baseNavigationUrl}/details/${encodeURI(identifier)}"
+      >${DOMPurify.sanitize(linkText)}</a
+    >`;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -88,118 +292,172 @@ let TileList = class TileList extends LitElement {
         }
     }
     get classSize() {
-        var _a;
-        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'mobile';
+        }
+        return 'desktop';
     }
     get formatSize() {
-        var _a;
-        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'short' : 'long';
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'short';
+        }
+        return 'long';
     }
     static get styles() {
         return css `
-      .mobile div {
-        font-size: 11px;
+      html {
+        font-size: unset;
       }
-      .desktop div {
+
+      div {
         font-size: 14px;
       }
 
+      div a {
+        text-decoration: none;
+      }
+
+      .label {
+        font-weight: bold;
+      }
+
+      #list-line.mobile {
+        --infiniteScrollerRowGap: 20px;
+        --infiniteScrollerRowHeight: auto;
+      }
+
+      #list-line.desktop {
+        --infiniteScrollerRowGap: 30px;
+        --infiniteScrollerRowHeight: auto;
+      }
+
       /* fields */
 
-      #title {
-        color: #4b64ff;
-        text-decoration: none;
+      #thumb img {
+        object-fit: cover;
+        display: block;
       }
 
-      #title,
-      #creator,
-      #topic,
-      #source {
-        text-overflow: ellipsis;
-        overflow: hidden;
+      .mobile #thumb img {
+        width: 90px;
+        height: 90px;
       }
 
-      #title,
-      #creator {
-        white-space: nowrap;
+      .desktop #thumb img {
+        width: 100px;
+        height: 100px;
       }
 
-      #views,
-      #date {
-        text-align: right;
+      #thumb img.collection {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
       }
 
-      #views,
-      #details {
-        color: #767676;
+      .mobile #thumb img.account {
+        border-radius: 45px;
+        -webkit-border-radius: 45px;
+        -moz-border-radius: 45px;
       }
 
-      #icon {
-        padding-right: 6px;
+      .desktop #thumb img.account {
+        border-radius: 50px;
+        -webkit-border-radius: 50px;
+        -moz-border-radius: 50px;
       }
 
-      .desktop #description,
-      .desktop #topic,
-      .desktop #source {
-        font-size: 12px;
+      #icon-right {
+        width: 20px;
+        padding-top: 5px;
+        --iconHeight: 20px;
+        --iconWidth: 20px;
+        --iconTextAlign: right;
+        margin-top: -8px;
+        text-align: right;
       }
 
-      .mobile #description,
-      .mobile #topic,
-      .mobile #source {
-        font-size: 11px;
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+        font-size: 22px;
+        font-weight: bold;
+        /* align top of text with image */
+        line-height: 25px;
+        margin-top: -4px;
+        padding-bottom: 2px;
+        flex-grow: 1;
       }
 
-      #description {
+      .metadata {
+        line-height: 20px;
+      }
+
+      #description,
+      #creator,
+      #topics,
+      #source {
+        text-align: left;
         overflow: hidden;
         text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         display: -webkit-box;
         word-break: break-word;
         -webkit-line-clamp: 3; /* number of lines to show */
         line-clamp: 3;
-        -webkit-box-orient: vertical;
-        text-align: left;
       }
 
-      /* list-line */
+      #icon {
+        padding-top: 5px;
+      }
 
+      #description {
+        padding-top: 10px;
+      }
+
+      /* Top level container */
       #list-line {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        border-top: 1px solid #ddd !important;
-        padding-top: 5px;
-        align-items: center;
+        display: flex;
       }
 
       #list-line.mobile {
-        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+        flex-direction: column;
       }
+
       #list-line.desktop {
-        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+        column-gap: 10px;
       }
 
-      #list-line:hover #title {
-        text-decoration: underline;
+      #list-line-top {
+        display: flex;
+        column-gap: 7px;
       }
 
-      /* list-detail */
+      #list-line-bottom {
+        padding-top: 4px;
+      }
 
-      #list-detail {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        align-items: center;
+      #list-line-right,
+      #list-line-top,
+      #list-line-bottom {
+        width: 100%;
       }
 
-      #list-detail.mobile {
-        grid-template-columns: 33px auto 29.5px;
+      div a:hover {
+        text-decoration: underline;
       }
 
-      #list-detail.desktop {
-        grid-template-columns: 60px auto 29.5px;
+      /* Lines containing multiple div as row */
+      #item-line,
+      #dates-line,
+      #views-line,
+      #title-line {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
       }
     `;
     }
@@ -210,6 +468,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], TileList.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Object })
+], TileList.prototype, "collectionNameCache", void 0);
 __decorate([
     property({ type: Number })
 ], TileList.prototype, "currentWidth", void 0);
@@ -220,8 +481,11 @@ __decorate([
     property({ type: Object })
 ], TileList.prototype, "sortParam", void 0);
 __decorate([
-    property({ type: String })
-], TileList.prototype, "displayMode", void 0);
+    property({ type: Number })
+], TileList.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    state()
+], TileList.prototype, "collectionLinks", void 0);
 TileList = __decorate([
     customElement('tile-list')
 ], TileList);

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, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\n// import * as HtmlSanitizer from '@jitbit/htmlsanitizer';\n// import sanitizeHtml from 'sanitize-html';\n// - error\n// import DOMPurify from 'dompurify';\n// - no types\nimport { CollectionDisplayMode, TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n/*\nat 750 creator, title trimmed\nat 530\n*/\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: String }) displayMode: CollectionDisplayMode =\n    'list-compact';\n\n  // private HtmlSanitizer = HtmlSanitizer();\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"title\">${this.model?.title}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${this.model?.creator}</div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n      ${this.displayMode === 'list-detail' ? this.detail() : html``}\n    `;\n  }\n\n  private detail() {\n    const descriptionHtml = this.description();\n    const topicHtml = this.topic();\n    const sourceHtml = this.source();\n\n    if (descriptionHtml || topicHtml || sourceHtml) {\n      return html`\n        <div id=\"list-detail\" class=\"${this.classSize}\">\n          <div></div>\n          <div id=\"details\">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>\n          <div></div>\n        </div>\n      `;\n    }\n    return html``;\n  }\n\n  private description() {\n    if (this.model?.description) {\n      const description = DOMPurify.sanitize(`${this.model?.description}`);\n      return html` <div id=\"description\">${description}</div> `;\n    }\n    return html``;\n  }\n\n  private topic() {\n    if (this.model?.subject) {\n      return html` <div id=\"topic\">Topic: ${this.model?.subject}</div> `;\n    }\n    return html``;\n  }\n\n  private source() {\n    if (this.model?.source) {\n      return html` <div id=\"source\">Source: ${this.model?.source}</div> `;\n    }\n    return html``;\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    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      .mobile div {\n        font-size: 11px;\n      }\n      .desktop div {\n        font-size: 14px;\n      }\n\n      /* fields */\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #title,\n      #creator {\n        white-space: nowrap;\n      }\n\n      #views,\n      #date {\n        text-align: right;\n      }\n\n      #views,\n      #details {\n        color: #767676;\n      }\n\n      #icon {\n        padding-right: 6px;\n      }\n\n      .desktop #description,\n      .desktop #topic,\n      .desktop #source {\n        font-size: 12px;\n      }\n\n      .mobile #description,\n      .mobile #topic,\n      .mobile #source {\n        font-size: 11px;\n      }\n\n      #description {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\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        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        border-top: 1px solid #ddd !important;\n        padding-top: 5px;\n        align-items: center;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 33px 3fr 30px 2fr 29.5px;\n      }\n      #list-line.desktop {\n        grid-template-columns: 60px 3fr 90px 2fr 29.5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      /* list-detail */\n\n      #list-detail {\n        display: grid;\n        column-gap: 10px;\n        line-height: 1.42857143;\n        align-items: center;\n      }\n\n      #list-detail.mobile {\n        grid-template-columns: 33px auto 29.5px;\n      }\n\n      #list-detail.desktop {\n        grid-template-columns: 60px auto 29.5px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,mBAAmB,CAAC;AAG3B,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAY8B,cAAS,GAAqB,IAAI,CAAC;QAI9C,oBAAe,GAAqB,EAAE,CAAC;IA4e1D,CAAC;IA1eW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAEO,KAAK,CAAC,oBAAoB;;QAChC,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAA;YACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,IAAI,CAAC,mBAAmB,EACzB;YACA,OAAO;SACR;QACD,6DAA6D;QAC7D,iEAAiE;QACjE,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAC1B,MAAM,qBAAqB,GAAqB,EAAE,CAAC;QACnD,MAAM,QAAQ,GAAoB,EAAE,CAAC;QACrC,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC/C,QAAQ,CAAC,IAAI,CACX,MAAA,IAAI,CAAC,mBAAmB,0CAAE,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;gBAClE,qBAAqB,CAAC,IAAI,CACxB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC,CACjD,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;SACH;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;UACvC,IAAI,CAAC,SAAS,KAAK,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAC,cAAc;YACrB,CAAC,CAAC,IAAI,CAAC,eAAe;;KAE3B,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,WAAW;;;;8BAId,IAAI,CAAC,aAAa;cAClC,IAAI,CAAC,iBAAiB;;;;mCAID,IAAI,CAAC,eAAe;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAA;;0BAEW,IAAI,CAAC,WAAW;;;;4BAId,IAAI,CAAC,aAAa;YAClC,IAAI,CAAC,iBAAiB;;UAExB,IAAI,CAAC,eAAe;;KAEzB,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,eAAe;;UAE3C,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,kBAAkB;;;UAGrD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe;;QAEnE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB;QAC/C,IAAI,CAAC,mBAAmB;KAC3B,CAAC;IACJ,CAAC;IAED,iBAAiB;IACjB,IAAY,WAAW;;QACrB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAA,EAAE;YAC3B,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;aACF,IAAI,CAAC,iBAAiB,iBAAiB,IAAI,CAAC,KAAK,CAAC,UAAU;aAC5D,IAAI,CAAC,KAAK,CAAC,UAAU;cACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;OAC5B,CAAC;IACN,CAAC;IAED,IAAY,iBAAiB;;QAC3B,OAAO,IAAI,CAAA;;;uBAGQ,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;yBACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;0CACN,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;;;;KAIpE,CAAC;IACJ,CAAC;IAED,yBAAyB;IACzB,IAAY,eAAe;;QACzB,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,YAAY,EAAE;YAC1C,OAAO,SAAS,CAAC;SAClB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,aAAa;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAA,EAAE;YACtB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;IAC9E,CAAC;IAED,IAAY,gBAAgB;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QACjC,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;YAChC,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,wBAAwB,MAAM,IAAI,MAAM,IAAI,KAAK,SAAS,CAAC;IACxE,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;UAC5B,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;KAEjD,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAED,IAAY,aAAa;;QACvB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,eAAe;;QACzB,8BAA8B;QAC9B,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,SAAS,EAAE;YACvC,OAAO,IAAI,CAAA;;iCAEgB,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;;OAE7D,CAAC;SACH;QACD,gCAAgC;QAChC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACxB,IAAI,CACJ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAC9D,IAAI,CAAA,IAAI,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;;QAC/B,OAAO,IAAI,CAAC,gBAAgB,CAC1B,UAAU,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,EAAE,MAAM,CAAC,EAC7C,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,iDAAiD;IACjD,6CAA6C;IAC7C,IAAY,kBAAkB;QAC5B,IACE,IAAI,CAAC,SAAS;YACd,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,WAAW;gBACnC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,YAAY;gBACrC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,YAAY,CAAC,EACxC;YACA,OAAO,IAAI,CAAC,gBAAgB,CAC1B,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,EAC7B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAChC,CAAC;SACH;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAY,aAAa;;QACvB,OAAO,IAAI,CAAC,gBAAgB,CAC1B,GAAG,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAC7D,OAAO,CACR,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,EAAE,YAAY,CAAC,CAAC;IACxE,CAAC;IAED,IAAY,eAAe;;QACzB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IACpE,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;UAC5B,IAAI,CACJ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAC9D,IAAI,CAAA,IAAI,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;UACjC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAA,IAAI,CAAC;;KAEzC,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;;QAC7B,OAAO,IAAI,CAAC,gBAAgB,CAC1B,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,mCAAI,EAAE,CAAC,EACjD,EAAE,EACF,aAAa,CACd,CAAC;IACJ,CAAC;IAED,oBAAoB;IACZ,gBAAgB,CAAC,IAAS,EAAE,KAAK,GAAG,EAAE,EAAE,EAAW;QACzD,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC1B,OAAO,IAAI,CAAA;gBACC,SAAS,CAAC,EAAE,CAAC;UACnB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,IAAI;;KAEtC,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO,IAAI,CAAA,IAAI,KAAK;YAClB,CAAC,CAAC,IAAI,CAAA,uBAAuB,KAAK,WAAW;YAC7C,CAAC,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAEO,UAAU,CAAC,KAAa,EAAE,UAAkB;QAClD,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE;YACzB,OAAO,OAAO,CAAC;SAChB;QACD,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,KAAK,KAAK,UAAU,GAAG,CAAC,CAAC;QAC7D,kCAAkC;QAClC,qFAAqF;QAErF,+CAA+C;QAC/C,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,iBAAiB,qBAAqB,KAAK;QACnE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;MAChC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,UAAkB,EAAE,IAAa;QACnD,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC;QACpC,kCAAkC;QAClC,+FAA+F;QAC/F,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,iBAAiB,YAAY,SAAS,CAAC,UAAU,CAAC;SAC5D,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAC/B,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,UAAU;QACpB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuJT,CAAC;IACJ,CAAC;CACF,CAAA;AA3f6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAGvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA2B;AAE7C;IAAR,KAAK,EAAE;iDAAgD;AAhB7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4fpB;SA5fY,QAAQ","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} 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 { customElement, property, state } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @state() private collectionLinks: TemplateResult[] = [];\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.fetchCollectionNames();\n    }\n  }\n\n  private async fetchCollectionNames() {\n    if (\n      !this.model?.collections ||\n      this.model.collections.length === 0 ||\n      !this.collectionNameCache\n    ) {\n      return;\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 newCollellectionLinks: TemplateResult[] = [];\n    const promises: Promise<void>[] = [];\n    for (const collection of this.model.collections) {\n      promises.push(\n        this.collectionNameCache?.collectionNameFor(collection).then(name => {\n          newCollellectionLinks.push(\n            this.detailsLink(collection, name ?? collection)\n          );\n        })\n      );\n    }\n    await Promise.all(promises);\n    this.collectionLinks = newCollellectionLinks;\n  }\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  private get mobileTemplate() {\n    return html`\n      <div id=\"list-line-top\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.imgTemplate}</div>\n        </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\">\n        <div id=\"thumb\">${this.imgTemplate}</div>\n      </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 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}\n    `;\n  }\n\n  // Data templates\n  private get imgTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=${this.model?.mediatype}\n    />`;\n  }\n\n  private get iconRightTemplate() {\n    return html`\n      <div id=\"icon-right\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .collections=${this.model?.collections}\n          style=\"--iconCustomFillColor: ${ifDefined(this.collectionColor)}\"\n        >\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  // Only in list, not tile\n  private get collectionColor() {\n    if (this.model?.mediatype !== 'collection') {\n      return undefined;\n    }\n    return '#4666FF';\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\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('Source')}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, 'Volume');\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, 'Issue');\n  }\n\n  private get creatorTemplate() {\n    // \"Achivist since\" if account\n    if (this.model?.mediatype === 'account') {\n      return html`\n        <div id=\"creator\" class=\"metadata\">\n          <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\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('By')}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get datePublishedTemplate() {\n    return this.metadataTemplate(\n      formatDate(this.model?.datePublished, 'long'),\n      'Published'\n    );\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        dateLabel(this.sortParam.field)\n      );\n    }\n    return nothing;\n  }\n\n  private get viewsTemplate() {\n    return this.metadataTemplate(\n      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n      'Views'\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, '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('Topics')}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          html`, `\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('Collections')}\n        ${join(this.collectionLinks, html`, `)}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      DOMPurify.sanitize(this.model?.description ?? ''),\n      '',\n      'description'\n    );\n  }\n\n  // Utility functions\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-next-line lit/no-invalid-html\n    return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n  }\n\n  private detailsLink(identifier: string, text?: string): TemplateResult {\n    const linkText = text ?? identifier;\n    // No whitespace after closing tag\n    // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n    return html`<a\n      href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n      >${DOMPurify.sanitize(linkText)}</a\n    >`;\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(): DateFormat | 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      .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\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 90px;\n        height: 90px;\n      }\n\n      .desktop #thumb img {\n        width: 100px;\n        height: 100px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 45px;\n        -webkit-border-radius: 45px;\n        -moz-border-radius: 45px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 50px;\n        -webkit-border-radius: 50px;\n        -moz-border-radius: 50px;\n      }\n\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\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      #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      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        gap: 10px;\n      }\n    `;\n  }\n}\n"]}