@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

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

@@ -1,73 +1,187 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+/* eslint-disable lit/no-invalid-html */
+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 } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 import { formatCount } from '../../utils/format-count';
 import { formatDate } from '../../utils/format-date';
 import '../../mediatype-icon';
-/*
-at 750 creator, title trimmed
-at 530
-*/
 let TileList = class TileList extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.displayMode = 'list-compact';
-    }
-    // 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)}
+        <div id="list-line-left">
+          <div id="thumb">${this.imgTemplate}</div>
+          ${this.iconLeftTemplate}
         </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">${this.titleTemplate}</div>
+          ${this.itemLineTemplate} ${this.creatorTemplate}
+          <div id="date" class="metadata">
+            <span class="label">Published:</span> ${formatDate(this.date, this.formatSize)}
+          </div>
+          <div id="views-line">
+            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
+          </div>
+          ${this.topicsTemplate} ${this.collectionsTemplate}
+          ${this.descriptionTemplate}
         </div>
       </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) {
-            return html `
-        <div id="list-detail" class="${this.classSize}">
-          <div></div>
-          <div id="details">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>
-          <div></div>
-        </div>
-      `;
+    // Display templates
+    get imgTemplate() {
+        var _a, _b;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return nothing;
         }
-        return html ``;
+        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}
+    />`;
     }
-    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 iconLeftTemplate() {
+        var _a;
+        if (this.classSize !== 'desktop') {
+            return nothing;
+        }
+        return html `
+      <div id="icon-left">
+        <mediatype-icon
+          .mediatype=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype}
+          .showText=${true}
+          style="--iconHeight: 20px; --iconWidth: 20px;text-align: center;"
+        >
+        </mediatype-icon>
+      </div>
+    `;
+    }
+    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 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 sourceTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.source)) {
+            return nothing;
+        }
+        return html `
+      <div id="source">
+        ${this.labelTemplate('Source')}
+        ${this.searchLink('source', this.model.source)}
+      </div>
+    `;
+    }
+    get creatorTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creators) || this.model.creators.length === 0) {
+            return nothing;
         }
-        return html ``;
+        return html `
+      <div id="creator" class="metadata">
+        ${this.labelTemplate('By')}
+        ${join(map(this.model.creators, id => this.searchLink('creator', id)), html `, `)}
+      </div>
+    `;
     }
-    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>
+    `;
+    }
+    get collectionsTemplate() {
+        var _a;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.collections)) {
+            return nothing;
+        }
+        return html `
+      <div id="collections" class="metadata">
+        ${this.labelTemplate('Collections')}
+        ${join(map(this.model.collections, id => this.detailsLink(id)), html `, `)}
+      </div>
+    `;
     }
-    source() {
+    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;
+        }
+        const query = encodeURIComponent(`${field}:"${searchTerm}"`);
+        // No whitespace after closing tag
+        return html ` <a href="${this.baseNavigationUrl}/search.php?query=${query}">
+      ${DOMPurify.sanitize(searchTerm)}</a
+    >`;
+    }
+    detailsLink(identifier, text) {
+        if (!identifier) {
+            return nothing;
         }
-        return html ``;
+        const linkText = text !== null && text !== void 0 ? text : identifier;
+        // No whitespace after closing tag
+        return html ` <a href="${this.baseNavigationUrl}/details/${identifier}"
+      >${DOMPurify.sanitize(linkText)}</a
+    >`;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -97,21 +211,85 @@ let TileList = class TileList extends LitElement {
     }
     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;
+      }
+
+      .mobile {
+        --infiniteScrollerRowGap: 20px;
+        --infiniteScrollerRowHeight: auto;
+      }
+
+      .desktop {
+        --infiniteScrollerRowGap: 30px;
+        --infiniteScrollerRowHeight: auto;
+      }
       /* fields */
 
+      #thumb img {
+        object-fit: cover;
+        display: block;
+      }
+
+      .mobile #thumb img {
+        width: 90px;
+        height: 90px;
+      }
+
+      .desktop #thumb img {
+        width: 100px;
+        height: 100px;
+      }
+
+      #thumb img.collection {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
+      }
+
+      .mobile #thumb img.account {
+        border-radius: 45px;
+        -webkit-border-radius: 45px;
+        -moz-border-radius: 45px;
+      }
+
+      .desktop #thumb img.account {
+        border-radius: 50px;
+        -webkit-border-radius: 50px;
+        -moz-border-radius: 50px;
+      }
+
+      #icon-left {
+        padding-top: 5px;
+      }
+
       #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;
+      }
+
+      .metadata {
+        line-height: 20px;
       }
 
-      #title,
       #creator,
       #topic,
       #source {
@@ -119,38 +297,16 @@ let TileList = class TileList extends LitElement {
         overflow: hidden;
       }
 
-      #title,
-      #creator {
-        white-space: nowrap;
-      }
-
-      #views,
-      #date {
-        text-align: right;
-      }
-
-      #views,
-      #details {
-        color: #767676;
-      }
-
       #icon {
-        padding-right: 6px;
-      }
-
-      .desktop #description,
-      .desktop #topic,
-      .desktop #source {
-        font-size: 12px;
+        padding-top: 5px;
       }
 
-      .mobile #description,
-      .mobile #topic,
-      .mobile #source {
-        font-size: 11px;
+      mediatype-icon {
+        --iconHeight: 20px;
       }
 
       #description {
+        padding-top: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
         -webkit-line-clamp: 2;
@@ -166,40 +322,19 @@ let TileList = class TileList extends LitElement {
       /* list-line */
 
       #list-line {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        border-top: 1px solid #ddd !important;
-        padding-top: 5px;
-        align-items: center;
-      }
-
-      #list-line.mobile {
-        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
-      }
-      #list-line.desktop {
-        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+        display: flex;
+        column-gap: 5px;
       }
 
-      #list-line:hover #title {
+      div a:hover {
         text-decoration: underline;
       }
 
-      /* list-detail */
-
-      #list-detail {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        align-items: center;
-      }
-
-      #list-detail.mobile {
-        grid-template-columns: 33px auto 29.5px;
-      }
-
-      #list-detail.desktop {
-        grid-template-columns: 60px auto 29.5px;
+      #item-line,
+      #views-line {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
       }
     `;
     }
@@ -219,9 +354,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], TileList.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: String })
-], TileList.prototype, "displayMode", 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":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,SAAS,MAAM,WAAW,CAAC;AAOlC,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AACjE,OAAO,sBAAsB,CAAC;AAE9B;;;EAGE;AAGF,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAW8B,gBAAW,GACrC,cAAc,CAAC;IAkMnB,CAAC;IAhMC,2CAA2C;IAE3C,MAAM;;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;;YAErC,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC;;0BAE1C,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;yBAClB,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC;4BACnC,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO;;uCAER,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;;;QAGpD,IAAI,CAAC,WAAW,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;KAC9D,CAAC;IACJ,CAAC;IAEO,MAAM;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAEjC,IAAI,eAAe,IAAI,SAAS,IAAI,UAAU,EAAE;YAC9C,OAAO,IAAI,CAAA;uCACsB,IAAI,CAAC,SAAS;;8BAEvB,eAAe,IAAI,SAAS,IAAI,UAAU;;;OAGjE,CAAC;SACH;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEO,WAAW;;QACjB,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE;YAC3B,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,EAAE,CAAC,CAAC;YACrE,OAAO,IAAI,CAAA,0BAA0B,WAAW,SAAS,CAAC;SAC3D;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;;QACX,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE;YACvB,OAAO,IAAI,CAAA,2BAA2B,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,SAAS,CAAC;SACpE;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEO,MAAM;;QACZ,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAAE;YACtB,OAAO,IAAI,CAAA,6BAA6B,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,SAAS,CAAC;SACrE;QACD,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,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,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAY,UAAU;;QACpB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyGT,CAAC;IACJ,CAAC;CACF,CAAA;AA7M6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAE3B;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;2CAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACV;AAZN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8MpB;SA9MY,QAAQ","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":"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","sourcesContent":["/* eslint-disable lit/no-invalid-html */\nimport { css, html, LitElement, nothing } 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 } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\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: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.imgTemplate}</div>\n          ${this.iconLeftTemplate}\n        </div>\n        <div id=\"list-line-right\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.itemLineTemplate} ${this.creatorTemplate}\n          <div id=\"date\" class=\"metadata\">\n            <span class=\"label\">Published:</span> ${formatDate(\n              this.date,\n              this.formatSize\n            )}\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        </div>\n      </div>\n    `;\n  }\n\n  // Display 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 iconLeftTemplate() {\n    if (this.classSize !== 'desktop') {\n      return nothing;\n    }\n    return html`\n      <div id=\"icon-left\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .showText=${true}\n          style=\"--iconHeight: 20px; --iconWidth: 20px;text-align: center;\"\n        >\n        </mediatype-icon>\n      </div>\n    `;\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 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 sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\">\n        ${this.labelTemplate('Source')}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\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 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.model?.collections) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate('Collections')}\n        ${join(\n          map(this.model.collections, id => this.detailsLink(id)),\n          html`, `\n        )}\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    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) {\n    if (!identifier) {\n      return nothing;\n    }\n    const linkText = text ?? identifier;\n    // No whitespace after closing tag\n    return html` <a href=\"${this.baseNavigationUrl}/details/${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    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      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      .mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      .desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\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-left {\n        padding-top: 5px;\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      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      mediatype-icon {\n        --iconHeight: 20px;\n      }\n\n      #description {\n        padding-top: 10px;\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: flex;\n        column-gap: 5px;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      #item-line,\n      #views-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,13 +1,16 @@
 import { LitElement, PropertyValues } from 'lit';
 import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
 import { SortParam } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { CollectionDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
 import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
 export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
-    displayMode: CollectionDisplayMode;
+    displayMode?: CollectionDisplayMode;
     model?: TileModel;
     baseNavigationUrl?: string;
     showDeleteButton: boolean;
@@ -15,8 +18,12 @@ export declare class TileDispatcher extends LitElement implements SharedResizeOb
     currentHeight?: number;
     resizeObserver?: SharedResizeObserverInterface;
     sortParam?: SortParam;
+    collectionNameCache?: CollectionNameCacheInterface;
     private container;
     render(): import("lit-html").TemplateResult<1>;
+    private get headerTemplate();
+    private get tileTemplate();
+    private get linkTileTemplate();
     handleResize(entry: ResizeObserverEntry): void;
     disconnectedCallback(): void;
     private stopResizeObservation;

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

@@ -6,26 +6,50 @@ import './grid/collection-tile';
 import './grid/item-tile';
 import './grid/account-tile';
 import './list/tile-list';
+import './list/tile-list-compact';
+import './list/tile-list-compact-header';
 let TileDispatcher = class TileDispatcher extends LitElement {
     constructor() {
         super(...arguments);
-        this.displayMode = 'grid';
         this.showDeleteButton = false;
     }
     render() {
-        var _a, _b;
         return html `
       <div id="container">
-        ${this.showDeleteButton
+        ${this.displayMode === 'list-header'
+            ? this.headerTemplate
+            : this.tileTemplate}
+      </div>
+    `;
+    }
+    get headerTemplate() {
+        const { currentWidth, sortParam } = this;
+        return html `
+      <tile-list-compact-header
+        class="header"
+        .currentWidth=${currentWidth}
+        .sortParam=${sortParam}
+      >
+      </tile-list-compact-header>
+    `;
+    }
+    get tileTemplate() {
+        return html `
+      ${this.showDeleteButton
             ? html `<button id="delete-button">X</button>`
             : nothing}
-        <a
-          href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
-          title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
-        >
-          ${this.tile}
-        </a>
-      </div>
+      ${this.displayMode === 'list-detail' ? this.tile : this.linkTileTemplate}
+    `;
+    }
+    get linkTileTemplate() {
+        var _a, _b;
+        return html `
+      <a
+        href="${this.baseNavigationUrl}/details/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}"
+        title=${ifDefined((_b = this.model) === null || _b === void 0 ? void 0 : _b.title)}
+      >
+        ${this.tile}
+      </a>
     `;
     }
     handleResize(entry) {
@@ -79,11 +103,20 @@ let TileDispatcher = class TileDispatcher extends LitElement {
                     default:
                         return html `<item-tile
               .model=${model}
+              .baseNavigationUrl=${baseNavigationUrl}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
+              .collectionNameCache=${this.collectionNameCache}
             ></item-tile>`;
                 }
             case 'list-compact':
+                return html `<tile-list-compact
+          .model=${model}
+          .currentWidth=${currentWidth}
+          .currentHeight=${currentHeight}
+          .baseNavigationUrl=${baseNavigationUrl}
+          .sortParam=${sortParam}
+        ></tile-list-compact>`;
             case 'list-detail':
                 return html `<tile-list
           .model=${model}
@@ -91,7 +124,6 @@ let TileDispatcher = class TileDispatcher extends LitElement {
           .currentHeight=${currentHeight}
           .baseNavigationUrl=${baseNavigationUrl}
           .sortParam=${sortParam}
-          .displayMode=${this.displayMode}
         ></tile-list>`;
             default:
                 return nothing;
@@ -150,6 +182,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], TileDispatcher.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "collectionNameCache", void 0);
 __decorate([
     query('#container')
 ], TileDispatcher.prototype, "container", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.showDeleteButton\n          ? html`<button id=\"delete-button\">X</button>`\n          : nothing}\n        <a\n          href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n          title=${ifDefined(this.model?.title)}\n        >\n          ${this.tile}\n        </a>\n      </div>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n          .displayMode=${this.displayMode}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-dispatcher.js","sourceRoot":"","sources":["../../../src/tiles/tile-dispatcher.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { SortParam } from '@internetarchive/search-service';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { CollectionDisplayMode, TileModel } from '../models';\nimport './grid/collection-tile';\nimport './grid/item-tile';\nimport './grid/account-tile';\nimport './list/tile-list';\nimport './list/tile-list-compact';\nimport './list/tile-list-compact-header';\n\n@customElement('tile-dispatcher')\nexport class TileDispatcher\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Boolean }) showDeleteButton = false;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @query('#container') private container!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.displayMode === 'list-header'\n          ? this.headerTemplate\n          : this.tileTemplate}\n      </div>\n    `;\n  }\n\n  private get headerTemplate() {\n    const { currentWidth, sortParam } = this;\n    return html`\n      <tile-list-compact-header\n        class=\"header\"\n        .currentWidth=${currentWidth}\n        .sortParam=${sortParam}\n      >\n      </tile-list-compact-header>\n    `;\n  }\n\n  private get tileTemplate() {\n    return html`\n      ${this.showDeleteButton\n        ? html`<button id=\"delete-button\">X</button>`\n        : nothing}\n      ${this.displayMode === 'list-detail' ? this.tile : this.linkTileTemplate}\n    `;\n  }\n\n  private get linkTileTemplate() {\n    return html`\n      <a\n        href=\"${this.baseNavigationUrl}/details/${this.model?.identifier}\"\n        title=${ifDefined(this.model?.title)}\n      >\n        ${this.tile}\n      </a>\n    `;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    this.currentWidth = entry.contentRect.width;\n    this.currentHeight = entry.contentRect.height;\n  }\n\n  disconnectedCallback(): void {\n    this.stopResizeObservation(this.resizeObserver);\n  }\n\n  private stopResizeObservation(observer?: SharedResizeObserverInterface) {\n    observer?.removeObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  private startResizeObservation() {\n    this.stopResizeObservation(this.resizeObserver);\n    this.resizeObserver?.addObserver({\n      handler: this,\n      target: this.container,\n    });\n  }\n\n  updated(props: PropertyValues) {\n    if (props.has('resizeObserver')) {\n      const previousObserver = props.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      this.stopResizeObservation(previousObserver);\n      this.startResizeObservation();\n    }\n  }\n\n  private get tile() {\n    const { model, baseNavigationUrl, currentWidth, currentHeight, sortParam } =\n      this;\n\n    if (!model) return nothing;\n\n    switch (this.displayMode) {\n      case 'grid':\n        switch (model.mediatype) {\n          case 'collection':\n            return html`<collection-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            >\n            </collection-tile>`;\n          case 'account':\n            return html`<account-tile\n              .model=${model}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n            ></account-tile>`;\n          default:\n            return html`<item-tile\n              .model=${model}\n              .baseNavigationUrl=${baseNavigationUrl}\n              .currentWidth=${currentWidth}\n              .currentHeight=${currentHeight}\n              .collectionNameCache=${this.collectionNameCache}\n            ></item-tile>`;\n        }\n      case 'list-compact':\n        return html`<tile-list-compact\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list-compact>`;\n      case 'list-detail':\n        return html`<tile-list\n          .model=${model}\n          .currentWidth=${currentWidth}\n          .currentHeight=${currentHeight}\n          .baseNavigationUrl=${baseNavigationUrl}\n          .sortParam=${sortParam}\n        ></tile-list>`;\n      default:\n        return nothing;\n    }\n  }\n\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        height: 100%;\n      }\n\n      #container {\n        height: 100%;\n      }\n\n      #delete-button {\n        float: right;\n      }\n\n      a {\n        display: block;\n        height: 100%;\n        color: unset;\n        text-decoration: none;\n      }\n\n      a :first-child {\n        display: block;\n        height: 100%;\n      }\n    `;\n  }\n}\n"]}