@internetarchive/collection-browser 3.3.2 → 3.3.4-alpha-webdev7761.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { join } from 'lit/directives/join.js';\r\nimport { map } from 'lit/directives/map.js';\r\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { msg, str } from '@lit/localize';\r\nimport DOMPurify from 'dompurify';\r\n\r\nimport type { SortParam } from '@internetarchive/search-service';\r\nimport { suppressedCollections } from '../../models';\r\nimport type { CollectionTitles } from '../../data-source/models';\r\nimport { BaseTileComponent } from '../base-tile-component';\r\n\r\nimport { formatCount, NumberFormat } from '../../utils/format-count';\r\nimport type { DateFormat } from '../../utils/format-date';\r\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\r\n\r\nimport '../image-block';\r\nimport '../review-block';\r\nimport '../text-snippet-block';\r\nimport '../tile-mediatype-icon';\r\n\r\n@customElement('tile-list')\r\nexport class TileList 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   *  - defaultSortParam: 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: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];\r\n\r\n  render() {\r\n    return html`\r\n      <div id=\"list-line\" class=\"${this.classSize}\">\r\n        ${this.classSize === 'mobile'\r\n          ? this.mobileTemplate\r\n          : this.desktopTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Templates\r\n   */\r\n  private get mobileTemplate() {\r\n    return html`\r\n      <div id=\"list-line-top\">\r\n        <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\r\n        <div id=\"list-line-right\">\r\n          <div id=\"title-line\">\r\n            <div id=\"title\">${this.titleTemplate}</div>\r\n            ${this.iconRightTemplate}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div id=\"list-line-bottom\">${this.detailsTemplate}</div>\r\n    `;\r\n  }\r\n\r\n  private get desktopTemplate() {\r\n    return html`\r\n      <div id=\"list-line-left\">${this.imageBlockTemplate}</div>\r\n      <div id=\"list-line-right\">\r\n        <div id=\"title-line\">\r\n          <div id=\"title\">${this.titleTemplate}</div>\r\n          ${this.iconRightTemplate}\r\n        </div>\r\n        ${this.detailsTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get imageBlockTemplate() {\r\n    if (!this.model) return nothing;\r\n\r\n    const isCollection = this.model.mediatype === 'collection';\r\n    const href = this.displayValueProvider.itemPageUrl(\r\n      this.model.identifier,\r\n      isCollection,\r\n    );\r\n\r\n    return html`<a\r\n      id=\"image-link\"\r\n      title=${msg(str`View ${this.model?.title}`)}\r\n      href=${href}\r\n    >\r\n      <image-block\r\n        .model=${this.model}\r\n        .baseImageUrl=${this.baseImageUrl}\r\n        .isCompactTile=${false}\r\n        .isListTile=${true}\r\n        .viewSize=${this.classSize}\r\n        .loggedIn=${this.loggedIn}\r\n        .suppressBlurring=${this.suppressBlurring}\r\n      >\r\n      </image-block>\r\n    </a> `;\r\n  }\r\n\r\n  private get detailsTemplate() {\r\n    return html`\r\n      ${this.itemLineTemplate} ${this.creatorTemplate}\r\n      <div id=\"dates-line\">\r\n        ${this.datePublishedTemplate} ${this.dateSortByTemplate}\r\n        ${this.webArchivesCaptureDatesTemplate}\r\n      </div>\r\n      <div id=\"views-line\">\r\n        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\r\n      </div>\r\n      ${this.topicsTemplate} ${this.collectionsTemplate}\r\n      ${this.descriptionTemplate} ${this.textSnippetsTemplate}\r\n      ${this.reviewBlockTemplate}\r\n    `;\r\n  }\r\n\r\n  // Data templates\r\n  private get iconRightTemplate() {\r\n    return html`\r\n      <a\r\n        id=\"icon-right\"\r\n        href=${this.mediatypeURL}\r\n        title=${msg(str`See more: ${this.model?.mediatype}`)}\r\n      >\r\n        <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>\r\n      </a>\r\n    `;\r\n  }\r\n\r\n  private get titleTemplate() {\r\n    if (!this.model?.title) {\r\n      return nothing;\r\n    }\r\n\r\n    // If the model has a server-specified href, use it\r\n    // Otherwise construct a details link using the identifier\r\n    return this.model?.href\r\n      ? html`<a href=\"${this.baseNavigationUrl}${this.model.href}\"\r\n          >${this.model.title ?? this.model.identifier}</a\r\n        >`\r\n      : this.detailsLink(\r\n          this.model.identifier,\r\n          this.model.title,\r\n          this.model.mediatype === 'collection',\r\n        );\r\n  }\r\n\r\n  private get itemLineTemplate() {\r\n    const source = this.sourceTemplate;\r\n    const volume = this.volumeTemplate;\r\n    const issue = this.issueTemplate;\r\n    if (!source && !volume && !issue) {\r\n      return nothing;\r\n    }\r\n    return html` <div id=\"item-line\">${source} ${volume} ${issue}</div> `;\r\n  }\r\n\r\n  private get sourceTemplate() {\r\n    if (!this.model?.source) {\r\n      return nothing;\r\n    }\r\n    return html`\r\n      <div id=\"source\" class=\"metadata\">\r\n        ${this.labelTemplate(msg('Source'))}\r\n        ${this.searchLink('source', this.model.source)}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get volumeTemplate() {\r\n    return this.metadataTemplate(this.model?.volume, msg('Volume'));\r\n  }\r\n\r\n  private get issueTemplate() {\r\n    return this.metadataTemplate(this.model?.issue, msg('Issue'));\r\n  }\r\n\r\n  private get creatorTemplate() {\r\n    // \"Archivist since\" if account\r\n    if (this.model?.mediatype === 'account') {\r\n      return html`\r\n        <div id=\"creator\" class=\"metadata\">\r\n          <span class=\"label\"\r\n            >${this.displayValueProvider.accountLabel ?? nothing}</span\r\n          >\r\n        </div>\r\n      `;\r\n    }\r\n    // \"Creator\" if not account tile\r\n    if (!this.model?.creators || this.model.creators.length === 0) {\r\n      return nothing;\r\n    }\r\n    return html`\r\n      <div id=\"creator\" class=\"metadata\">\r\n        ${this.labelTemplate(msg('By'))}\r\n        ${join(\r\n          map(this.model.creators, id => this.searchLink('creator', id)),\r\n          ', ',\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get datePublishedTemplate() {\r\n    // If we're showing a date published of Jan 1 at midnight, only show the year.\r\n    // This is because items with only a year for their publication date are normalized to\r\n    // Jan 1 at midnight timestamps in the search engine documents.\r\n    const date: Date | undefined = this.model?.datePublished;\r\n    let format: DateFormat = 'long';\r\n    if (isFirstMillisecondOfUTCYear(date)) {\r\n      format = 'year-only';\r\n    }\r\n\r\n    return this.metadataTemplate(\r\n      this.getFormattedDate(date, format),\r\n      msg('Published'),\r\n    );\r\n  }\r\n\r\n  // Show date label/value when sorted by date type\r\n  // Except datePublished which is always shown\r\n  private get dateSortByTemplate() {\r\n    if (\r\n      this.effectiveSort &&\r\n      (this.effectiveSort.field === 'addeddate' ||\r\n        this.effectiveSort.field === 'reviewdate' ||\r\n        this.effectiveSort.field === 'publicdate')\r\n    ) {\r\n      return this.metadataTemplate(\r\n        this.getFormattedDate(this.date, 'long'),\r\n        this.displayValueProvider.dateLabel,\r\n      );\r\n    }\r\n    return nothing;\r\n  }\r\n\r\n  private get viewsTemplate() {\r\n    const viewCount =\r\n      this.effectiveSort?.field === 'week'\r\n        ? this.model?.weeklyViewCount // weekly views\r\n        : this.model?.viewCount; // all-time views\r\n    if (viewCount == null) return nothing;\r\n\r\n    // when its a search-tile, we don't have any stats to show\r\n    if (this.model?.mediatype === 'search') {\r\n      return this.metadataTemplate('(Favorited search query)', '');\r\n    }\r\n\r\n    return this.metadataTemplate(\r\n      `${formatCount(viewCount, this.formatSize)}`,\r\n      msg('Views'),\r\n    );\r\n  }\r\n\r\n  private get ratingTemplate() {\r\n    return this.metadataTemplate(this.model?.averageRating, msg('Avg Rating'));\r\n  }\r\n\r\n  private get reviewsTemplate() {\r\n    return this.metadataTemplate(this.model?.commentCount, msg('Reviews'));\r\n  }\r\n\r\n  private get topicsTemplate() {\r\n    if (!this.model?.subjects || this.model.subjects.length === 0) {\r\n      return nothing;\r\n    }\r\n    return html`\r\n      <div id=\"topics\" class=\"metadata\">\r\n        ${this.labelTemplate(msg('Topics'))}\r\n        ${join(\r\n          map(this.model.subjects, id => this.searchLink('subject', id)),\r\n          ', ',\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get collectionsTemplate() {\r\n    if (!this.collectionLinks || this.collectionLinks.length === 0) {\r\n      return nothing;\r\n    }\r\n    return html`\r\n      <div id=\"collections\" class=\"metadata\">\r\n        ${this.labelTemplate(msg('Collections'))}\r\n        ${join(this.collectionLinks, ', ')}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private get descriptionTemplate() {\r\n    return this.metadataTemplate(\r\n      // Sanitize away any HTML tags and convert line breaks to spaces.\r\n      unsafeHTML(\r\n        DOMPurify.sanitize(this.model?.description?.replace(/\\n/g, ' ') ?? ''),\r\n      ),\r\n      '',\r\n      'description',\r\n    );\r\n  }\r\n\r\n  private get reviewBlockTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.model?.review) return nothing;\r\n\r\n    const { reviewtitle, reviewbody, stars } = this.model.review;\r\n    return html`\r\n      <review-block\r\n        viewsize=\"list\"\r\n        title=${ifDefined(reviewtitle)}\r\n        body=${ifDefined(reviewbody)}\r\n        starRating=${ifDefined(stars)}\r\n      >\r\n      </review-block>\r\n    `;\r\n  }\r\n\r\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.hasSnippets) return nothing;\r\n\r\n    return html`<text-snippet-block\r\n      viewsize=\"list\"\r\n      .snippets=${this.model?.snippets}\r\n    ></text-snippet-block>`;\r\n  }\r\n\r\n  private get hasSnippets(): boolean {\r\n    return !!this.model?.snippets?.length;\r\n  }\r\n\r\n  private get webArchivesCaptureDatesTemplate():\r\n    | TemplateResult\r\n    | typeof nothing {\r\n    if (!this.model?.captureDates || !this.model.title) return nothing;\r\n\r\n    return html`\r\n      <ul class=\"capture-dates\">\r\n        ${map(\r\n          this.model.captureDates,\r\n          date =>\r\n            html`<li>\r\n              ${this.displayValueProvider.webArchivesCaptureLink(\r\n                this.model!.title,\r\n                date,\r\n              )}\r\n            </li>`,\r\n        )}\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  // Utility functions\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  private metadataTemplate(text: any, label = '', id?: string) {\r\n    if (!text) return nothing;\r\n    return html`\r\n      <div id=${ifDefined(id)} class=\"metadata\">\r\n        ${this.labelTemplate(label)} ${text}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private labelTemplate(label: string) {\r\n    return html` ${label\r\n      ? html`<span class=\"label\">${label}: </span>`\r\n      : nothing}`;\r\n  }\r\n\r\n  private searchLink(field: string, searchTerm: string) {\r\n    if (!field || !searchTerm) {\r\n      return nothing;\r\n    }\r\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\r\n    // No whitespace after closing tag\r\n    // Note: single ' for href='' to wrap \" in query var gets changed back by yarn format\r\n    return html`<a\r\n      href=\"${this.baseNavigationUrl}/search?query=${query}\"\r\n      rel=\"nofollow\"\r\n    >\r\n      ${DOMPurify.sanitize(searchTerm)}</a\r\n    >`;\r\n  }\r\n\r\n  private detailsLink(\r\n    identifier?: string,\r\n    text?: string,\r\n    isCollection = false,\r\n  ): TemplateResult | typeof nothing {\r\n    if (!identifier) return nothing;\r\n\r\n    const linkText = text ?? identifier;\r\n    const linkHref = this.displayValueProvider.itemPageUrl(\r\n      identifier,\r\n      isCollection,\r\n    );\r\n\r\n    return html`<a href=${linkHref}> ${DOMPurify.sanitize(linkText)} </a>`;\r\n  }\r\n\r\n  /** The URL of this item's mediatype collection, if defined. */\r\n  private get mediatypeURL(): string | typeof nothing {\r\n    // NB: baseNavigationUrl can be an empty string\r\n    if (this.baseNavigationUrl === undefined || !this.model?.mediatype)\r\n      return nothing;\r\n\r\n    // Need special handling for certain mediatypes that don't have a top-level collection page\r\n    switch (this.model.mediatype) {\r\n      case 'collection':\r\n        return `${this.baseNavigationUrl}/search?query=mediatype:collection&sort=-downloads`;\r\n      case 'account':\r\n        return nothing;\r\n      default:\r\n        return this.displayValueProvider.itemPageUrl(\r\n          this.model.mediatype,\r\n          true,\r\n        );\r\n    }\r\n  }\r\n\r\n  protected updated(changed: PropertyValues): void {\r\n    if (changed.has('model') || changed.has('collectionTitles')) {\r\n      this.buildCollectionLinks();\r\n    }\r\n  }\r\n\r\n  private async buildCollectionLinks() {\r\n    if (!this.model?.collections || this.model.collections.length === 0) {\r\n      return;\r\n    }\r\n\r\n    // Note: quirk of Lit: need to replace collectionLinks array,\r\n    // otherwise it will not re-render. Can't simply alter the array.\r\n    this.collectionLinks = [];\r\n    const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];\r\n    for (const collection of this.model.collections) {\r\n      // Don't include favorites or collections that are meant to be suppressed\r\n      if (\r\n        !suppressedCollections[collection] &&\r\n        !collection.startsWith('fav-')\r\n      ) {\r\n        newCollectionLinks.push(\r\n          this.detailsLink(\r\n            collection,\r\n            this.collectionTitles?.get(collection) ?? collection,\r\n            true,\r\n          ),\r\n        );\r\n      }\r\n    }\r\n    this.collectionLinks = newCollectionLinks;\r\n  }\r\n\r\n  /*\r\n   * TODO: fix field names to match model in src/collection-browser.ts\r\n   * private get dateSortSelector()\r\n   * @see src/models.ts\r\n   */\r\n  private get date(): Date | undefined {\r\n    switch (this.effectiveSort?.field) {\r\n      case 'date':\r\n        return this.model?.datePublished;\r\n      case 'reviewdate':\r\n        return this.model?.dateReviewed;\r\n      case 'addeddate':\r\n        return this.model?.dateAdded;\r\n      default:\r\n        return this.model?.dateArchived; // publicdate\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Returns the active sort param if one is set, or the default sort param otherwise.\r\n   */\r\n  private get effectiveSort(): SortParam | null {\r\n    return this.sortParam ?? this.defaultSortParam;\r\n  }\r\n\r\n  private get classSize(): string {\r\n    if (\r\n      this.mobileBreakpoint &&\r\n      this.currentWidth &&\r\n      this.currentWidth < this.mobileBreakpoint\r\n    ) {\r\n      return 'mobile';\r\n    }\r\n    return 'desktop';\r\n  }\r\n\r\n  private get formatSize(): NumberFormat {\r\n    if (\r\n      this.mobileBreakpoint &&\r\n      this.currentWidth &&\r\n      this.currentWidth < this.mobileBreakpoint\r\n    ) {\r\n      return 'short';\r\n    }\r\n    return 'long';\r\n  }\r\n\r\n  static get styles() {\r\n    return css`\r\n      html {\r\n        font-size: unset;\r\n      }\r\n\r\n      div {\r\n        font-size: 14px;\r\n      }\r\n\r\n      div a {\r\n        text-decoration: none;\r\n      }\r\n\r\n      div a:link {\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n\r\n      .label {\r\n        font-weight: bold;\r\n      }\r\n\r\n      #list-line.mobile {\r\n        --infiniteScrollerRowGap: 20px;\r\n        --infiniteScrollerRowHeight: auto;\r\n      }\r\n\r\n      #list-line.desktop {\r\n        --infiniteScrollerRowGap: 30px;\r\n        --infiniteScrollerRowHeight: auto;\r\n      }\r\n\r\n      /* fields */\r\n      #icon-right {\r\n        width: 20px;\r\n        padding-top: 5px;\r\n        --iconHeight: 20px;\r\n        --iconWidth: 20px;\r\n        --iconTextAlign: right;\r\n        margin-top: -8px;\r\n        text-align: right;\r\n      }\r\n\r\n      #title {\r\n        color: #4b64ff;\r\n        text-decoration: none;\r\n        font-size: 22px;\r\n        font-weight: bold;\r\n        /* align top of text with image */\r\n        line-height: 25px;\r\n        margin-top: -4px;\r\n        padding-bottom: 2px;\r\n        flex-grow: 1;\r\n\r\n        display: -webkit-box;\r\n        -webkit-box-orient: vertical;\r\n        -webkit-line-clamp: 3;\r\n        overflow: hidden;\r\n        overflow-wrap: anywhere;\r\n      }\r\n\r\n      .metadata {\r\n        line-height: 20px;\r\n      }\r\n\r\n      #description,\r\n      #creator,\r\n      #topics,\r\n      #source {\r\n        text-align: left;\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        -webkit-box-orient: vertical;\r\n        display: -webkit-box;\r\n        word-break: break-word;\r\n        -webkit-line-clamp: 3; /* number of lines to show */\r\n        line-clamp: 3;\r\n\r\n        /*\r\n         * Safari doesn't always respect the line-clamping rules above,\r\n         * so we add this to ensure these fields still get truncated\r\n         */\r\n        max-height: 60px;\r\n      }\r\n\r\n      #collections {\r\n        display: -webkit-box;\r\n        -webkit-box-orient: vertical;\r\n        -webkit-line-clamp: 3;\r\n        overflow: hidden;\r\n        overflow-wrap: anywhere;\r\n      }\r\n\r\n      #collections > a {\r\n        display: inline-block;\r\n      }\r\n\r\n      #icon {\r\n        padding-top: 5px;\r\n      }\r\n\r\n      #description {\r\n        padding-top: 10px;\r\n      }\r\n\r\n      /* Top level container */\r\n      #list-line {\r\n        display: flex;\r\n      }\r\n\r\n      #list-line.mobile {\r\n        flex-direction: column;\r\n      }\r\n\r\n      #list-line.desktop {\r\n        column-gap: 10px;\r\n      }\r\n\r\n      #list-line-top {\r\n        display: flex;\r\n        column-gap: 7px;\r\n      }\r\n\r\n      #list-line-bottom {\r\n        padding-top: 4px;\r\n      }\r\n\r\n      #list-line-right,\r\n      #list-line-top,\r\n      #list-line-bottom {\r\n        width: 100%;\r\n      }\r\n\r\n      /*\r\n       * If the container becomes very tiny, don't let the thumbnail side take\r\n       * up too much space. Shouldn't make a difference on ordinary viewport sizes.\r\n       */\r\n      #list-line-left {\r\n        max-width: 25%;\r\n\r\n        display: flex;\r\n        flex-direction: column;\r\n        row-gap: 5px;\r\n      }\r\n\r\n      div a:hover {\r\n        text-decoration: underline;\r\n      }\r\n\r\n      /* Lines containing multiple div as row */\r\n      #item-line,\r\n      #dates-line,\r\n      #views-line,\r\n      #title-line {\r\n        display: flex;\r\n        flex-direction: row;\r\n        column-gap: 10px;\r\n      }\r\n\r\n      /*\r\n       * With the exception of the title line, allow these to wrap if\r\n       * the space becomes too small to accommodate them together.\r\n       *\r\n       * The title line is excluded because it contains the mediatype icon\r\n       * which we don't want to wrap.\r\n       */\r\n      #item-line,\r\n      #dates-line,\r\n      #views-line {\r\n        flex-wrap: wrap;\r\n      }\r\n\r\n      .capture-dates {\r\n        margin: 0;\r\n        padding: 0;\r\n        list-style-type: none;\r\n      }\r\n\r\n      .capture-dates a:link {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      .capture-dates a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/tiles/models.d.ts

@@ -0,0 +1 @@
+export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';

package/dist/src/tiles/models.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=models.js.map

package/dist/src/tiles/models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/tiles/models.ts"],"names":[],"mappings":"","sourcesContent":["export type SimpleLayoutType = 'none' | 'stats-only' | 'snippets-only';\n"]}

package/dist/src/tiles/overlay/icon-overlay.d.ts

@@ -0,0 +1,8 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import { TileOverlayType } from '../../models';
+export declare class IconOverlay extends LitElement {
+    type?: TileOverlayType;
+    render(): TemplateResult<1>;
+    private get iconTemplate();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/overlay/icon-overlay.js

@@ -0,0 +1,55 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TILE_OVERLAY_ICONS } from '../../models';
+let IconOverlay = class IconOverlay extends LitElement {
+    render() {
+        return html `<div class="icon-overlay">${this.iconTemplate}</div>`;
+    }
+    get iconTemplate() {
+        var _a;
+        if (!this.type)
+            return nothing;
+        return html `${(_a = TILE_OVERLAY_ICONS[this.type]) !== null && _a !== void 0 ? _a : nothing}`;
+    }
+    static get styles() {
+        return css `
+      :host {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
+      }
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      :host(.list-detail) .icon-overlay {
+        height: 20px;
+        width: 20px;
+      }
+      :host(.list-compact) .icon-overlay {
+        height: 15px;
+        width: 15px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], IconOverlay.prototype, "type", void 0);
+IconOverlay = __decorate([
+    customElement('icon-overlay')
+], IconOverlay);
+export { IconOverlay };
+//# sourceMappingURL=icon-overlay.js.map

package/dist/src/tiles/overlay/icon-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/icon-overlay.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,kBAAkB,EAAmB,MAAM,cAAc,CAAC;AAG5D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAGzC,MAAM;QACJ,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,YAAY,QAAQ,CAAC;IACpE,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BT,CAAC;IACJ,CAAC;CACF,CAAA;AA3C6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAwB;AADxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4CvB","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 { TILE_OVERLAY_ICONS, TileOverlayType } from '../../models';\n\n@customElement('icon-overlay')\nexport class IconOverlay extends LitElement {\n  @property({ type: String }) type?: TileOverlayType;\n\n  render() {\n    return html`<div class=\"icon-overlay\">${this.iconTemplate}</div>`;\n  }\n\n  private get iconTemplate(): TemplateResult | typeof nothing {\n    if (!this.type) return nothing;\n    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 100%;\n        z-index: 2;\n        background-color: rgb(255, 254, 203);\n        display: flex;\n        justify-content: center;\n        border: 1px solid #2c2c2c;\n      }\n\n      .icon-overlay {\n        height: 20px;\n        width: 20px;\n        padding: 2px;\n        padding: 2px;\n      }\n\n      :host(.list-detail) .icon-overlay {\n        height: 20px;\n        width: 20px;\n      }\n      :host(.list-compact) .icon-overlay {\n        height: 15px;\n        width: 15px;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/overlay/text-overlay.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import { TileOverlayType } from '../../models';
+export declare class TextOverlay extends LitElement {
+    type?: TileOverlayType;
+    render(): TemplateResult<1>;
+    private get iconTemplate();
+    private get textTemplate();
+    static get styles(): CSSResultGroup;
+}

package/dist/src/tiles/overlay/text-overlay.js

@@ -0,0 +1,74 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TILE_OVERLAY_ICONS, TILE_OVERLAY_TEXT, } from '../../models';
+let TextOverlay = class TextOverlay extends LitElement {
+    render() {
+        return html `
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconTemplate}</div>
+        <p class="text-overlay">${this.textTemplate}</p>
+      </div>
+    `;
+    }
+    get iconTemplate() {
+        var _a;
+        if (!this.type)
+            return nothing;
+        return html `${(_a = TILE_OVERLAY_ICONS[this.type]) !== null && _a !== void 0 ? _a : nothing}`;
+    }
+    get textTemplate() {
+        var _a;
+        if (!this.type)
+            return nothing;
+        return html `${(_a = TILE_OVERLAY_TEXT[this.type]) !== null && _a !== void 0 ? _a : nothing}`;
+    }
+    static get styles() {
+        return css `
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
+        width: auto;
+        height: auto;
+        padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TextOverlay.prototype, "type", void 0);
+TextOverlay = __decorate([
+    customElement('text-overlay')
+], TextOverlay);
+export { TextOverlay };
+//# sourceMappingURL=text-overlay.js.map

package/dist/src/tiles/overlay/text-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-overlay.js","sourceRoot":"","sources":["../../../../src/tiles/overlay/text-overlay.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,EACL,kBAAkB,EAClB,iBAAiB,GAElB,MAAM,cAAc,CAAC;AAGf,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAGzC,MAAM;QACJ,OAAO,IAAI,CAAA;;oCAEqB,IAAI,CAAC,YAAY;kCACnB,IAAI,CAAC,YAAY;;KAE9C,CAAC;IACJ,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC3D,CAAC;IAED,IAAY,YAAY;;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC/B,OAAO,IAAI,CAAA,GAAG,MAAA,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,OAAO,EAAE,CAAC;IAC1D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCT,CAAC;IACJ,CAAC;CACF,CAAA;AA7D6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAwB;AADxC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA8DvB","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 {\n  TILE_OVERLAY_ICONS,\n  TILE_OVERLAY_TEXT,\n  TileOverlayType,\n} from '../../models';\n\n@customElement('text-overlay')\nexport class TextOverlay extends LitElement {\n  @property({ type: String }) type?: TileOverlayType;\n\n  render() {\n    return html`\n      <div class=\"overlay no-preview\">\n        <div class=\"icon-overlay\">${this.iconTemplate}</div>\n        <p class=\"text-overlay\">${this.textTemplate}</p>\n      </div>\n    `;\n  }\n\n  private get iconTemplate(): TemplateResult | typeof nothing {\n    if (!this.type) return nothing;\n    return html`${TILE_OVERLAY_ICONS[this.type] ?? nothing}`;\n  }\n\n  private get textTemplate(): TemplateResult | typeof nothing {\n    if (!this.type) return nothing;\n    return html`${TILE_OVERLAY_TEXT[this.type] ?? nothing}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        align-items: center;\n        display: flex;\n      }\n\n      .overlay {\n        border: 1px solid #2c2c2c;\n        border-radius: 1px;\n        position: absolute;\n        right: 0;\n        left: 0;\n        top: 50%;\n        transform: translate(0px, -50%);\n        width: auto;\n        height: auto;\n        padding: 5px;\n        background-color: #fffecb;\n        display: flex;\n        align-items: center;\n        border-radius: 1px;\n      }\n\n      .icon-overlay {\n        width: 40px;\n        height: 40px;\n        display: inherit;\n      }\n      .text-overlay {\n        margin: 0;\n        vertical-align: bottom;\n        padding-left: 5px;\n        text-align: center;\n        color: #2c2c2c;\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/tiles/review-block.d.ts

@@ -0,0 +1,12 @@
+import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
+export declare class ReviewBlock extends LitElement {
+    title: string;
+    body: string;
+    starRating: number;
+    viewSize: string;
+    render(): TemplateResult<1> | typeof nothing;
+    private get starsTemplate();
+    private get filledStarTemplate();
+    private get unfilledStarTemplate();
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,134 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { favoriteFilledIcon } from '../assets/img/icons/favorite-filled';
+import { favoriteUnfilledIcon } from '../assets/img/icons/favorite-unfilled';
+import { srOnlyStyle } from '../styles/sr-only';
+let ReviewBlock = class ReviewBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = '';
+        this.body = '';
+        this.starRating = 0;
+        this.viewSize = 'desktop';
+    }
+    render() {
+        if (!this.title && !this.body && !this.starRating)
+            return nothing;
+        return html `
+      <div class="review-container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.starsTemplate}
+          <p class="review-title">${this.title}</p>
+          <p class="review-body">${this.body}</p>
+        </div>
+      </div>
+    `;
+    }
+    get starsTemplate() {
+        if (this.starRating <= 0)
+            return nothing;
+        const numFilledStars = Math.min(5, this.starRating);
+        const numUnfilledStars = Math.min(5, 5 - this.starRating);
+        return html `
+      <div class="star-rating">
+        <span class="sr-only">${this.starRating} ${msg('out of 5 stars')}</span>
+        ${Array(numFilledStars).fill(this.filledStarTemplate)}
+        ${Array(numUnfilledStars).fill(this.unfilledStarTemplate)}
+      </div>
+    `;
+    }
+    get filledStarTemplate() {
+        return html `<span aria-hidden="true">${favoriteFilledIcon}</span>`;
+    }
+    get unfilledStarTemplate() {
+        return html `
+      <span class="unfilled-star" aria-hidden="true">
+        ${favoriteUnfilledIcon}
+      </span>
+    `;
+    }
+    static get styles() {
+        return [
+            srOnlyStyle,
+            css `
+        .review-container {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          width: calc(100% - 10px);
+          border: 1px solid #ccc;
+          margin-top: var(--containerTopMargin, 10px);
+          margin-left: var(--containerLeftMargin, 0px);
+          padding: 5px;
+          box-sizing: border-box;
+        }
+
+        .review-title,
+        .review-body {
+          display: -webkit-box;
+          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+          overflow: hidden;
+          overflow-wrap: break-word;
+          word-break: break-word;
+          -webkit-line-clamp: var(--maxLines, 3);
+          -webkit-box-orient: vertical;
+          margin: 0;
+        }
+
+        .review-title {
+          font-size: 1.4rem;
+          line-height: 2rem;
+          max-height: 6rem;
+        }
+
+        .review-title > a[href] {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        .review-title > a[href]:hover {
+          text-decoration: underline;
+        }
+
+        .review-body {
+          font-size: 1rem;
+          line-height: 1.4rem;
+          max-height: 4.2rem;
+        }
+
+        .star-rating svg {
+          width: 10px;
+          height: 10px;
+        }
+
+        .unfilled-star {
+          fill: #ccc;
+        }
+
+        .list {
+          margin: 0;
+          padding-left: 5px;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], ReviewBlock.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], ReviewBlock.prototype, "body", void 0);
+__decorate([
+    property({ type: Number })
+], ReviewBlock.prototype, "starRating", void 0);
+__decorate([
+    property({ type: String })
+], ReviewBlock.prototype, "viewSize", void 0);
+ReviewBlock = __decorate([
+    customElement('review-block')
+], ReviewBlock);
+export { ReviewBlock };
+//# sourceMappingURL=review-block.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"review-block.js","sourceRoot":"","sources":["../../../src/tiles/review-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,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGzC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACuB,UAAK,GAAG,EAAE,CAAC;QAEX,SAAI,GAAG,EAAE,CAAC;QAEV,eAAU,GAAG,CAAC,CAAC;QAEf,aAAQ,GAAG,SAAS,CAAC;IA2GnD,CAAC;IAzGC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAElE,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,aAAa;oCACM,IAAI,CAAC,KAAK;mCACX,IAAI,CAAC,IAAI;;;KAGvC,CAAC;IACJ,CAAC;IAED,IAAY,aAAa;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC;YAAE,OAAO,OAAO,CAAC;QAEzC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAA;;gCAEiB,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,gBAAgB,CAAC;UAC9D,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC;UACnD,KAAK,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC;;KAE5D,CAAC;IACJ,CAAC;IAED,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAA,4BAA4B,kBAAkB,SAAS,CAAC;IACrE,CAAC;IAED,IAAY,oBAAoB;QAC9B,OAAO,IAAI,CAAA;;UAEL,oBAAoB;;KAEzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2DF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAW;AAEV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAsB;AAPtC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkHvB","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 { msg } from '@lit/localize';\nimport { favoriteFilledIcon } from '../assets/img/icons/favorite-filled';\nimport { favoriteUnfilledIcon } from '../assets/img/icons/favorite-unfilled';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('review-block')\nexport class ReviewBlock extends LitElement {\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) body = '';\n\n  @property({ type: Number }) starRating = 0;\n\n  @property({ type: String }) viewSize = 'desktop';\n\n  render() {\n    if (!this.title && !this.body && !this.starRating) return nothing;\n\n    return html`\n      <div class=\"review-container\">\n        <div class=\"snippet-view ${this.viewSize}\">\n          ${this.starsTemplate}\n          <p class=\"review-title\">${this.title}</p>\n          <p class=\"review-body\">${this.body}</p>\n        </div>\n      </div>\n    `;\n  }\n\n  private get starsTemplate(): TemplateResult | typeof nothing {\n    if (this.starRating <= 0) return nothing;\n\n    const numFilledStars = Math.min(5, this.starRating);\n    const numUnfilledStars = Math.min(5, 5 - this.starRating);\n    return html`\n      <div class=\"star-rating\">\n        <span class=\"sr-only\">${this.starRating} ${msg('out of 5 stars')}</span>\n        ${Array(numFilledStars).fill(this.filledStarTemplate)}\n        ${Array(numUnfilledStars).fill(this.unfilledStarTemplate)}\n      </div>\n    `;\n  }\n\n  private get filledStarTemplate(): TemplateResult {\n    return html`<span aria-hidden=\"true\">${favoriteFilledIcon}</span>`;\n  }\n\n  private get unfilledStarTemplate(): TemplateResult {\n    return html`\n      <span class=\"unfilled-star\" aria-hidden=\"true\">\n        ${favoriteUnfilledIcon}\n      </span>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        .review-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n          width: calc(100% - 10px);\n          border: 1px solid #ccc;\n          margin-top: var(--containerTopMargin, 10px);\n          margin-left: var(--containerLeftMargin, 0px);\n          padding: 5px;\n          box-sizing: border-box;\n        }\n\n        .review-title,\n        .review-body {\n          display: -webkit-box;\n          font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n          overflow: hidden;\n          overflow-wrap: break-word;\n          word-break: break-word;\n          -webkit-line-clamp: var(--maxLines, 3);\n          -webkit-box-orient: vertical;\n          margin: 0;\n        }\n\n        .review-title {\n          font-size: 1.4rem;\n          line-height: 2rem;\n          max-height: 6rem;\n        }\n\n        .review-title > a[href] {\n          color: inherit;\n          text-decoration: none;\n        }\n\n        .review-title > a[href]:hover {\n          text-decoration: underline;\n        }\n\n        .review-body {\n          font-size: 1rem;\n          line-height: 1.4rem;\n          max-height: 4.2rem;\n        }\n\n        .star-rating svg {\n          width: 10px;\n          height: 10px;\n        }\n\n        .unfilled-star {\n          fill: #ccc;\n        }\n\n        .list {\n          margin: 0;\n          padding-left: 5px;\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+export declare class TextSnippetBlock extends LitElement {
+    snippets?: string[];
+    viewSize: string;
+    render(): TemplateResult<1>;
+    /**
+     * 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,132 @@
+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="container">
+        <div class="snippet-view ${this.viewSize}">
+          ${this.ellipsisJoinedSnippets}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * 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(/{{{(.+?)}}}/gs);
+            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: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: calc(100% - 10px);
+        border-left: 5px solid #194880;
+        margin-top: var(--containerTopMargin, 10px);
+        margin-left: var(--containerLeftMargin, 0px);
+        border-radius: 3px;
+        box-sizing: border-box;
+      }
+
+      .snippet-view {
+        display: -webkit-box;
+        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        -webkit-line-clamp: var(--maxLines, 3);
+        -webkit-box-orient: vertical;
+        margin-left: 5px;
+      }
+
+      .grid {
+        font-size: 1.2rem;
+        line-height: 1.5rem;
+      }
+
+      .list {
+        margin: 0;
+        padding-left: 15px;
+        font-size: 1.4rem;
+        line-height: 2rem;
+
+        /*
+         * Safari doesn't always respect the line-clamping rules,
+         * so we add this to ensure these fields still get truncated.
+         */
+        max-height: 6rem;
+      }
+
+      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;AAGvC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACsB,aAAQ,GAAc,EAAE,CAAC;QAExB,aAAQ,GAAW,SAAS,CAAC;IAoH3D,CAAC;IAlHC,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAA;YAAE,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAEpD,OAAO,IAAI,CAAA;;mCAEoB,IAAI,CAAC,QAAQ;YACpC,IAAI,CAAC,sBAAsB;;;KAGlC,CAAC;IACJ,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,eAAe,CAAC,CAAC;YAC5C,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,CAAC;gBAC5B,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;oBACxB,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;gBACxC,CAAC;YACH,CAAC;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CT,CAAC;IACJ,CAAC;CACF,CAAA;AAtH4B;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,CAuH5B","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=\"container\">\n        <div class=\"snippet-view ${this.viewSize}\">\n          ${this.ellipsisJoinedSnippets}\n        </div>\n      </div>\n    `;\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(/{{{(.+?)}}}/gs);\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: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        width: calc(100% - 10px);\n        border-left: 5px solid #194880;\n        margin-top: var(--containerTopMargin, 10px);\n        margin-left: var(--containerLeftMargin, 0px);\n        border-radius: 3px;\n        box-sizing: border-box;\n      }\n\n      .snippet-view {\n        display: -webkit-box;\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        font-size: 14px;\n        overflow: hidden;\n        overflow-wrap: break-word;\n        -webkit-line-clamp: var(--maxLines, 3);\n        -webkit-box-orient: vertical;\n        margin-left: 5px;\n      }\n\n      .grid {\n        font-size: 1.2rem;\n        line-height: 1.5rem;\n      }\n\n      .list {\n        margin: 0;\n        padding-left: 15px;\n        font-size: 1.4rem;\n        line-height: 2rem;\n\n        /*\n         * Safari doesn't always respect the line-clamping rules,\n         * so we add this to ensure these fields still get truncated.\n         */\n        max-height: 6rem;\n      }\n\n      mark {\n        /* blue, 20% transparency */\n        background-color: #0000ff33;\n        color: inherit;\n      }\n    `;\n  }\n}\n"]}