@internetarchive/collection-browser 0.4.11 → 0.4.13-alpha.1

package/dist/src/tiles/list/date-label.d.ts

@@ -1 +1 @@
-export declare function dateLabel(sortField: string | undefined): string;
+export declare function dateLabel(sortField: string | undefined): string;

package/dist/src/tiles/list/date-label.js

@@ -1,13 +1,13 @@
-export function dateLabel(sortField) {
-    switch (sortField) {
-        case 'publicdate':
-            return 'Archived';
-        case 'reviewdate':
-            return 'Reviewed';
-        case 'addeddate':
-            return 'Added';
-        default:
-            return 'Published';
-    }
-}
+export function dateLabel(sortField) {
+    switch (sortField) {
+        case 'publicdate':
+            return 'Archived';
+        case 'reviewdate':
+            return 'Reviewed';
+        case 'addeddate':
+            return 'Added';
+        default:
+            return 'Published';
+    }
+}
 //# sourceMappingURL=date-label.js.map

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

@@ -1,12 +1,12 @@
-import { LitElement } from 'lit';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../../models';
-export declare class TileListCompactHeader extends LitElement {
-    model?: TileModel;
-    currentWidth?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
-    render(): import("lit-html").TemplateResult<1>;
-    private get classSize();
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement } from 'lit';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+export declare class TileListCompactHeader extends LitElement {
+    model?: TileModel;
+    currentWidth?: number;
+    sortParam: SortParam | null;
+    mobileBreakpoint?: number;
+    render(): import("lit-html").TemplateResult<1>;
+    private get classSize();
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -1,14 +1,14 @@
-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;
-    }
-    render() {
-        var _a;
+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;
+    }
+    render() {
+        var _a;
         return html `
       <div id="list-line-header" class="${this.classSize}">
         <div id="thumb"></div>
@@ -18,17 +18,17 @@ let TileListCompactHeader = class TileListCompactHeader extends LitElement {
         <div id="icon">Type</div>
         <div id="views">Views</div>
       </div>
-    `;
-    }
-    get classSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'mobile';
-        }
-        return 'desktop';
-    }
-    static get styles() {
+    `;
+    }
+    get classSize() {
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'mobile';
+        }
+        return 'desktop';
+    }
+    static get styles() {
         return css `
       html {
         font-size: unset;
@@ -63,23 +63,23 @@ let TileListCompactHeader = class TileListCompactHeader extends LitElement {
       #list-line-header.desktop {
         grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
       }
-    `;
-    }
-};
-__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);
-export { TileListCompactHeader };
+    `;
+    }
+};
+__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);
+export { TileListCompactHeader };
 //# sourceMappingURL=tile-list-compact-header.js.map

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

@@ -1,21 +1,22 @@
-import { LitElement } from 'lit';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../../models';
-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;
-    render(): import("lit-html").TemplateResult<1>;
-    private get date();
-    private get views();
-    private get classSize();
-    private get formatSize();
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement } from 'lit';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+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;
+    render(): import("lit-html").TemplateResult<1>;
+    private get href();
+    private get date();
+    private get views();
+    private get classSize();
+    private get formatSize();
+    static get styles(): import("lit").CSSResult;
+}

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

@@ -1,20 +1,20 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import DOMPurify from 'dompurify';
-import { formatCount } from '../../utils/format-count';
-import { formatDate } from '../../utils/format-date';
-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;
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import DOMPurify from 'dompurify';
+import { formatCount } from '../../utils/format-count';
+import { formatDate } from '../../utils/format-date';
+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;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return html `
       <div id="list-line" class="${this.classSize}">
         <image-block
@@ -26,10 +26,12 @@ let TileListCompact = class TileListCompact extends LitElement {
           .loggedIn=${this.loggedIn}
         >
         </image-block>
-        <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
+        <a href=${this.href} id="title"
+          >${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</a
+        >
         <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)
+          ${((_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 : '')}
         </div>
         <div id="date">${formatDate(this.date, this.formatSize)}</div>
@@ -42,55 +44,63 @@ let TileListCompact = class TileListCompact extends LitElement {
         </div>
         <div id="views">${formatCount((_j = this.views) !== null && _j !== void 0 ? _j : 0, this.formatSize)}</div>
       </div>
-    `;
-    }
-    /*
-     * TODO: fix field names to match model in src/collection-browser.ts
-     * private get dateSortSelector()
-     * @see src/models.ts
-     */
-    get date() {
-        var _a, _b, _c, _d, _e;
-        // Note on 'publicdate' vs. 'date':
-        // The search engine metadata uses 'publicdate' as the key for the date the item
-        // was created on archive.org, which in the UI is referred to as "Date Archived".
-        // In contrast, the search engine metadata uses 'date' to refer to the actual
-        // publication date of the underlying media ("Date Published" in the UI).
-        // Refer to the full metadata schema for more info.
-        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
-            case 'publicdate':
-                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.dateArchived;
-            case 'reviewdate':
-                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
-            case 'addeddate':
-                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
-            default:
-                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.datePublished;
-        }
-    }
-    get views() {
-        var _a, _b, _c;
-        return ((_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
-    }
-    get classSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'mobile';
-        }
-        return 'desktop';
-    }
-    get formatSize() {
-        if (this.mobileBreakpoint &&
-            this.currentWidth &&
-            this.currentWidth < this.mobileBreakpoint) {
-            return 'short';
-        }
-        return 'long';
-    }
-    static get styles() {
+    `;
+    }
+    get href() {
+        var _a, _b;
+        // Use the server-specified href if available.
+        // Otherwise, construct a details page URL from the item identifier.
+        return ((_a = this.model) === null || _a === void 0 ? void 0 : _a.href)
+            ? `${this.baseNavigationUrl}${this.model.href}`
+            : `${this.baseNavigationUrl}/details/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}`;
+    }
+    /*
+     * TODO: fix field names to match model in src/collection-browser.ts
+     * private get dateSortSelector()
+     * @see src/models.ts
+     */
+    get date() {
+        var _a, _b, _c, _d, _e;
+        // Note on 'publicdate' vs. 'date':
+        // The search engine metadata uses 'publicdate' as the key for the date the item
+        // was created on archive.org, which in the UI is referred to as "Date Archived".
+        // In contrast, the search engine metadata uses 'date' to refer to the actual
+        // publication date of the underlying media ("Date Published" in the UI).
+        // Refer to the full metadata schema for more info.
+        switch ((_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field) {
+            case 'publicdate':
+                return (_b = this.model) === null || _b === void 0 ? void 0 : _b.dateArchived;
+            case 'reviewdate':
+                return (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed;
+            case 'addeddate':
+                return (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded;
+            default:
+                return (_e = this.model) === null || _e === void 0 ? void 0 : _e.datePublished;
+        }
+    }
+    get views() {
+        var _a, _b, _c;
+        return ((_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
+    }
+    get classSize() {
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'mobile';
+        }
+        return 'desktop';
+    }
+    get formatSize() {
+        if (this.mobileBreakpoint &&
+            this.currentWidth &&
+            this.currentWidth < this.mobileBreakpoint) {
+            return 'short';
+        }
+        return 'long';
+    }
+    static get styles() {
         return css `
       html {
         font-size: unset;
@@ -123,10 +133,13 @@ let TileListCompact = class TileListCompact extends LitElement {
       }
 
       #title {
-        color: #4b64ff;
         text-decoration: none;
       }
 
+      #title:link {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+
       #title,
       #creator {
         text-overflow: ellipsis;
@@ -161,35 +174,35 @@ let TileListCompact = class TileListCompact extends LitElement {
         --imgHeight: 100%;
         --imgWidth: 100%;
       }
-    `;
-    }
-};
-__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);
-TileListCompact = __decorate([
-    customElement('tile-list-compact')
-], TileListCompact);
-export { TileListCompact };
+    `;
+    }
+};
+__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);
+TileListCompact = __decorate([
+    customElement('tile-list-compact')
+], TileListCompact);
+export { TileListCompact };
 //# sourceMappingURL=tile-list-compact.js.map

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 } 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 { 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  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        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\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.formatSize)}</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  /*\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 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      #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        color: #4b64ff;\n        text-decoration: none;\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, LitElement } 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 { 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  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.formatSize)}</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 {\n    // Use the server-specified href if available.\n    // Otherwise, construct a details page URL from the item identifier.\n    return this.model?.href\n      ? `${this.baseNavigationUrl}${this.model.href}`\n      : `${this.baseNavigationUrl}/details/${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 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      #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,55 +1,55 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileModel } from '../../models';
-import '../image-block';
-import '../mediatype-icon';
-export declare class TileList extends LitElement {
-    model?: TileModel;
-    baseNavigationUrl?: string;
-    collectionNameCache?: CollectionNameCacheInterface;
-    currentWidth?: number;
-    currentHeight?: number;
-    sortParam: SortParam | null;
-    mobileBreakpoint?: number;
-    private collectionLinks;
-    baseImageUrl?: string;
-    loggedIn: boolean;
-    render(): TemplateResult<1>;
-    /**
-     * Templates
-     */
-    private get mobileTemplate();
-    private get desktopTemplate();
-    private get imageBlockTemplate();
-    private get detailsTemplate();
-    private get iconRightTemplate();
-    private get titleTemplate();
-    private get itemLineTemplate();
-    private get sourceTemplate();
-    private get volumeTemplate();
-    private get issueTemplate();
-    private get creatorTemplate();
-    private get datePublishedTemplate();
-    private get dateSortByTemplate();
-    private get viewsTemplate();
-    private get ratingTemplate();
-    private get reviewsTemplate();
-    private get topicsTemplate();
-    private get collectionsTemplate();
-    private get descriptionTemplate();
-    private get textSnippetsTemplate();
-    private get hasSnippets();
-    private metadataTemplate;
-    private labelTemplate;
-    private searchLink;
-    private detailsLink;
-    /** The URL of this item's mediatype collection, if defined. */
-    private get mediatypeURL();
-    protected updated(changed: PropertyValues): void;
-    private fetchCollectionNames;
-    private get date();
-    private get classSize();
-    private get formatSize();
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileModel } from '../../models';
+import '../image-block';
+import '../mediatype-icon';
+export declare class TileList extends LitElement {
+    model?: TileModel;
+    baseNavigationUrl?: string;
+    collectionNameCache?: CollectionNameCacheInterface;
+    currentWidth?: number;
+    currentHeight?: number;
+    sortParam: SortParam | null;
+    mobileBreakpoint?: number;
+    private collectionLinks;
+    baseImageUrl?: string;
+    loggedIn: boolean;
+    render(): TemplateResult<1>;
+    /**
+     * Templates
+     */
+    private get mobileTemplate();
+    private get desktopTemplate();
+    private get imageBlockTemplate();
+    private get detailsTemplate();
+    private get iconRightTemplate();
+    private get titleTemplate();
+    private get itemLineTemplate();
+    private get sourceTemplate();
+    private get volumeTemplate();
+    private get issueTemplate();
+    private get creatorTemplate();
+    private get datePublishedTemplate();
+    private get dateSortByTemplate();
+    private get viewsTemplate();
+    private get ratingTemplate();
+    private get reviewsTemplate();
+    private get topicsTemplate();
+    private get collectionsTemplate();
+    private get descriptionTemplate();
+    private get textSnippetsTemplate();
+    private get hasSnippets();
+    private metadataTemplate;
+    private labelTemplate;
+    private searchLink;
+    private detailsLink;
+    /** The URL of this item's mediatype collection, if defined. */
+    private get mediatypeURL();
+    protected updated(changed: PropertyValues): void;
+    private fetchCollectionNames;
+    private get date();
+    private get classSize();
+    private get formatSize();
+    static get styles(): import("lit").CSSResult;
+}