@internetarchive/collection-browser 0.2.17-alpha.0 → 0.2.20-alpha.0

package/dist/src/tiles/grid/item-tile.d.ts

@@ -1,7 +1,8 @@
-import { CSSResultGroup, LitElement } from 'lit';
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
 import type { SortParam } from '@internetarchive/search-service';
 import type { TileModel } from '../../models';
 import '../image-block';
+import '../text-snippet-block';
 import '../item-image';
 import '../mediatype-icon';
 import './tile-stats';
@@ -10,12 +11,14 @@ export declare class ItemTile extends LitElement {
     loggedIn: boolean;
     model?: TileModel;
     sortParam?: SortParam;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     /**
      * Templates
      */
     private get doesSortedByDate();
     private get sortedDateInfoTemplate();
     private get creatorTemplate();
+    private get textSnippetsTemplate();
+    private get hasSnippets();
     static get styles(): CSSResultGroup;
 }

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

@@ -1,10 +1,11 @@
 import { __decorate } from "tslib";
 /* eslint-disable import/no-duplicates */
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { formatDate } from '../../utils/format-date';
 import '../image-block';
+import '../text-snippet-block';
 import '../item-image';
 import '../mediatype-icon';
 import './tile-stats';
@@ -26,6 +27,7 @@ let ItemTile = class ItemTile extends LitElement {
           </div>
 
           <image-block 
+            class=${this.hasSnippets ? 'has-snippets' : nothing}
             .model=${this.model}
             .baseImageUrl=${this.baseImageUrl}
             .loggedIn=${this.loggedIn}
@@ -34,6 +36,8 @@ let ItemTile = class ItemTile extends LitElement {
             .viewSize=${'grid'}>
           </image-block>
 
+          ${this.textSnippetsTemplate}
+
           ${this.doesSortedByDate
             ? this.sortedDateInfoTemplate
             : this.creatorTemplate}
@@ -93,6 +97,19 @@ let ItemTile = class ItemTile extends LitElement {
       </div>
     `;
     }
+    get textSnippetsTemplate() {
+        var _a;
+        if (!this.hasSnippets)
+            return nothing;
+        return html `<text-snippet-block
+      viewsize="grid"
+      .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}
+    ></text-snippet-block>`;
+    }
+    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);
+    }
     static get styles() {
         return css `
       .container {
@@ -126,6 +143,16 @@ let ItemTile = class ItemTile extends LitElement {
         text-decoration: underline;
       }
 
+      image-block {
+        display: block;
+        margin-bottom: 5px;
+      }
+
+      image-block.has-snippets {
+        /* If there is a text snippet block present, the image block needs to shrink */
+        --imgBlockHeight: 11rem;
+      }
+
       .created-by,
       .date-sorted-by {
         display: flex;
@@ -133,7 +160,6 @@ let ItemTile = class ItemTile extends LitElement {
         align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
         padding-top: 1rem;
-        margin-top: 5px;
       }
 
       .truncated {

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .item-info > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      .created-by,\n      .date-sorted-by {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n        margin-top: 5px;\n      }\n\n      .truncated {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { formatDate } from '../../utils/format-date';\nimport type { TileModel } from '../../models';\n\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    const itemTitle = this.model?.title;\n\n    return html`\n      <div class=\"container\">\n        <div class=\"item-info\">\n          <div id=\"title\">\n            <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n              ${itemTitle}\n            </h1>\n          </div>\n\n          <image-block \n            class=${this.hasSnippets ? 'has-snippets' : nothing}\n            .model=${this.model}\n            .baseImageUrl=${this.baseImageUrl}\n            .loggedIn=${this.loggedIn}\n            .isCompactTile=${false}\n            .isListTile=${false}\n            .viewSize=${'grid'}>\n          </image-block>\n\n          ${this.textSnippetsTemplate}\n\n          ${\n            this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate\n          }\n        </div>\n\n        <tile-stats \n          .mediatype=${this.model?.mediatype}\n          .viewCount=${this.model?.viewCount}\n          .favCount=${this.model?.favCount}\n          .commentCount=${this.model?.commentCount}>\n        </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n\n    switch (this.sortParam?.field) {\n      case 'date':\n        sortedValue = { field: 'published', value: this.model?.datePublished };\n        break;\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}\n        </span>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    return html`\n      <div class=\"created-by truncated\">\n        ${this.model?.creator\n          ? html`<span>by&nbsp;${this.model?.creator}</span>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"grid\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        background-color: #ffffff;\n        border-radius: var(--collectionTileCornerRadius, 4px);\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .item-info {\n        padding: 5px 5px 0 5px;\n        flex-grow: 1;\n      }\n\n      #title {\n        flex-shrink: 0;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      .container:hover > .item-info > #title > .truncated {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title:hover > .truncated {\n        text-decoration: underline;\n      }\n\n      image-block {\n        display: block;\n        margin-bottom: 5px;\n      }\n\n      image-block.has-snippets {\n        /* If there is a text snippet block present, the image block needs to shrink */\n        --imgBlockHeight: 11rem;\n      }\n\n      .created-by,\n      .date-sorted-by {\n        display: flex;\n        justify-content: center;\n        align-items: flex-end; /* Important to start text from bottom */\n        height: 3rem;\n        padding-top: 1rem;\n      }\n\n      .truncated {\n        flex: 1;\n        color: #2c2c2c;\n        min-width: 0; /* Important for long words! */\n        text-align: center;\n        line-height: 2rem;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        word-wrap: break-word;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .truncated span {\n        font-size: 1.4rem;\n        display: -webkit-box;\n      }\n\n      h1.truncated {\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        font-size: 1.6rem;\n        height: 4rem;\n        display: -webkit-box;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/image-block.js

@@ -79,7 +79,7 @@ let ImageBlock = class ImageBlock extends LitElement {
       }
 
       .grid {
-        height: 16rem;
+        height: var(--imgBlockHeight, 16rem);
         flex: 1;
       }
 

package/dist/src/tiles/image-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) {\n      return nothing;\n    }\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: 16rem;\n        flex: 1;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"image-block.js","sourceRoot":"","sources":["../../../src/tiles/image-block.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport type { TileModel } from '../models';\n\nimport './overlay/icon-overlay';\nimport './overlay/text-overlay';\n\n@customElement('image-block')\nexport class ImageBlock extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) isCompactTile = false;\n\n  @property({ type: Boolean }) isListTile = false;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html`\n      <div class=${classMap(this.baseClass)}>\n        <item-image\n          .model=${this.model}\n          .baseImageUrl=${this.baseImageUrl}\n          .isListTile=${this.isListTile}\n          .isCompactTile=${this.isCompactTile}\n          .loggedIn=${this.loggedIn}\n          style=\"--imgHeight: 100%; --imgWidth: 100%\"\n        >\n        </item-image>\n        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}\n      </div>\n    `;\n  }\n\n  private get baseClass(): ClassInfo {\n    return {\n      list: this.isListTile && !this.isCompactTile,\n      'list-compact': this.isListTile && this.isCompactTile,\n      [this.viewSize]: true,\n    };\n  }\n\n  private get iconOverlayTemplate() {\n    if (!this.isListTile) return nothing;\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <icon-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </icon-overlay>\n    `;\n  }\n\n  private get textOverlayTemplate() {\n    if (this.isListTile) {\n      return nothing;\n    }\n\n    if (!this.model?.loginRequired && !this.model?.contentWarning) {\n      return nothing;\n    }\n    return html`\n      <text-overlay\n        .loggedIn=${this.loggedIn}\n        .loginRequired=${this.model?.loginRequired}\n      >\n      </text-overlay>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      div {\n        display: flex;\n        justify-content: center;\n        position: relative;\n      }\n\n      .grid {\n        height: var(--imgBlockHeight, 16rem);\n        flex: 1;\n      }\n\n      /** tile-list view */\n      .list.desktop {\n        width: 100px;\n        height: 100px;\n      }\n\n      .list.mobile {\n        width: 90px;\n        height: 90px;\n      }\n\n      /** tile-list-compact view */\n      .list-compact {\n        display: block;\n      }\n\n      .list-compact.desktop {\n        width: 45px;\n        height: 45px;\n      }\n\n      .list-compact.mobile {\n        width: 30px;\n        height: 30px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -37,6 +37,8 @@ export declare class TileList extends LitElement {
     private get topicsTemplate();
     private get collectionsTemplate();
     private get descriptionTemplate();
+    private get textSnippetsTemplate();
+    private get hasSnippets();
     private metadataTemplate;
     private labelTemplate;
     private searchLink;

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

@@ -100,7 +100,7 @@ let TileList = class TileList extends LitElement {
         ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
       </div>
       ${this.topicsTemplate} ${this.collectionsTemplate}
-      ${this.descriptionTemplate}
+      ${this.descriptionTemplate} ${this.textSnippetsTemplate}
     `;
     }
     // Data templates
@@ -227,6 +227,19 @@ let TileList = class TileList extends LitElement {
         var _a, _b;
         return this.metadataTemplate(DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : ''), '', 'description');
     }
+    get textSnippetsTemplate() {
+        var _a;
+        if (!this.hasSnippets)
+            return nothing;
+        return html `<text-snippet-block
+      viewsize="list"
+      .snippets=${(_a = this.model) === null || _a === void 0 ? void 0 : _a.snippets}
+    ></text-snippet-block>`;
+    }
+    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);
+    }
     // Utility functions
     metadataTemplate(text, label = '', id) {
         if (!text)

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,SAAS,MAAM,WAAW,CAAC;AAMlC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,UAAU,EAAc,MAAM,yBAAyB,CAAC;AAEjE,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAG3B,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAY8B,cAAS,GAAqB,IAAI,CAAC;QAI9C,oBAAe,GAAqB,EAAE,CAAC;QAI3B,aAAQ,GAAG,KAAK,CAAC;IA+bhD,CAAC;IA7bW,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAEO,KAAK,CAAC,oBAAoB;;QAChC,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,CAAA;YACxB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC;YACnC,CAAC,IAAI,CAAC,mBAAmB,EACzB;YACA,OAAO;SACR;QACD,6DAA6D;QAC7D,iEAAiE;QACjE,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;QAC1B,MAAM,qBAAqB,GAAqB,EAAE,CAAC;QACnD,MAAM,QAAQ,GAAoB,EAAE,CAAC;QACrC,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC/C,QAAQ,CAAC,IAAI,CACX,MAAA,IAAI,CAAC,mBAAmB,0CAAE,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;gBAClE,qBAAqB,CAAC,IAAI,CACxB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC,CACjD,CAAC;YACJ,CAAC,CAAC,CACH,CAAC;SACH;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,qBAAqB,CAAC;IAC/C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,SAAS;UACvC,IAAI,CAAC,SAAS,KAAK,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAC,cAAc;YACrB,CAAC,CAAC,IAAI,CAAC,eAAe;;KAE3B,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,kBAAkB;;;8BAG5B,IAAI,CAAC,aAAa;cAClC,IAAI,CAAC,iBAAiB;;;;mCAID,IAAI,CAAC,eAAe;KAClD,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,kBAAkB;;;4BAG5B,IAAI,CAAC,aAAa;YAClC,IAAI,CAAC,iBAAiB;;UAExB,IAAI,CAAC,eAAe;;KAEzB,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;yBAChB,KAAK;sBACR,IAAI;oBACN,IAAI,CAAC,SAAS;;;KAG7B,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,eAAe;;UAE3C,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,kBAAkB;;;UAGrD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe;;QAEnE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,mBAAmB;QAC/C,IAAI,CAAC,mBAAmB;KAC3B,CAAC;IACJ,CAAC;IAED,iBAAiB;IACjB,IAAY,iBAAiB;;QAC3B,OAAO,IAAI,CAAA;;;uBAGQ,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;yBACnB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;KAI3C,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;;QACvB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAA,EAAE;YACtB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;IAC9E,CAAC;IAED,IAAY,gBAAgB;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QACjC,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE;YAChC,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA,wBAAwB,MAAM,IAAI,MAAM,IAAI,KAAK,SAAS,CAAC;IACxE,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,CAAA,EAAE;YACvB,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;UAC5B,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;KAEjD,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAED,IAAY,aAAa;;QACvB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,IAAY,eAAe;;QACzB,8BAA8B;QAC9B,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,MAAK,SAAS,EAAE;YACvC,OAAO,IAAI,CAAA;;iCAEgB,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;;OAE7D,CAAC;SACH;QACD,gCAAgC;QAChC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;UACxB,IAAI,CACJ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAC9D,IAAI,CAAA,IAAI,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAY,qBAAqB;;QAC/B,OAAO,IAAI,CAAC,gBAAgB,CAC1B,UAAU,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,EAAE,MAAM,CAAC,EAC7C,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,iDAAiD;IACjD,6CAA6C;IAC7C,IAAY,kBAAkB;QAC5B,IACE,IAAI,CAAC,SAAS;YACd,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,WAAW;gBACnC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,YAAY;gBACrC,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,YAAY,CAAC,EACxC;YACA,OAAO,IAAI,CAAC,gBAAgB,CAC1B,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,EAC7B,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAChC,CAAC;SACH;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAY,aAAa;;QACvB,OAAO,IAAI,CAAC,gBAAgB,CAC1B,GAAG,WAAW,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,mCAAI,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAC7D,OAAO,CACR,CAAC;IACJ,CAAC;IAED,IAAY,cAAc;;QACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,EAAE,YAAY,CAAC,CAAC;IACxE,CAAC;IAED,IAAY,eAAe;;QACzB,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IACpE,CAAC;IAED,IAAY,cAAc;;QACxB,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,CAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;UAC5B,IAAI,CACJ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAC9D,IAAI,CAAA,IAAI,CACT;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9D,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;UACjC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAA,IAAI,CAAC;;KAEzC,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;;QAC7B,OAAO,IAAI,CAAC,gBAAgB,CAC1B,SAAS,CAAC,QAAQ,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,mCAAI,EAAE,CAAC,EACjD,EAAE,EACF,aAAa,CACd,CAAC;IACJ,CAAC;IAED,oBAAoB;IACZ,gBAAgB,CAAC,IAAS,EAAE,KAAK,GAAG,EAAE,EAAE,EAAW;QACzD,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC1B,OAAO,IAAI,CAAA;gBACC,SAAS,CAAC,EAAE,CAAC;UACnB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,IAAI;;KAEtC,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO,IAAI,CAAA,IAAI,KAAK;YAClB,CAAC,CAAC,IAAI,CAAA,uBAAuB,KAAK,WAAW;YAC7C,CAAC,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAEO,UAAU,CAAC,KAAa,EAAE,UAAkB;QAClD,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,EAAE;YACzB,OAAO,OAAO,CAAC;SAChB;QACD,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,KAAK,KAAK,UAAU,GAAG,CAAC,CAAC;QAC7D,kCAAkC;QAClC,qFAAqF;QAErF,+CAA+C;QAC/C,OAAO,IAAI,CAAA,YAAY,IAAI,CAAC,iBAAiB,qBAAqB,KAAK;QACnE,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;MAChC,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,UAAkB,EAAE,IAAa;QACnD,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,UAAU,CAAC;QACpC,kCAAkC;QAClC,+FAA+F;QAC/F,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,iBAAiB,YAAY,SAAS,CAAC,UAAU,CAAC;SAC5D,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAC/B,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IAAY,IAAI;;QACd,QAAQ,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE;YAC7B,KAAK,MAAM;gBACT,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,CAAC;YACnC,KAAK,YAAY;gBACf,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC;YAClC,KAAK,WAAW;gBACd,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC;YAC/B;gBACE,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY,CAAC,CAAC,aAAa;SACjD;IACH,CAAC;IAED,IAAY,SAAS;QACnB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,IAAY,UAAU;QACpB,IACE,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,EACzC;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqHT,CAAC;IACJ,CAAC;CACF,CAAA;AAld6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAGvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAwB;AAEvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoC;AAEnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA2B;AAE7C;IAAR,KAAK,EAAE;iDAAgD;AAE5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AApBnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmdpB;SAndY,QAAQ","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @state() private collectionLinks: TemplateResult[] = [];\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.fetchCollectionNames();\n    }\n  }\n\n  private async fetchCollectionNames() {\n    if (\n      !this.model?.collections ||\n      this.model.collections.length === 0 ||\n      !this.collectionNameCache\n    ) {\n      return;\n    }\n    // Note: quirk of Lit: need to replace collectionLinks array,\n    // otherwise it will not re-render. Can't simply alter the array.\n    this.collectionLinks = [];\n    const newCollellectionLinks: TemplateResult[] = [];\n    const promises: Promise<void>[] = [];\n    for (const collection of this.model.collections) {\n      promises.push(\n        this.collectionNameCache?.collectionNameFor(collection).then(name => {\n          newCollellectionLinks.push(\n            this.detailsLink(collection, name ?? collection)\n          );\n        })\n      );\n    }\n    await Promise.all(promises);\n    this.collectionLinks = newCollellectionLinks;\n  }\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        ${this.classSize === 'mobile'\n          ? this.mobileTemplate\n          : this.desktopTemplate}\n      </div>\n    `;\n  }\n\n  private get mobileTemplate() {\n    return html`\n      <div id=\"list-line-top\">\n        <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n        <div id=\"list-line-right\">\n          <div id=\"title-line\">\n            <div id=\"title\">${this.titleTemplate}</div>\n            ${this.iconRightTemplate}\n          </div>\n        </div>\n      </div>\n      <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n    `;\n  }\n\n  private get desktopTemplate() {\n    return html`\n      <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n      <div id=\"list-line-right\">\n        <div id=\"title-line\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.iconRightTemplate}\n        </div>\n        ${this.detailsTemplate}\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate() {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isCompactTile=${false}\n        .isListTile=${true}\n        .viewSize=${this.classSize}\n      >\n      </image-block>\n    `;\n  }\n\n  private get detailsTemplate() {\n    return html`\n      ${this.itemLineTemplate} ${this.creatorTemplate}\n      <div id=\"dates-line\">\n        ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n      </div>\n      <div id=\"views-line\">\n        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n      </div>\n      ${this.topicsTemplate} ${this.collectionsTemplate}\n      ${this.descriptionTemplate}\n    `;\n  }\n\n  // Data templates\n  private get iconRightTemplate() {\n    return html`\n      <div id=\"icon-right\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .collections=${this.model?.collections}\n        >\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    const volume = this.volumeTemplate;\n    const issue = this.issueTemplate;\n    if (!source && !volume && !issue) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\" class=\"metadata\">\n        ${this.labelTemplate('Source')}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, 'Volume');\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, 'Issue');\n  }\n\n  private get creatorTemplate() {\n    // \"Achivist since\" if account\n    if (this.model?.mediatype === 'account') {\n      return html`\n        <div id=\"creator\" class=\"metadata\">\n          <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n        </div>\n      `;\n    }\n    // \"Creator\" if not account tile\n    if (!this.model?.creators || this.model.creators.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\" class=\"metadata\">\n        ${this.labelTemplate('By')}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get datePublishedTemplate() {\n    return this.metadataTemplate(\n      formatDate(this.model?.datePublished, 'long'),\n      'Published'\n    );\n  }\n\n  // Show date label/value when sorted by date type\n  // Except datePublished which is always shown\n  private get dateSortByTemplate() {\n    if (\n      this.sortParam &&\n      (this.sortParam.field === 'addeddate' ||\n        this.sortParam.field === 'reviewdate' ||\n        this.sortParam.field === 'publicdate')\n    ) {\n      return this.metadataTemplate(\n        formatDate(this.date, 'long'),\n        dateLabel(this.sortParam.field)\n      );\n    }\n    return nothing;\n  }\n\n  private get viewsTemplate() {\n    return this.metadataTemplate(\n      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n      'Views'\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\" class=\"metadata\">\n        ${this.labelTemplate('Topics')}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.collectionLinks || this.collectionLinks.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate('Collections')}\n        ${join(this.collectionLinks, html`, `)}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      DOMPurify.sanitize(this.model?.description ?? ''),\n      '',\n      'description'\n    );\n  }\n\n  // Utility functions\n  private metadataTemplate(text: any, label = '', id?: string) {\n    if (!text) return nothing;\n    return html`\n      <div id=${ifDefined(id)} class=\"metadata\">\n        ${this.labelTemplate(label)} ${text}\n      </div>\n    `;\n  }\n\n  private labelTemplate(label: string) {\n    return html` ${label\n      ? html`<span class=\"label\">${label}: </span>`\n      : nothing}`;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // No whitespace after closing tag\n    // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n    // eslint-disable-next-line lit/no-invalid-html\n    return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n  }\n\n  private detailsLink(identifier: string, text?: string): TemplateResult {\n    const linkText = text ?? identifier;\n    // No whitespace after closing tag\n    // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n    return html`<a\n      href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n      >${DOMPurify.sanitize(linkText)}</a\n    >`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      div a {\n        text-decoration: none;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      #list-line.mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      #list-line.desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      /* fields */\n      #icon-right {\n        width: 20px;\n        padding-top: 5px;\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n        --iconTextAlign: right;\n        margin-top: -8px;\n        text-align: right;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        /* align top of text with image */\n        line-height: 25px;\n        margin-top: -4px;\n        padding-bottom: 2px;\n        flex-grow: 1;\n      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #description,\n      #creator,\n      #topics,\n      #source {\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      #description {\n        padding-top: 10px;\n      }\n\n      /* Top level container */\n      #list-line {\n        display: flex;\n      }\n\n      #list-line.mobile {\n        flex-direction: column;\n      }\n\n      #list-line.desktop {\n        column-gap: 10px;\n      }\n\n      #list-line-top {\n        display: flex;\n        column-gap: 7px;\n      }\n\n      #list-line-bottom {\n        padding-top: 4px;\n      }\n\n      #list-line-right,\n      #list-line-top,\n      #list-line-bottom {\n        width: 100%;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      /* Lines containing multiple div as row */\n      #item-line,\n      #dates-line,\n      #views-line,\n      #title-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport DOMPurify from 'dompurify';\n\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { SortParam } from '@internetarchive/search-service';\nimport type { TileModel } from '../../models';\n\nimport { dateLabel } from './date-label';\nimport { accountLabel } from './account-label';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\n\nimport '../image-block';\nimport '../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam: SortParam | null = null;\n\n  @property({ type: Number }) mobileBreakpoint?: number;\n\n  @state() private collectionLinks: TemplateResult[] = [];\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('model')) {\n      this.fetchCollectionNames();\n    }\n  }\n\n  private async fetchCollectionNames() {\n    if (\n      !this.model?.collections ||\n      this.model.collections.length === 0 ||\n      !this.collectionNameCache\n    ) {\n      return;\n    }\n    // Note: quirk of Lit: need to replace collectionLinks array,\n    // otherwise it will not re-render. Can't simply alter the array.\n    this.collectionLinks = [];\n    const newCollellectionLinks: TemplateResult[] = [];\n    const promises: Promise<void>[] = [];\n    for (const collection of this.model.collections) {\n      promises.push(\n        this.collectionNameCache?.collectionNameFor(collection).then(name => {\n          newCollellectionLinks.push(\n            this.detailsLink(collection, name ?? collection)\n          );\n        })\n      );\n    }\n    await Promise.all(promises);\n    this.collectionLinks = newCollellectionLinks;\n  }\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        ${this.classSize === 'mobile'\n          ? this.mobileTemplate\n          : this.desktopTemplate}\n      </div>\n    `;\n  }\n\n  private get mobileTemplate() {\n    return html`\n      <div id=\"list-line-top\">\n        <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n        <div id=\"list-line-right\">\n          <div id=\"title-line\">\n            <div id=\"title\">${this.titleTemplate}</div>\n            ${this.iconRightTemplate}\n          </div>\n        </div>\n      </div>\n      <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\n    `;\n  }\n\n  private get desktopTemplate() {\n    return html`\n      <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\n      <div id=\"list-line-right\">\n        <div id=\"title-line\">\n          <div id=\"title\">${this.titleTemplate}</div>\n          ${this.iconRightTemplate}\n        </div>\n        ${this.detailsTemplate}\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate() {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .isCompactTile=${false}\n        .isListTile=${true}\n        .viewSize=${this.classSize}\n      >\n      </image-block>\n    `;\n  }\n\n  private get detailsTemplate() {\n    return html`\n      ${this.itemLineTemplate} ${this.creatorTemplate}\n      <div id=\"dates-line\">\n        ${this.datePublishedTemplate} ${this.dateSortByTemplate}\n      </div>\n      <div id=\"views-line\">\n        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n      </div>\n      ${this.topicsTemplate} ${this.collectionsTemplate}\n      ${this.descriptionTemplate} ${this.textSnippetsTemplate}\n    `;\n  }\n\n  // Data templates\n  private get iconRightTemplate() {\n    return html`\n      <div id=\"icon-right\">\n        <mediatype-icon\n          .mediatype=${this.model?.mediatype}\n          .collections=${this.model?.collections}\n        >\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private get titleTemplate() {\n    if (!this.model?.title) {\n      return nothing;\n    }\n    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    const volume = this.volumeTemplate;\n    const issue = this.issueTemplate;\n    if (!source && !volume && !issue) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\" class=\"metadata\">\n        ${this.labelTemplate('Source')}\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private get volumeTemplate() {\n    return this.metadataTemplate(this.model?.volume, 'Volume');\n  }\n\n  private get issueTemplate() {\n    return this.metadataTemplate(this.model?.issue, 'Issue');\n  }\n\n  private get creatorTemplate() {\n    // \"Achivist since\" if account\n    if (this.model?.mediatype === 'account') {\n      return html`\n        <div id=\"creator\" class=\"metadata\">\n          <span class=\"label\"> ${accountLabel(this.model?.dateAdded)} </span>\n        </div>\n      `;\n    }\n    // \"Creator\" if not account tile\n    if (!this.model?.creators || this.model.creators.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\" class=\"metadata\">\n        ${this.labelTemplate('By')}\n        ${join(\n          map(this.model.creators, id => this.searchLink('creator', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get datePublishedTemplate() {\n    return this.metadataTemplate(\n      formatDate(this.model?.datePublished, 'long'),\n      'Published'\n    );\n  }\n\n  // Show date label/value when sorted by date type\n  // Except datePublished which is always shown\n  private get dateSortByTemplate() {\n    if (\n      this.sortParam &&\n      (this.sortParam.field === 'addeddate' ||\n        this.sortParam.field === 'reviewdate' ||\n        this.sortParam.field === 'publicdate')\n    ) {\n      return this.metadataTemplate(\n        formatDate(this.date, 'long'),\n        dateLabel(this.sortParam.field)\n      );\n    }\n    return nothing;\n  }\n\n  private get viewsTemplate() {\n    return this.metadataTemplate(\n      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,\n      'Views'\n    );\n  }\n\n  private get ratingTemplate() {\n    return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');\n  }\n\n  private get reviewsTemplate() {\n    return this.metadataTemplate(this.model?.commentCount, 'Reviews');\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\" class=\"metadata\">\n        ${this.labelTemplate('Topics')}\n        ${join(\n          map(this.model.subjects, id => this.searchLink('subject', id)),\n          html`, `\n        )}\n      </div>\n    `;\n  }\n\n  private get collectionsTemplate() {\n    if (!this.collectionLinks || this.collectionLinks.length === 0) {\n      return nothing;\n    }\n    return html`\n      <div id=\"collections\" class=\"metadata\">\n        ${this.labelTemplate('Collections')}\n        ${join(this.collectionLinks, html`, `)}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    return this.metadataTemplate(\n      DOMPurify.sanitize(this.model?.description ?? ''),\n      '',\n      'description'\n    );\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`<text-snippet-block\n      viewsize=\"list\"\n      .snippets=${this.model?.snippets}\n    ></text-snippet-block>`;\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  // Utility functions\n  private metadataTemplate(text: any, label = '', id?: string) {\n    if (!text) return nothing;\n    return html`\n      <div id=${ifDefined(id)} class=\"metadata\">\n        ${this.labelTemplate(label)} ${text}\n      </div>\n    `;\n  }\n\n  private labelTemplate(label: string) {\n    return html` ${label\n      ? html`<span class=\"label\">${label}: </span>`\n      : nothing}`;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // No whitespace after closing tag\n    // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\n\n    // eslint-disable-next-line lit/no-invalid-html\n    return html`<a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n      ${DOMPurify.sanitize(searchTerm)}</a\n    >`;\n  }\n\n  private detailsLink(identifier: string, text?: string): TemplateResult {\n    const linkText = text ?? identifier;\n    // No whitespace after closing tag\n    // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway\n    return html`<a\n      href=\"${this.baseNavigationUrl}/details/${encodeURI(identifier)}\"\n      >${DOMPurify.sanitize(linkText)}</a\n    >`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'mobile';\n    }\n    return 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    if (\n      this.mobileBreakpoint &&\n      this.currentWidth &&\n      this.currentWidth < this.mobileBreakpoint\n    ) {\n      return 'short';\n    }\n    return 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      div a {\n        text-decoration: none;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      #list-line.mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      #list-line.desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      /* fields */\n      #icon-right {\n        width: 20px;\n        padding-top: 5px;\n        --iconHeight: 20px;\n        --iconWidth: 20px;\n        --iconTextAlign: right;\n        margin-top: -8px;\n        text-align: right;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        /* align top of text with image */\n        line-height: 25px;\n        margin-top: -4px;\n        padding-bottom: 2px;\n        flex-grow: 1;\n      }\n\n      .metadata {\n        line-height: 20px;\n      }\n\n      #description,\n      #creator,\n      #topics,\n      #source {\n        text-align: left;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      #description {\n        padding-top: 10px;\n      }\n\n      /* Top level container */\n      #list-line {\n        display: flex;\n      }\n\n      #list-line.mobile {\n        flex-direction: column;\n      }\n\n      #list-line.desktop {\n        column-gap: 10px;\n      }\n\n      #list-line-top {\n        display: flex;\n        column-gap: 7px;\n      }\n\n      #list-line-bottom {\n        padding-top: 4px;\n      }\n\n      #list-line-right,\n      #list-line-top,\n      #list-line-bottom {\n        width: 100%;\n      }\n\n      div a:hover {\n        text-decoration: underline;\n      }\n\n      /* Lines containing multiple div as row */\n      #item-line,\n      #dates-line,\n      #views-line,\n      #title-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/text-snippet-block.d.ts

@@ -0,0 +1,29 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+export declare class TextSnippetBlock extends LitElement {
+    snippets?: string[];
+    viewSize: string;
+    render(): TemplateResult<1>;
+    private get viewSizeClass();
+    private get containerClasses();
+    /**
+     * An array of HTML templates derived from the snippets, with ellipses inserted
+     * at the beginning, end, and between each pair of snippets.
+     */
+    private get ellipsisJoinedSnippets();
+    /**
+     * Returns an array of HTML span templates containing this item's snippets with all of
+     * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+     *
+     * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+     * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+     *
+     * Note on `<em>` vs. `<mark>`:
+     * The old search page snippets had search keywords demarcated with `<em>` tags.
+     * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
+     * but screen-reader behavior may be different. `<em>` will likely be read in a
+     * different tone, while `<mark>` is often read no differently than ordinary text
+     * in many screen-readers (though there are ways to work around this if needed).
+     */
+    private get snippetTemplates();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/text-snippet-block.js

@@ -0,0 +1,128 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
+let TextSnippetBlock = class TextSnippetBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.snippets = [];
+        this.viewSize = 'desktop';
+    }
+    render() {
+        var _a;
+        if (!((_a = this.snippets) === null || _a === void 0 ? void 0 : _a.length))
+            return html `${nothing}`;
+        return html `
+      <div class="${this.containerClasses}">${this.ellipsisJoinedSnippets}</div>
+
+      ${this.viewSize === 'grid'
+            ? html `<div class="separator"></div>`
+            : nothing}
+    `;
+    }
+    get viewSizeClass() {
+        return this.viewSize === 'grid' ? 'grid' : 'list';
+    }
+    get containerClasses() {
+        return `container ${this.viewSizeClass}`;
+    }
+    /**
+     * An array of HTML templates derived from the snippets, with ellipses inserted
+     * at the beginning, end, and between each pair of snippets.
+     */
+    get ellipsisJoinedSnippets() {
+        return html `
+      &hellip; ${join(this.snippetTemplates, html ` &hellip; `)} &hellip;
+    `;
+    }
+    /**
+     * Returns an array of HTML span templates containing this item's snippets with all of
+     * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.
+     *
+     * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags
+     * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.
+     *
+     * Note on `<em>` vs. `<mark>`:
+     * The old search page snippets had search keywords demarcated with `<em>` tags.
+     * The `<mark>` tag is semantically more accurate for this use case than `<em>`,
+     * but screen-reader behavior may be different. `<em>` will likely be read in a
+     * different tone, while `<mark>` is often read no differently than ordinary text
+     * in many screen-readers (though there are ways to work around this if needed).
+     */
+    get snippetTemplates() {
+        var _a;
+        return (_a = this.snippets) === null || _a === void 0 ? void 0 : _a.map(s => {
+            const matches = s.matchAll(/{{{(.+?)}}}/g);
+            const templates = [];
+            // Convert each match into an HTML template that includes:
+            //  - Everything from the end of the previous match (or the beginning of the
+            //      string) up to the current match, as raw text.
+            //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.
+            let index = 0;
+            for (const match of matches) {
+                if (match.index != null) {
+                    templates.push(html `
+            ${s.slice(index, match.index)}
+            <mark>${match[1]}</mark>
+          `);
+                    index = match.index + match[0].length;
+                }
+            }
+            // Include any text from the last match to the end
+            templates.push(html `${s.slice(index)}`);
+            // Squash everything into a single span template
+            return html `<span>${templates}</span>`;
+        });
+    }
+    static get styles() {
+        return css `
+      .container {
+        display: -webkit-box;
+        font-family: 'Times New Roman', serif;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        -webkit-line-clamp: var(--maxLines, 3);
+        -webkit-box-orient: vertical;
+      }
+
+      .separator {
+        /* Border line should extend to the edges of the tile */
+        margin: 0 -5px;
+        border-bottom: 1px solid #bbb;
+      }
+
+      .grid {
+        /* Bottom margin reduced by 1px to account for the separator */
+        margin: 0.5rem 0 0.4rem;
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
+
+      .list {
+        margin: 1rem 0 0;
+        padding: 0 0 0 1.5rem;
+        border-left: 0.5rem solid #194880;
+        border-radius: 3px;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+
+      mark {
+        /* blue, 20% transparency */
+        background-color: #0000ff33;
+        color: inherit;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TextSnippetBlock.prototype, "snippets", void 0);
+__decorate([
+    property({ type: String })
+], TextSnippetBlock.prototype, "viewSize", void 0);
+TextSnippetBlock = __decorate([
+    customElement('text-snippet-block')
+], TextSnippetBlock);
+export { TextSnippetBlock };
+//# sourceMappingURL=text-snippet-block.js.map

package/dist/src/tiles/text-snippet-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-snippet-block.js","sourceRoot":"","sources":["../../../src/tiles/text-snippet-block.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAC6B,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IAkH3D,CAAC;IAhHC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,sBAAsB;;QAEjE,IAAI,CAAC,QAAQ,KAAK,MAAM;YACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B;YACrC,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACpD,CAAC;IAED,IAAY,gBAAgB;QAC1B,OAAO,aAAa,IAAI,CAAC,aAAa,EAAE,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACH,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;iBACE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAA,YAAY,CAAC;KACzD,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACH,IAAY,gBAAgB;;QAC1B,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;YAC3C,MAAM,SAAS,GAAqB,EAAE,CAAC;YAEvC,0DAA0D;YAC1D,4EAA4E;YAC5E,qDAAqD;YACrD,+EAA+E;YAC/E,IAAI,KAAK,GAAG,CAAC,CAAC;YACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;gBAC3B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE;oBACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA;cACf,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;oBACrB,KAAK,CAAC,CAAC,CAAC;WACjB,CAAC,CAAC;oBACH,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;iBACvC;aACF;YAED,kDAAkD;YAClD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAExC,gDAAgD;YAChD,OAAO,IAAI,CAAA,SAAS,SAAS,SAAS,CAAC;QACzC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AApH4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA8B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAqH5B;SArHY,gBAAgB","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { join } from 'lit/directives/join.js';\n\n@customElement('text-snippet-block')\nexport class TextSnippetBlock extends LitElement {\n  @property({ type: Array }) snippets?: string[] = [];\n\n  @property({ type: String }) viewSize: string = 'desktop';\n\n  render() {\n    if (!this.snippets?.length) return html`${nothing}`;\n\n    return html`\n      <div class=\"${this.containerClasses}\">${this.ellipsisJoinedSnippets}</div>\n\n      ${this.viewSize === 'grid'\n        ? html`<div class=\"separator\"></div>`\n        : nothing}\n    `;\n  }\n\n  private get viewSizeClass() {\n    return this.viewSize === 'grid' ? 'grid' : 'list';\n  }\n\n  private get containerClasses() {\n    return `container ${this.viewSizeClass}`;\n  }\n\n  /**\n   * An array of HTML templates derived from the snippets, with ellipses inserted\n   * at the beginning, end, and between each pair of snippets.\n   */\n  private get ellipsisJoinedSnippets(): TemplateResult {\n    return html`\n      &hellip; ${join(this.snippetTemplates, html` &hellip; `)} &hellip;\n    `;\n  }\n\n  /**\n   * Returns an array of HTML span templates containing this item's snippets with all of\n   * their `{{{triple-brace-delimited}}}` matches replaced by `<mark>HTML mark tags</mark>`.\n   *\n   * This approach safely avoids the use of `unsafeHTML` and leaves any existing HTML tags\n   * in the snippets intact (as inert text), rather than stripping them away with DOMPurify.\n   *\n   * Note on `<em>` vs. `<mark>`:\n   * The old search page snippets had search keywords demarcated with `<em>` tags.\n   * The `<mark>` tag is semantically more accurate for this use case than `<em>`,\n   * but screen-reader behavior may be different. `<em>` will likely be read in a\n   * different tone, while `<mark>` is often read no differently than ordinary text\n   * in many screen-readers (though there are ways to work around this if needed).\n   */\n  private get snippetTemplates(): TemplateResult[] | undefined {\n    return this.snippets?.map(s => {\n      const matches = s.matchAll(/{{{(.+?)}}}/g);\n      const templates: TemplateResult[] = [];\n\n      // Convert each match into an HTML template that includes:\n      //  - Everything from the end of the previous match (or the beginning of the\n      //      string) up to the current match, as raw text.\n      //  - The current match (excluding the curly braces) wrapped in a `<mark>` tag.\n      let index = 0;\n      for (const match of matches) {\n        if (match.index != null) {\n          templates.push(html`\n            ${s.slice(index, match.index)}\n            <mark>${match[1]}</mark>\n          `);\n          index = match.index + match[0].length;\n        }\n      }\n\n      // Include any text from the last match to the end\n      templates.push(html`${s.slice(index)}`);\n\n      // Squash everything into a single span template\n      return html`<span>${templates}</span>`;\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .container {\n        display: -webkit-box;\n        font-family: 'Times New Roman', serif;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n      }\n\n      .separator {\n        /* Border line should extend to the edges of the tile */\n        margin: 0 -5px;\n        border-bottom: 1px solid #bbb;\n      }\n\n      .grid {\n        /* Bottom margin reduced by 1px to account for the separator */\n        margin: 0.5rem 0 0.4rem;\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        margin: 1rem 0 0;\n        padding: 0 0 0 1.5rem;\n        border-left: 0.5rem solid #194880;\n        border-radius: 3px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/utils/analytics-category-event.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Analytics categories and events. Used when building actions in
+ */
+export declare const analyticsCategories: {
+    default: string;
+};
+export declare const analyticsActions: {
+    sortBy: string;
+    sortByCreator: string;
+    sortByTitle: string;
+    displayMode: string;
+    facetsChanged: string;
+    histogramChanged: string;
+};

package/dist/src/utils/analytics-category-event.js

@@ -0,0 +1,15 @@
+/**
+ * Analytics categories and events. Used when building actions in
+ */
+export const analyticsCategories = {
+    default: 'collection-browser',
+};
+export const analyticsActions = {
+    sortBy: 'sortBy',
+    sortByCreator: 'sortByCreator',
+    sortByTitle: 'sortByTitle',
+    displayMode: 'displayMode',
+    facetsChanged: 'facetsChanged',
+    histogramChanged: 'histogramChanged',
+};
+//# sourceMappingURL=analytics-category-event.js.map

package/dist/src/utils/analytics-category-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-category-event.js","sourceRoot":"","sources":["../../../src/utils/analytics-category-event.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,OAAO,EAAE,oBAAoB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,eAAe;IAC9B,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,eAAe;IAC9B,gBAAgB,EAAE,kBAAkB;CACrC,CAAC","sourcesContent":["/**\n * Analytics categories and events. Used when building actions in\n */\nexport const analyticsCategories = {\n  default: 'collection-browser',\n};\n\nexport const analyticsActions = {\n  sortBy: 'sortBy',\n  sortByCreator: 'sortByCreator',\n  sortByTitle: 'sortByTitle',\n  displayMode: 'displayMode',\n  facetsChanged: 'facetsChanged', // group + value\n  histogramChanged: 'histogramChanged',\n};\n"]}

package/dist/test/collection-browser.test.js

@@ -3,9 +3,22 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import sinon from 'sinon';
 import '../src/collection-browser';
+import { defaultSelectedFacets } from '../src/models';
 import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';
 describe('Collection Browser', () => {
+    it('clear existing filter for facets & sort-bar', async () => {
+        const el = await fixture(html `<collection-browser></collection-browser>`);
+        el.selectedSort = 'title';
+        await el.updateComplete;
+        el.clearFilters();
+        expect(el.selectedFacets).to.equal(defaultSelectedFacets);
+        expect(el.selectedSort).to.equal('relevance');
+        expect(el.sortDirection).to.null;
+        expect(el.sortParam).to.null;
+        expect(el.selectedCreatorFilter).to.null;
+        expect(el.selectedTitleFilter).to.null;
+    });
     it('should render with a sort bar, facets, and infinite scroller', async () => {
         var _a, _b, _c;
         const el = await fixture(html `<collection-browser></collection-browser>`);
@@ -19,7 +32,7 @@ describe('Collection Browser', () => {
         expect(infiniteScroller).to.exist;
     });
     it('queries the search service when given a base query', async () => {
-        var _a;
+        var _a, _b, _c;
         const searchService = new MockSearchService();
         const el = await fixture(html `<collection-browser
         .searchService=${searchService}
@@ -27,6 +40,7 @@ describe('Collection Browser', () => {
         el.baseQuery = 'collection:foo';
         await el.updateComplete;
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('collection:foo');
+        expect((_c = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#big-results-label')) === null || _c === void 0 ? void 0 : _c.textContent).to.contains('Results');
     });
     it('queries for collection names after a fetch', async () => {
         const searchService = new MockSearchService();
@@ -78,5 +92,15 @@ describe('Collection Browser', () => {
         await el.updateComplete;
         expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);
     });
+    it('query the search service for single result', async () => {
+        var _a, _b;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<collection-browser
+        .searchService=${searchService}
+      ></collection-browser>`);
+        el.baseQuery = 'single-result';
+        await el.updateComplete;
+        expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#big-results-label')) === null || _b === void 0 ? void 0 : _b.textContent).to.contains('Result');
+    });
 });
 //# sourceMappingURL=collection-browser.test.js.map