@internetarchive/collection-browser 1.5.0 → 1.5.1

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

@@ -1,22 +1,31 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { dateLabel } from './date-label';
-let TileListCompactHeader = class TileListCompactHeader extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-    }
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+let TileListCompactHeader = class TileListCompactHeader extends BaseTileComponent {
+    /*
+     * Reactive properties inherited from BaseTileComponent:
+     *  - model?: TileModel;
+     *  - currentWidth?: number;
+     *  - currentHeight?: number;
+     *  - baseNavigationUrl?: string;
+     *  - baseImageUrl?: string;
+     *  - collectionPagePath?: string;
+     *  - sortParam: SortParam | null = null;
+     *  - creatorFilter?: string;
+     *  - mobileBreakpoint?: number;
+     *  - loggedIn = false;
+     */
     render() {
-        var _a;
         return html `
       <div id="list-line-header" class="${this.classSize}">
         <div id="thumb"></div>
-        <div id="title">Title</div>
-        <div id="creator">Creator</div>
-        <div id="date">${dateLabel((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field)}</div>
-        <div id="icon">Type</div>
-        <div id="views">Views</div>
+        <div id="title">${msg('Title')}</div>
+        <div id="creator">${msg('Creator')}</div>
+        <div id="date">${this.displayValueProvider.dateLabel}</div>
+        <div id="icon">${msg('Type')}</div>
+        <div id="views">${msg('Views')}</div>
       </div>
     `;
     }
@@ -66,18 +75,6 @@ let TileListCompactHeader = class TileListCompactHeader extends LitElement {
     `;
     }
 };
-__decorate([
-    property({ type: Object })
-], TileListCompactHeader.prototype, "model", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompactHeader.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Object })
-], TileListCompactHeader.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompactHeader.prototype, "mobileBreakpoint", void 0);
 TileListCompactHeader = __decorate([
     customElement('tile-list-compact-header')
 ], TileListCompactHeader);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.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,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAArD;;QAK8B,cAAS,GAAqB,IAAI,CAAC;IAiEjE,CAAC;IA7DC,MAAM;;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;;;yBAI/B,SAAS,CAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;;;;KAIpD,CAAC;IACJ,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,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AArE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA2B;AAP3C,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAsEjC;SAtEY,qBAAqB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { SortParam } from '@internetarchive/search-service';\nimport { dateLabel } from './date-label';\nimport type { TileModel } from '../../models';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  render() {\n    return html`\n      <div id=\"list-line-header\" class=\"${this.classSize}\">\n        <div id=\"thumb\"></div>\n        <div id=\"title\">Title</div>\n        <div id=\"creator\">Creator</div>\n        <div id=\"date\">${dateLabel(this.sortParam?.field)}</div>\n        <div id=\"icon\">Type</div>\n        <div id=\"views\">Views</div>\n      </div>\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  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAG3D,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,iBAAiB;IAC1D;;;;;;;;;;;;OAYG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;0BAE9B,GAAG,CAAC,OAAO,CAAC;4BACV,GAAG,CAAC,SAAS,CAAC;yBACjB,IAAI,CAAC,oBAAoB,CAAC,SAAS;yBACnC,GAAG,CAAC,MAAM,CAAC;0BACV,GAAG,CAAC,OAAO,CAAC;;KAEjC,CAAC;IACJ,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,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCT,CAAC;IACJ,CAAC;CACF,CAAA;AA5EY,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA4EjC;SA5EY,qBAAqB","sourcesContent":["import { css, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { BaseTileComponent } from '../base-tile-component';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  render() {\n    return html`\n      <div id=\"list-line-header\" class=\"${this.classSize}\">\n        <div id=\"thumb\"></div>\n        <div id=\"title\">${msg('Title')}</div>\n        <div id=\"creator\">${msg('Creator')}</div>\n        <div id=\"date\">${this.displayValueProvider.dateLabel}</div>\n        <div id=\"icon\">${msg('Type')}</div>\n        <div id=\"views\">${msg('Views')}</div>\n      </div>\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  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: flex-end;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,24 +1,15 @@
-import { LitElement } from 'lit';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../../models';
+import { BaseTileComponent } from '../base-tile-component';
 import '../image-block';
 import '../mediatype-icon';
-export declare class TileListCompact extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    collectionPagePath: string;
+export declare class TileListCompact extends BaseTileComponent {
     render(): import("lit-html").TemplateResult<1>;
     private get href();
+    private get creator();
     private get date();
     private get views();
     private get classSize();
     private get dateFormatSize();
     private get formatSize();
+    private get isSortedByDate();
     static get styles(): import("lit").CSSResult;
 }

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

@@ -1,22 +1,29 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
+import { BaseTileComponent } from '../base-tile-component';
 import { formatCount } from '../../utils/format-count';
 import { formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
-import { accountLabel } from './account-label';
 import '../image-block';
 import '../mediatype-icon';
-let TileListCompact = class TileListCompact extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortParam = null;
-        this.loggedIn = false;
-        this.collectionPagePath = '/details/';
-    }
+let TileListCompact = class TileListCompact extends BaseTileComponent {
+    /*
+     * Reactive properties inherited from BaseTileComponent:
+     *  - model?: TileModel;
+     *  - currentWidth?: number;
+     *  - currentHeight?: number;
+     *  - baseNavigationUrl?: string;
+     *  - baseImageUrl?: string;
+     *  - collectionPagePath?: string;
+     *  - sortParam: SortParam | null = null;
+     *  - creatorFilter?: string;
+     *  - mobileBreakpoint?: number;
+     *  - loggedIn = false;
+     */
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f;
         return html `
       <div id="list-line" class="${this.classSize}">
         <image-block
@@ -33,23 +40,23 @@ let TileListCompact = class TileListCompact extends LitElement {
         >
         <div id="creator">
           ${((_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype) === 'account'
-            ? accountLabel((_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded)
-            : DOMPurify.sanitize((_f = (_e = this.model) === null || _e === void 0 ? void 0 : _e.creator) !== null && _f !== void 0 ? _f : '')}
+            ? this.displayValueProvider.accountLabel
+            : this.creator}
         </div>
         <div id="date">${formatDate(this.date, this.dateFormatSize)}</div>
         <div id="icon">
           <mediatype-icon
-            .mediatype=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.mediatype}
-            .collections=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.collections}
+            .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
+            .collections=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.collections}
           >
           </mediatype-icon>
         </div>
-        <div id="views">${formatCount((_j = this.views) !== null && _j !== void 0 ? _j : 0, this.formatSize)}</div>
+        <div id="views">${formatCount((_f = this.views) !== null && _f !== void 0 ? _f : 0, this.formatSize)}</div>
       </div>
     `;
     }
     get href() {
-        var _a, _b;
+        var _a;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) || this.baseNavigationUrl == null)
             return nothing;
         // Use the server-specified href if available.
@@ -57,9 +64,11 @@ let TileListCompact = class TileListCompact extends LitElement {
         if (this.model.href) {
             return `${this.baseNavigationUrl}${this.model.href}`;
         }
-        const isCollection = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype) === 'collection';
-        const basePath = isCollection ? this.collectionPagePath : '/details/';
-        return `${this.baseNavigationUrl}${basePath}${this.model.identifier}`;
+        return this.displayValueProvider.itemPageUrl(this.model.identifier, this.model.mediatype === 'collection');
+    }
+    get creator() {
+        var _a;
+        return (_a = this.displayValueProvider.firstCreatorMatchingFilter) !== null && _a !== void 0 ? _a : nothing;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -104,7 +113,7 @@ let TileListCompact = class TileListCompact extends LitElement {
         // If we're showing a date published of Jan 1 at midnight, only show the year.
         // This is because items with only a year for their publication date are normalized to
         // Jan 1 at midnight timestamps in the search engine documents.
-        if ((!((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) || this.sortParam.field === 'date') && // No sort or date published
+        if ((!this.isSortedByDate || ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) === 'date') && // Any sort except dates that aren't published date
             isFirstMillisecondOfUTCYear((_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished)) {
             return 'year-only';
         }
@@ -118,6 +127,10 @@ let TileListCompact = class TileListCompact extends LitElement {
         }
         return 'long';
     }
+    get isSortedByDate() {
+        var _a;
+        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field);
+    }
     static get styles() {
         return css `
       html {
@@ -195,33 +208,6 @@ let TileListCompact = class TileListCompact extends LitElement {
     `;
     }
 };
-__decorate([
-    property({ type: Object })
-], TileListCompact.prototype, "model", void 0);
-__decorate([
-    property({ type: String })
-], TileListCompact.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "currentWidth", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "currentHeight", void 0);
-__decorate([
-    property({ type: Object })
-], TileListCompact.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileListCompact.prototype, "mobileBreakpoint", void 0);
-__decorate([
-    property({ type: String })
-], TileListCompact.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileListCompact.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: String })
-], TileListCompact.prototype, "collectionPagePath", void 0);
 TileListCompact = __decorate([
     customElement('tile-list-compact')
 ], TileListCompact);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../../models';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport { accountLabel } from './account-label';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact 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 | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: String }) collectionPagePath: string = '/details/';\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <image-block\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isCompactTile=${true}\n          .isListTile=${true}\n          .viewSize=${this.classSize}\n          .loggedIn=${this.loggedIn}\n        >\n        </image-block>\n        <a href=${this.href} id=\"title\"\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n        >\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? accountLabel(this.model?.dateAdded)\n            : DOMPurify.sanitize(this.model?.creator ?? '')}\n        </div>\n        <div id=\"date\">${formatDate(this.date, this.dateFormatSize)}</div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            .collections=${this.model?.collections}\n          >\n          </mediatype-icon>\n        </div>\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n      </div>\n    `;\n  }\n\n  private get href(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    const isCollection = this.model?.mediatype === 'collection';\n    const basePath = isCollection ? this.collectionPagePath : '/details/';\n    return `${this.baseNavigationUrl}${basePath}${this.model.identifier}`;\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    // Note on 'publicdate' vs. 'date':\n    // The search engine metadata uses 'publicdate' as the key for the date the item\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\n    // publication date of the underlying media (\"Date Published\" in the UI).\n    // Refer to the full metadata schema for more info.\n    switch (this.sortParam?.field) {\n      case 'publicdate':\n        return this.model?.dateArchived;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.datePublished;\n    }\n  }\n\n  private get views(): number | undefined {\n    return this.sortParam?.field === 'week'\n      ? this.model?.weeklyViewCount // weekly views\n      : this.model?.viewCount; // all-time views\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 dateFormatSize(): DateFormat {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    if (\n      (!this.sortParam?.field || this.sortParam.field === 'date') && // No sort or date published\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\n    ) {\n      return 'year-only';\n    }\n    return this.formatSize;\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #title {\n        text-decoration: none;\n      }\n\n      #title:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #icon {\n        margin-left: 2px;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n\n      item-image {\n        --imgHeight: 100%;\n        --imgWidth: 100%;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\nimport { BaseTileComponent } from '../base-tile-component';\n\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends BaseTileComponent {\n  /*\n   * Reactive properties inherited from BaseTileComponent:\n   *  - model?: TileModel;\n   *  - currentWidth?: number;\n   *  - currentHeight?: number;\n   *  - baseNavigationUrl?: string;\n   *  - baseImageUrl?: string;\n   *  - collectionPagePath?: string;\n   *  - sortParam: SortParam | null = null;\n   *  - creatorFilter?: string;\n   *  - mobileBreakpoint?: number;\n   *  - loggedIn = false;\n   */\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <image-block\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isCompactTile=${true}\n          .isListTile=${true}\n          .viewSize=${this.classSize}\n          .loggedIn=${this.loggedIn}\n        >\n        </image-block>\n        <a href=${this.href} id=\"title\"\n          >${DOMPurify.sanitize(this.model?.title ?? '')}</a\n        >\n        <div id=\"creator\">\n          ${this.model?.mediatype === 'account'\n            ? this.displayValueProvider.accountLabel\n            : this.creator}\n        </div>\n        <div id=\"date\">${formatDate(this.date, this.dateFormatSize)}</div>\n        <div id=\"icon\">\n          <mediatype-icon\n            .mediatype=${this.model?.mediatype}\n            .collections=${this.model?.collections}\n          >\n          </mediatype-icon>\n        </div>\n        <div id=\"views\">${formatCount(this.views ?? 0, this.formatSize)}</div>\n      </div>\n    `;\n  }\n\n  private get href(): string | typeof nothing {\n    if (!this.model?.identifier || this.baseNavigationUrl == null)\n      return nothing;\n\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    if (this.model.href) {\n      return `${this.baseNavigationUrl}${this.model.href}`;\n    }\n\n    return this.displayValueProvider.itemPageUrl(\n      this.model.identifier,\n      this.model.mediatype === 'collection'\n    );\n  }\n\n  private get creator(): string | typeof nothing {\n    return this.displayValueProvider.firstCreatorMatchingFilter ?? nothing;\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    // Note on 'publicdate' vs. 'date':\n    // The search engine metadata uses 'publicdate' as the key for the date the item\n    // was created on archive.org, which in the UI is referred to as \"Date Archived\".\n    // In contrast, the search engine metadata uses 'date' to refer to the actual\n    // publication date of the underlying media (\"Date Published\" in the UI).\n    // Refer to the full metadata schema for more info.\n    switch (this.sortParam?.field) {\n      case 'publicdate':\n        return this.model?.dateArchived;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.datePublished;\n    }\n  }\n\n  private get views(): number | undefined {\n    return this.sortParam?.field === 'week'\n      ? this.model?.weeklyViewCount // weekly views\n      : this.model?.viewCount; // all-time views\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 dateFormatSize(): DateFormat {\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\n    // This is because items with only a year for their publication date are normalized to\n    // Jan 1 at midnight timestamps in the search engine documents.\n    if (\n      (!this.isSortedByDate || this.sortParam?.field === 'date') && // Any sort except dates that aren't published date\n      isFirstMillisecondOfUTCYear(this.model?.datePublished)\n    ) {\n      return 'year-only';\n    }\n    return this.formatSize;\n  }\n\n  private get formatSize(): NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  private get isSortedByDate(): boolean {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\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      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 36px 3fr 2fr 68px 35px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #title {\n        text-decoration: none;\n      }\n\n      #title:link {\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #icon {\n        margin-left: 2px;\n      }\n\n      #views {\n        text-align: right;\n        padding-right: 8px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      .mobile mediatype-icon {\n        --iconHeight: 14px;\n        --iconWidth: 14px;\n      }\n\n      .desktop #icon {\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n      }\n\n      item-image {\n        --imgHeight: 100%;\n        --imgWidth: 100%;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,21 +1,11 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileModel } from '../../models';
+import { BaseTileComponent } from '../base-tile-component';
 import '../image-block';
 import '../mediatype-icon';
-export declare class TileList extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
+export declare class TileList extends BaseTileComponent {
     collectionNameCache?: CollectionNameCacheInterface;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
     private collectionLinks;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    collectionPagePath: string;
     render(): TemplateResult<1>;
     /**
      * Templates

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

@@ -1,26 +1,36 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
+import { css, html, 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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import DOMPurify from 'dompurify';
 import { suppressedCollections } from '../../models';
-import { dateLabel } from './date-label';
-import { accountLabel } from './account-label';
+import { BaseTileComponent } from '../base-tile-component';
 import { formatCount } from '../../utils/format-count';
 import { formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import '../image-block';
 import '../mediatype-icon';
-let TileList = class TileList extends LitElement {
+let TileList = class TileList extends BaseTileComponent {
     constructor() {
+        /*
+         * Reactive properties inherited from BaseTileComponent:
+         *  - model?: TileModel;
+         *  - currentWidth?: number;
+         *  - currentHeight?: number;
+         *  - baseNavigationUrl?: string;
+         *  - baseImageUrl?: string;
+         *  - collectionPagePath?: string;
+         *  - sortParam: SortParam | null = null;
+         *  - creatorFilter?: string;
+         *  - mobileBreakpoint?: number;
+         *  - loggedIn = false;
+         */
         super(...arguments);
-        this.sortParam = null;
         this.collectionLinks = [];
-        this.loggedIn = false;
-        this.collectionPagePath = '/details/';
     }
     render() {
         return html `
@@ -64,10 +74,7 @@ let TileList = class TileList extends LitElement {
         if (!this.model)
             return nothing;
         const isCollection = this.model.mediatype === 'collection';
-        const hrefBasePath = isCollection ? this.collectionPagePath : '/details/';
-        const href = this.model.identifier && this.baseNavigationUrl != null
-            ? `${this.baseNavigationUrl}${hrefBasePath}${encodeURI(this.model.identifier)}`
-            : nothing;
+        const href = this.displayValueProvider.itemPageUrl(this.model.identifier, isCollection);
         return html `<a href=${href}>
       <image-block
         .model=${this.model}
@@ -135,18 +142,18 @@ let TileList = class TileList extends LitElement {
         }
         return html `
       <div id="source" class="metadata">
-        ${this.labelTemplate('Source')}
+        ${this.labelTemplate(msg('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');
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume, msg('Volume'));
     }
     get issueTemplate() {
         var _a;
-        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, 'Issue');
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.issue, msg('Issue'));
     }
     get creatorTemplate() {
         var _a, _b, _c;
@@ -154,7 +161,9 @@ let TileList = class TileList extends LitElement {
         if (((_a = this.model) === null || _a === void 0 ? void 0 : _a.mediatype) === 'account') {
             return html `
         <div id="creator" class="metadata">
-          <span class="label"> ${accountLabel((_b = this.model) === null || _b === void 0 ? void 0 : _b.dateAdded)} </span>
+          <span class="label"
+            >${(_b = this.displayValueProvider.accountLabel) !== null && _b !== void 0 ? _b : nothing}</span
+          >
         </div>
       `;
         }
@@ -164,7 +173,7 @@ let TileList = class TileList extends LitElement {
         }
         return html `
       <div id="creator" class="metadata">
-        ${this.labelTemplate('By')}
+        ${this.labelTemplate(msg('By'))}
         ${join(map(this.model.creators, id => this.searchLink('creator', id)), html `, `)}
       </div>
     `;
@@ -179,7 +188,7 @@ let TileList = class TileList extends LitElement {
         if (isFirstMillisecondOfUTCYear(date)) {
             format = 'year-only';
         }
-        return this.metadataTemplate(formatDate(date, format), 'Published');
+        return this.metadataTemplate(formatDate(date, format), msg('Published'));
     }
     // Show date label/value when sorted by date type
     // Except datePublished which is always shown
@@ -188,7 +197,7 @@ let TileList = class TileList extends LitElement {
             (this.sortParam.field === 'addeddate' ||
                 this.sortParam.field === 'reviewdate' ||
                 this.sortParam.field === 'publicdate')) {
-            return this.metadataTemplate(formatDate(this.date, 'long'), dateLabel(this.sortParam.field));
+            return this.metadataTemplate(formatDate(this.date, 'long'), this.displayValueProvider.dateLabel);
         }
         return nothing;
     }
@@ -197,15 +206,15 @@ let TileList = class TileList extends LitElement {
         const viewCount = ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) === 'week'
             ? (_b = this.model) === null || _b === void 0 ? void 0 : _b.weeklyViewCount // weekly views
             : (_c = this.model) === null || _c === void 0 ? void 0 : _c.viewCount; // all-time views
-        return this.metadataTemplate(`${formatCount(viewCount !== null && viewCount !== void 0 ? viewCount : 0, this.formatSize)}`, 'Views');
+        return this.metadataTemplate(`${formatCount(viewCount !== null && viewCount !== void 0 ? viewCount : 0, this.formatSize)}`, msg('Views'));
     }
     get ratingTemplate() {
         var _a;
-        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating, 'Avg Rating');
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating, msg('Avg Rating'));
     }
     get reviewsTemplate() {
         var _a;
-        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount, 'Reviews');
+        return this.metadataTemplate((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount, msg('Reviews'));
     }
     get topicsTemplate() {
         var _a;
@@ -214,7 +223,7 @@ let TileList = class TileList extends LitElement {
         }
         return html `
       <div id="topics" class="metadata">
-        ${this.labelTemplate('Topics')}
+        ${this.labelTemplate(msg('Topics'))}
         ${join(map(this.model.subjects, id => this.searchLink('subject', id)), html `, `)}
       </div>
     `;
@@ -225,7 +234,7 @@ let TileList = class TileList extends LitElement {
         }
         return html `
       <div id="collections" class="metadata">
-        ${this.labelTemplate('Collections')}
+        ${this.labelTemplate(msg('Collections'))}
         ${join(this.collectionLinks, html `, `)}
       </div>
     `;
@@ -281,16 +290,10 @@ let TileList = class TileList extends LitElement {
     >`;
         /* eslint-enable lit/no-invalid-html */
     }
-    detailsLink(identifier, text, collection = false) {
+    detailsLink(identifier, text, isCollection = false) {
         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}${collection
-            ? this.collectionPagePath
-            : '/details/'}${encodeURI(identifier)}"
-      >${DOMPurify.sanitize(linkText)}</a
-    >`;
+        const linkHref = this.displayValueProvider.itemPageUrl(identifier, isCollection);
+        return html `<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;
     }
     /** The URL of this item's mediatype collection, if defined. */
     get mediatypeURL() {
@@ -305,7 +308,7 @@ let TileList = class TileList extends LitElement {
             case 'account':
                 return nothing;
             default:
-                return `${this.baseNavigationUrl}${this.collectionPagePath}${encodeURI(this.model.mediatype)}`;
+                return this.displayValueProvider.itemPageUrl(this.model.mediatype, true);
         }
     }
     updated(changed) {
@@ -541,39 +544,12 @@ let TileList = class TileList extends LitElement {
     `;
     }
 };
-__decorate([
-    property({ type: Object })
-], TileList.prototype, "model", void 0);
-__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);
-__decorate([
-    property({ type: Number })
-], TileList.prototype, "currentHeight", void 0);
-__decorate([
-    property({ type: Object })
-], TileList.prototype, "sortParam", void 0);
-__decorate([
-    property({ type: Number })
-], TileList.prototype, "mobileBreakpoint", void 0);
 __decorate([
     state()
 ], TileList.prototype, "collectionLinks", void 0);
-__decorate([
-    property({ type: String })
-], TileList.prototype, "baseImageUrl", void 0);
-__decorate([
-    property({ type: Boolean })
-], TileList.prototype, "loggedIn", void 0);
-__decorate([
-    property({ type: String })
-], TileList.prototype, "collectionPagePath", void 0);
 TileList = __decorate([
     customElement('tile-list')
 ], TileList);