@internetarchive/collection-browser 3.4.1-alpha-webdev7761.2 → 3.4.1-alpha-webdev7761.4

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

@@ -28,57 +28,54 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         this.showInfoButton = false;
     }
     render() {
-        return html `
-      <div class="container">
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
-          </div>
-        </div>
-
-        ${this.getTileStatsTemplate}
-      </div>
+        return html `
+      <div class="container">
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
+          </div>
+        </div>
+
+        ${this.getTileStatsTemplate}
+      </div>
     `;
     }
     get getImageBlockTemplate() {
-        return html `
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
+        return html `
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
     `;
     }
     get getTitleTemplate() {
-        var _a;
-        return html `<div id="title">
-      <h3 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h3>
+        return html `<div id="title">
+      <h3 class="truncated">${this.model?.title}</h3>
     </div>`;
     }
     get getTileStatsTemplate() {
-        return html `
-      <div id="item-stats">
-        <div id="item-mediatype">${collectionIcon}</div>
-
-        <div id="stats-row">
-          ${this.getItemsTemplate} ${this.getSizeTemplate}
-        </div>
-      </div>
+        return html `
+      <div id="item-stats">
+        <div id="item-mediatype">${collectionIcon}</div>
+
+        <div id="stats-row">
+          ${this.getItemsTemplate} ${this.getSizeTemplate}
+        </div>
+      </div>
     `;
     }
     get getItemsTemplate() {
-        var _a, _b;
-        const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
-        return html `<span id="item-count"
-      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
+        const collectionItems = this.model?.itemCount?.toLocaleString();
+        return html `<span id="item-count"
+      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
     >`;
     }
     get getSizeTemplate() {
-        var _a, _b;
-        const collectionSize = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collectionSize) !== null && _b !== void 0 ? _b : 0;
+        const collectionSize = this.model?.collectionSize ?? 0;
         return collectionSize
             ? html `<span id="item-size">${formatUnitSize(collectionSize, 1)}</span>`
             : ``;
@@ -86,9 +83,9 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
     get infoButtonTemplate() {
         // &#9432; is an information icon
         return this.showInfoButton
-            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
+            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
         </button>`
             : nothing;
     }
@@ -103,49 +100,49 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         const whiteColor = css `#fff`;
         return [
             baseTileStyles,
-            css `
-        .container {
-          background-color: ${tileBackgroundColor};
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .item-info {
-          flex-grow: initial;
-        }
-
-        h4.truncated,
-        h3.truncated {
-          color: ${whiteColor};
-        }
-
-        #item-mediatype svg {
-          filter: invert(100%);
-          height: 2.5rem;
-          align-items: baseline;
-        }
-
-        .container:hover > #title {
-          text-decoration: underline;
-        }
-
-        /* this is a workaround for Safari 15 where the hover effects are not working */
-        image-block:hover > #title {
-          text-decoration: underline;
-        }
-
-        #item-stats {
-          display: flex;
-          padding: 0 5px 5px;
-          align-items: center;
-        }
-
-        #stats-row {
-          display: flex;
-          align-items: baseline;
-          color: ${whiteColor};
-          flex-direction: column;
-          margin-left: 10px;
-        }
+            css `
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h4.truncated,
+        h3.truncated {
+          color: ${whiteColor};
+        }
+
+        #item-mediatype svg {
+          filter: invert(100%);
+          height: 2.5rem;
+          align-items: baseline;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+
+        #item-stats {
+          display: flex;
+          padding: 0 5px 5px;
+          align-items: center;
+        }
+
+        #stats-row {
+          display: flex;
+          align-items: baseline;
+          color: ${whiteColor};
+          flex-direction: column;
+          margin-left: 10px;
+        }
       `,
         ];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\r\nimport { formatUnitSize } from '../../utils/format-unit-size';\r\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\nimport '../image-block';\r\n\r\n@customElement('collection-tile')\r\nexport class CollectionTile extends BaseTileComponent {\r\n  /*\r\n   * Reactive properties inherited from BaseTileComponent:\r\n   *  - model?: TileModel;\r\n   *  - currentWidth?: number;\r\n   *  - currentHeight?: number;\r\n   *  - baseNavigationUrl?: string;\r\n   *  - baseImageUrl?: string;\r\n   *  - collectionPagePath?: string;\r\n   *  - sortParam: SortParam | null = null;\r\n   *  - creatorFilter?: string;\r\n   *  - mobileBreakpoint?: number;\r\n   *  - loggedIn = false;\r\n   *  - suppressBlurring = false;\r\n   *  - useLocalTime = false;\r\n   */\r\n\r\n  @property({ type: Boolean }) showInfoButton = false;\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\">\r\n        ${this.infoButtonTemplate}\r\n        <div class=\"tile-details\">\r\n          <div class=\"item-info\">\r\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\r\n          </div>\r\n        </div>\r\n\r\n        ${this.getTileStatsTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get getImageBlockTemplate(): TemplateResult {\r\n    return html`\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .viewSize=${'grid'}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n      >\r\n      </image-block>\r\n    `;\r\n  }\r\n\r\n  private get getTitleTemplate() {\r\n    return html`<div id=\"title\">\r\n      <h3 class=\"truncated\">${this.model?.title}</h3>\r\n    </div>`;\r\n  }\r\n\r\n  private get getTileStatsTemplate() {\r\n    return html`\r\n      <div id=\"item-stats\">\r\n        <div id=\"item-mediatype\">${collectionIcon}</div>\r\n\r\n        <div id=\"stats-row\">\r\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get getItemsTemplate() {\r\n    const collectionItems = this.model?.itemCount?.toLocaleString();\r\n\r\n    return html`<span id=\"item-count\"\r\n      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\r\n    >`;\r\n  }\r\n\r\n  private get getSizeTemplate() {\r\n    const collectionSize = this.model?.collectionSize ?? 0;\r\n\r\n    return collectionSize\r\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\r\n      : ``;\r\n  }\r\n\r\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\r\n    // &#9432; is an information icon\r\n    return this.showInfoButton\r\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\r\n          &#9432;\r\n          <span class=\"sr-only\">${msg('More info')}</span>\r\n        </button>`\r\n      : nothing;\r\n  }\r\n\r\n  private infoButtonPressed(e: PointerEvent) {\r\n    e.preventDefault();\r\n    const event = new CustomEvent<{ x: number; y: number }>(\r\n      'infoButtonPressed',\r\n      { detail: { x: e.clientX, y: e.clientY } },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const tileBorderColor = css`var(--tileBorderColor, #555555)`;\r\n    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\r\n    const whiteColor = css`#fff`;\r\n\r\n    return [\r\n      baseTileStyles,\r\n      css`\r\n        .container {\r\n          background-color: ${tileBackgroundColor};\r\n          border: 1px solid ${tileBorderColor};\r\n        }\r\n\r\n        .item-info {\r\n          flex-grow: initial;\r\n        }\r\n\r\n        h4.truncated,\r\n        h3.truncated {\r\n          color: ${whiteColor};\r\n        }\r\n\r\n        #item-mediatype svg {\r\n          filter: invert(100%);\r\n          height: 2.5rem;\r\n          align-items: baseline;\r\n        }\r\n\r\n        .container:hover > #title {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        /* this is a workaround for Safari 15 where the hover effects are not working */\r\n        image-block:hover > #title {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        #item-stats {\r\n          display: flex;\r\n          padding: 0 5px 5px;\r\n          align-items: center;\r\n        }\r\n\r\n        #stats-row {\r\n          display: flex;\r\n          align-items: baseline;\r\n          color: ${whiteColor};\r\n          flex-direction: column;\r\n          margin-left: 10px;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { formatUnitSize } from '../../utils/format-unit-size';\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport { BaseTileComponent } from '../base-tile-component';\nimport '../image-block';\n\n@customElement('collection-tile')\nexport class CollectionTile 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   *  - suppressBlurring = false;\n   *  - useLocalTime = false;\n   */\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getImageBlockTemplate} ${this.getTitleTemplate}\n          </div>\n        </div>\n\n        ${this.getTileStatsTemplate}\n      </div>\n    `;\n  }\n\n  private get getImageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n        .suppressBlurring=${this.suppressBlurring}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h3 class=\"truncated\">${this.model?.title}</h3>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`\n      <div id=\"item-stats\">\n        <div id=\"item-mediatype\">${collectionIcon}</div>\n\n        <div id=\"stats-row\">\n          ${this.getItemsTemplate} ${this.getSizeTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getItemsTemplate() {\n    const collectionItems = this.model?.itemCount?.toLocaleString();\n\n    return html`<span id=\"item-count\"\n      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span\n    >`;\n  }\n\n  private get getSizeTemplate() {\n    const collectionSize = this.model?.collectionSize ?? 0;\n\n    return collectionSize\n      ? html`<span id=\"item-size\">${formatUnitSize(collectionSize, 1)}</span>`\n      : ``;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">${msg('More info')}</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } },\n    );\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #555555)`;\n    const tileBackgroundColor = css`var(--tileBackgroundColor, #666666)`;\n    const whiteColor = css`#fff`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          background-color: ${tileBackgroundColor};\n          border: 1px solid ${tileBorderColor};\n        }\n\n        .item-info {\n          flex-grow: initial;\n        }\n\n        h4.truncated,\n        h3.truncated {\n          color: ${whiteColor};\n        }\n\n        #item-mediatype svg {\n          filter: invert(100%);\n          height: 2.5rem;\n          align-items: baseline;\n        }\n\n        .container:hover > #title {\n          text-decoration: underline;\n        }\n\n        /* this is a workaround for Safari 15 where the hover effects are not working */\n        image-block:hover > #title {\n          text-decoration: underline;\n        }\n\n        #item-stats {\n          display: flex;\n          padding: 0 5px 5px;\n          align-items: center;\n        }\n\n        #stats-row {\n          display: flex;\n          align-items: baseline;\n          color: ${whiteColor};\n          flex-direction: column;\n          margin-left: 10px;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -38,38 +38,37 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         this.simpleLayoutType = 'none';
     }
     render() {
-        var _a;
-        const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
+        const itemTitle = this.model?.title;
         const containerClasses = classMap({
             container: true,
             simple: this.simpleLayoutType !== 'none',
             'stats-only': this.simpleLayoutType === 'stats-only',
             'snippets-only': this.simpleLayoutType === 'snippets-only',
         });
-        return html `
-      <div class=${containerClasses}>
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.imageBlockTemplate}
-
-            <div id="title">
-              <h3 class="truncated" title=${ifDefined(itemTitle)}>
-                ${itemTitle}
-              </h3>
-            </div>
-
-            ${this.volumeIssueTemplate}
+        return html `
+      <div class=${containerClasses}>
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.imageBlockTemplate}
+
+            <div id="title">
+              <h3 class="truncated" title=${ifDefined(itemTitle)}>
+                ${itemTitle}
+              </h3>
+            </div>
+
+            ${this.volumeIssueTemplate}
             ${this.isSortedByDate
             ? this.sortedDateInfoTemplate
-            : this.creatorTemplate}
-            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
-            ${this.reviewBlockTemplate}
-          </div>
-
-          ${this.tileStatsTemplate}
-        </div>
-      </div>
+            : this.creatorTemplate}
+            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
+            ${this.reviewBlockTemplate}
+          </div>
+
+          ${this.tileStatsTemplate}
+        </div>
+      </div>
     `;
     }
     /**
@@ -79,35 +78,34 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         const displayedCreator = this.displayValueProvider.firstCreatorMatchingFilter;
         if (!displayedCreator)
             return nothing;
-        return html `
-      <div class="created-by">
-        <span class="truncated" title=${displayedCreator}>
-          by&nbsp;${displayedCreator}
-        </span>
-      </div>
+        return html `
+      <div class="created-by">
+        <span class="truncated" title=${displayedCreator}>
+          by&nbsp;${displayedCreator}
+        </span>
+      </div>
     `;
     }
     get imageBlockTemplate() {
-        return html `
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
-        .isCompactTile=${false}
-        .isListTile=${false}
-        .viewSize=${'grid'}
-      >
-      </image-block>
+        return html `
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .loggedIn=${this.loggedIn}
+        .suppressBlurring=${this.suppressBlurring}
+        .isCompactTile=${false}
+        .isListTile=${false}
+        .viewSize=${'grid'}
+      >
+      </image-block>
     `;
     }
     get sortedDateInfoTemplate() {
-        var _a, _b, _c, _d, _e;
         let sortedValue;
         let format = 'long';
-        switch ((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field) {
+        switch (this.effectiveSort?.field) {
             case 'date': {
-                const datePublished = (_b = this.model) === null || _b === void 0 ? void 0 : _b.datePublished;
+                const datePublished = this.model?.datePublished;
                 sortedValue = { field: 'published', value: datePublished };
                 if (isFirstMillisecondOfUTCYear(datePublished)) {
                     format = 'year-only';
@@ -115,123 +113,115 @@ let ItemTile = class ItemTile extends BaseTileComponent {
                 break;
             }
             case 'reviewdate':
-                sortedValue = { field: 'reviewed', value: (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateReviewed };
+                sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };
                 break;
             case 'addeddate':
-                sortedValue = { field: 'added', value: (_d = this.model) === null || _d === void 0 ? void 0 : _d.dateAdded };
+                sortedValue = { field: 'added', value: this.model?.dateAdded };
                 break;
             case 'publicdate':
-                sortedValue = { field: 'archived', value: (_e = this.model) === null || _e === void 0 ? void 0 : _e.dateArchived };
+                sortedValue = { field: 'archived', value: this.model?.dateArchived };
                 break;
             default:
                 break;
         }
-        if (!(sortedValue === null || sortedValue === void 0 ? void 0 : sortedValue.value)) {
+        if (!sortedValue?.value) {
             return nothing;
         }
         const formattedDate = this.getFormattedDate(sortedValue.value, format);
-        return html `
-      <div class="date-sorted-by truncated">
-        <span>${sortedValue.field} ${formattedDate}</span>
-      </div>
+        return html `
+      <div class="date-sorted-by truncated">
+        <span>${sortedValue.field} ${formattedDate}</span>
+      </div>
     `;
     }
     get infoButtonTemplate() {
         // &#9432; is an information icon
         return this.showInfoButton
-            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
+            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
         </button>`
             : nothing;
     }
     get reviewBlockTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.review))
+        if (!this.model?.review)
             return nothing;
         const { reviewtitle, reviewbody, stars } = this.model.review;
-        return html `
-      <review-block
-        viewsize="grid"
-        title=${ifDefined(reviewtitle)}
-        body=${ifDefined(reviewbody)}
-        starRating=${ifDefined(stars)}
-      >
-      </review-block>
+        return html `
+      <review-block
+        viewsize="grid"
+        title=${ifDefined(reviewtitle)}
+        body=${ifDefined(reviewbody)}
+        starRating=${ifDefined(stars)}
+      >
+      </review-block>
     `;
     }
     get textSnippetsTemplate() {
-        var _a;
         if (!this.hasSnippets || this.simpleLayoutType === 'stats-only')
             return nothing;
-        return html `
-      <text-snippet-block viewsize="grid" .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}>
-      </text-snippet-block>
+        return html `
+      <text-snippet-block viewsize="grid" .snippets=${this.model?.snippets}>
+      </text-snippet-block>
     `;
     }
     get volumeIssueTemplate() {
-        var _a, _b, _c, _d;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.volume) || !((_b = this.model) === null || _b === void 0 ? void 0 : _b.issue))
+        if (!this.model?.volume || !this.model?.issue)
             return nothing;
-        return html `
-      <div class="volume-issue">
-        <span class="truncated" title="volume|issue">
-          Volume&nbsp;${(_c = this.model) === null || _c === void 0 ? void 0 : _c.volume}, Issue&nbsp;${(_d = this.model) === null || _d === void 0 ? void 0 : _d.issue}
-        </span>
-      </div>
+        return html `
+      <div class="volume-issue">
+        <span class="truncated" title="volume|issue">
+          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}
+        </span>
+      </div>
     `;
     }
     get webArchivesCaptureDatesTemplate() {
-        var _a;
-        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.captureDates) || !this.model.title)
+        if (!this.model?.captureDates || !this.model.title)
             return nothing;
-        return html `
-      <ul class="capture-dates">
-        ${map(this.model.captureDates, date => html `<li>
-              ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
-            </li>`)}
-      </ul>
+        return html `
+      <ul class="capture-dates">
+        ${map(this.model.captureDates, date => html `<li>
+              ${this.displayValueProvider.webArchivesCaptureLink(this.model.title, date)}
+            </li>`)}
+      </ul>
     `;
     }
     /**
      * Template for the stats row along the bottom of the tile.
      */
     get tileStatsTemplate() {
-        var _a, _b, _c, _d, _e, _f, _g;
         if (this.simpleLayoutType === 'snippets-only')
             return nothing;
-        const effectiveSort = (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
-        const [viewCount, viewLabel] = (effectiveSort === null || effectiveSort === void 0 ? void 0 : effectiveSort.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 html `
-      <tile-stats
-        .model=${this.model}
-        .mediatype=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}
-        .viewCount=${viewCount}
-        .viewLabel=${viewLabel}
-        .favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
-        .commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}
-        .tvClipCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.tvClipCount}
-        .showTvClips=${this.showTvClips}
-      >
-      </tile-stats>
+        const effectiveSort = this.sortParam ?? this.defaultSortParam;
+        const [viewCount, viewLabel] = effectiveSort?.field === 'week'
+            ? [this.model?.weeklyViewCount, 'weekly views']
+            : [this.model?.viewCount, 'all-time views'];
+        return html `
+      <tile-stats
+        .model=${this.model}
+        .mediatype=${this.model?.mediatype}
+        .viewCount=${viewCount}
+        .viewLabel=${viewLabel}
+        .favCount=${this.model?.favCount}
+        .commentCount=${this.model?.commentCount}
+        .tvClipCount=${this.model?.tvClipCount}
+        .showTvClips=${this.showTvClips}
+      >
+      </tile-stats>
     `;
     }
     get isSortedByDate() {
-        var _a;
-        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes((_a = this.effectiveSort) === null || _a === void 0 ? void 0 : _a.field);
+        return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(this.effectiveSort?.field);
     }
     /**
      * Returns the active sort param if one is set, or the default sort param otherwise.
      */
     get effectiveSort() {
-        var _a;
-        return (_a = this.sortParam) !== null && _a !== void 0 ? _a : this.defaultSortParam;
+        return this.sortParam ?? this.defaultSortParam;
     }
     get hasSnippets() {
-        var _a, _b;
-        return !!((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets) === null || _b === void 0 ? void 0 : _b.length);
+        return !!this.model?.snippets?.length;
     }
     infoButtonPressed(e) {
         e.preventDefault();
@@ -245,62 +235,62 @@ let ItemTile = class ItemTile extends BaseTileComponent {
         const tileBorderColor = css `var(--tileBorderColor, #dddddd)`;
         return [
             baseTileStyles,
-            css `
-        a:link {
-          text-decoration: none;
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-        a:hover {
-          text-decoration: underline;
-        }
-
-        .container {
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .simple #title > .truncated {
-          -webkit-line-clamp: 2;
-        }
-
-        .simple .created-by > .truncated,
-        .simple .date-sorted-by > .truncated,
-        .simple .volume-issue > .truncated {
-          -webkit-line-clamp: 1;
-        }
-
-        .simple.snippets-only .item-info {
-          padding-bottom: 5px;
-        }
-
-        .simple.snippets-only text-snippet-block {
-          margin-top: auto; /* Force the snippets to the bottom of the tile */
-        }
-
-        .capture-dates {
-          margin: 0;
-          padding: 0 5px;
-          list-style-type: none;
-        }
-
-        review-block,
-        text-snippet-block {
-          --containerLeftMargin: 5px;
-          --containerTopMargin: 5px;
-        }
-
-        /**
-         * iOS Safari long-press on tiles (to bring up hover pane)
-         * gets messy without this
-         */
-        @media screen and (pointer: coarse) and (hover: none) {
-          .container {
-            -webkit-touch-callout: none;
-          }
-
-          .truncated {
-            -webkit-touch-callout: default;
-          }
-        }
+            css `
+        a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+
+        .container {
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .simple #title > .truncated {
+          -webkit-line-clamp: 2;
+        }
+
+        .simple .created-by > .truncated,
+        .simple .date-sorted-by > .truncated,
+        .simple .volume-issue > .truncated {
+          -webkit-line-clamp: 1;
+        }
+
+        .simple.snippets-only .item-info {
+          padding-bottom: 5px;
+        }
+
+        .simple.snippets-only text-snippet-block {
+          margin-top: auto; /* Force the snippets to the bottom of the tile */
+        }
+
+        .capture-dates {
+          margin: 0;
+          padding: 0 5px;
+          list-style-type: none;
+        }
+
+        review-block,
+        text-snippet-block {
+          --containerLeftMargin: 5px;
+          --containerTopMargin: 5px;
+        }
+
+        /**
+         * iOS Safari long-press on tiles (to bring up hover pane)
+         * gets messy without this
+         */
+        @media screen and (pointer: coarse) and (hover: none) {
+          .container {
+            -webkit-touch-callout: none;
+          }
+
+          .truncated {
+            -webkit-touch-callout: default;
+          }
+        }
       `,
         ];
     }