@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

package/dist/src/sort-filter-bar/sort-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { SortParam } from '@internetarchive/search-service';\nimport { LitElement, html, css, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { CollectionDisplayMode } from '../models';\nimport './alpha-bar';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar extends LitElement {\n  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';\n\n  @property({ type: String }) sortDirection: 'asc' | 'desc' = 'desc';\n\n  @property({ type: String }) sortField = 'week';\n\n  @state() titleSelectorVisible: boolean = false;\n\n  @state() creatorSelectorVisible: boolean = false;\n\n  @state() dateSortSelectorVisible = false;\n\n  render() {\n    return html`\n      <div id=\"sort-bar\">\n        <div id=\"sort-selector\">\n          <ul>\n            <li>\n              <button\n                @click=${() => {\n                  this.sortDirection = 'desc';\n                }}\n              >\n                Desc\n              </button>\n              <button\n                @click=${() => {\n                  this.sortDirection = 'asc';\n                }}\n              >\n                Asc</button\n              >Sort By\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.sortField = 'week';\n                }}\n              >\n                Views\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.titleSelectorVisible = !this.titleSelectorVisible;\n                  this.sortField = 'titleSorter';\n                }}\n              >\n                Title\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n                }}\n              >\n                Date Archived\n              </button>\n            </li>\n            <li>\n              <button\n                @click=${() => {\n                  this.creatorSelectorVisible = !this.creatorSelectorVisible;\n                  this.sortField = 'creatorSorter';\n                }}\n              >\n                Creator\n              </button>\n            </li>\n          </ul>\n        </div>\n\n        <div id=\"display-style\">\n          <ul>\n            ${this.displayMode !== 'grid'\n              ? html`<li>\n                  <input type=\"checkbox\" @click=${this.detailSelected} />\n                  Details\n                </li>`\n              : nothing}\n\n            <li>\n              <button id=\"grid-button\" @click=${this.gridSelected}>Grid</button>\n            </li>\n            <li>\n              <button id=\"list-button\" @click=${this.listSelected}>List</button>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n      ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}\n      ${this.titleSelectorVisible ? this.titleSelectorBar : nothing}\n      ${this.creatorSelectorVisible ? this.creatorSelectorBar : nothing}\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('sortDirection') || changed.has('sortField')) {\n      this.sortChanged();\n    }\n  }\n\n  private get dateSortSelector() {\n    return html`\n      <div id=\"date-sort-selector\">\n        <ul>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'publicdate';\n              }}\n            >\n              Date Archived\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'date';\n              }}\n            >\n              Date Published\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'reviewdate';\n              }}\n            >\n              Date Reviewed\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.sortField = 'addeddate';\n              }}\n            >\n              Date Added\n            </button>\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      headline=\"Title Starts With\"\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      headline=\"Creator Starts With\"\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('titleLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('creatorLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private gridSelected() {\n    this.displayMode = 'grid';\n  }\n\n  private listSelected() {\n    this.displayMode = 'list-compact';\n  }\n\n  private detailSelected(e: Event) {\n    this.displayMode = (e.target as HTMLInputElement).checked\n      ? 'list-detail'\n      : 'list-compact';\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent('displayModeChanged', {\n      detail: { displayMode: this.displayMode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private sortChanged() {\n    const sort = new SortParam(this.sortField, this.sortDirection);\n    const event = new CustomEvent('sortChanged', {\n      detail: { sort },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static styles = css`\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0;\n      align-items: center;\n    }\n\n    li {\n      padding: 0.5rem 0 0.5rem 0;\n    }\n\n    #sort-selector li::after {\n      content: '•';\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n\n    #sort-selector li:first-child::after {\n      content: '';\n    }\n\n    #sort-selector li:last-child::after {\n      content: '';\n    }\n  `;\n}\n"]}
+{"version":3,"file":"sort-filter-bar.js","sourceRoot":"","sources":["../../../src/sort-filter-bar/sort-filter-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  LitElement,\n  html,\n  css,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport {\n  CollectionDisplayMode,\n  SortField,\n  SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n  @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  @property({ type: Boolean }) showRelevance: boolean = true;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  @state() titleSelectorVisible: boolean = false;\n\n  @state() creatorSelectorVisible: boolean = false;\n\n  @state() dateSortSelectorVisible = false;\n\n  @state() desktopSelectorBarWidth = 0;\n\n  @state() selectorBarContainerWidth = 0;\n\n  @query('#desktop-sort-selector')\n  private desktopSortSelector!: HTMLUListElement;\n\n  @query('#sort-selector-container')\n  private sortSelectorContainer!: HTMLDivElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        ${this.titleSelectorVisible || this.selectedSort === 'title'\n          ? this.titleSelectorBar\n          : nothing}\n        ${this.creatorSelectorVisible || this.selectedSort === 'creator'\n          ? this.creatorSelectorBar\n          : nothing}\n\n        <div id=\"sort-bar\">\n          <div id=\"sort-direction-container\">\n            ${this.sortDirectionSelectorTemplate}\n          </div>\n\n          <div id=\"sort-selector-container\">\n            ${this.mobileSortSelectorTemplate}\n            ${this.desktopSortSelectorTemplate}\n          </div>\n\n          <div id=\"display-style-selector\">${this.displayOptionTemplate}</div>\n        </div>\n\n        ${this.dateSortSelectorVisible ? this.dateSortSelector : nothing}\n\n        <div id=\"bottom-shadow\"></div>\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\n    }\n\n    if (changed.has('selectedSort') && this.sortDirection === null) {\n      this.sortDirection = 'desc';\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.titleSelectorVisible = true;\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.creatorSelectorVisible = true;\n    }\n\n    if (changed.has('resizeObserver')) {\n      const oldObserver = changed.get(\n        'resizeObserver'\n      ) as SharedResizeObserverInterface;\n      if (oldObserver) this.disconnectResizeObserver(oldObserver);\n      this.setupResizeObserver();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver) {\n      this.disconnectResizeObserver(this.resizeObserver);\n    }\n  }\n\n  private disconnectResizeObserver(\n    resizeObserver: SharedResizeObserverInterface\n  ) {\n    resizeObserver.removeObserver({\n      target: this.sortSelectorContainer,\n      handler: this,\n    });\n\n    resizeObserver.removeObserver({\n      target: this.desktopSortSelector,\n      handler: this,\n    });\n  }\n\n  private setupResizeObserver() {\n    if (!this.resizeObserver) return;\n    this.resizeObserver.addObserver({\n      target: this.sortSelectorContainer,\n      handler: this,\n    });\n\n    this.resizeObserver.addObserver({\n      target: this.desktopSortSelector,\n      handler: this,\n    });\n  }\n\n  private get mobileSelectorVisible() {\n    return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    if (entry.target === this.desktopSortSelector)\n      this.desktopSelectorBarWidth = entry.contentRect.width;\n    else if (entry.target === this.sortSelectorContainer)\n      this.selectorBarContainerWidth = entry.contentRect.width;\n  }\n\n  private get sortDirectionSelectorTemplate() {\n    return html`\n      <div id=\"sort-direction-selector\">\n        <button\n          id=\"sort-ascending-btn\"\n          class=\"sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}\"\n          ?disabled=${this.selectedSort === 'relevance'}\n          @click=${() => {\n            this.setSortDirections('asc');\n          }}\n        >\n          ${sortIcon}\n        </button>\n        <button\n          id=\"sort-descending-btn\"\n          class=\"sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}\"\n          ?disabled=${this.selectedSort === 'relevance'}\n          @click=${() => {\n            this.setSortDirections('desc');\n          }}\n        >\n          ${sortIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  private get desktopSortSelectorTemplate() {\n    return html`\n      <ul\n        id=\"desktop-sort-selector\"\n        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n      >\n        <li id=\"sort-by-text\">Sort By</li>\n        <li>\n          ${this.showRelevance\n            ? this.getSortDisplayOption(SortField.relevance)\n            : nothing}\n        </li>\n        <li>${this.getSortDisplayOption(SortField.views)}</li>\n        <li>${this.getSortDisplayOption(SortField.title)}</li>\n        <li>\n          ${this.getSortDisplayOption(SortField.datearchived, {\n            additionalClickEvent: () => {\n              this.dateSortSelectorVisible = !this.dateSortSelectorVisible;\n            },\n            displayName: html`${this.dateSortField}`,\n            isSelected: () => this.dateOptionSelected,\n          })}\n        </li>\n        <li>\n          ${this.getSortDisplayOption(SortField.creator, {\n            additionalClickEvent: () => {\n              this.creatorSelectorVisible = !this.creatorSelectorVisible;\n            },\n          })}\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * This generates each of the sort option links.\n   *\n   * It manages the display value and the selected state of the option.\n   *\n   * @param sortField\n   * @param options {\n   *    additionalClickEvent?: () => void; If this is provided, it will also be called when the option is clicked.\n   *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.\n   *    isSelected?: () => boolean; A function that returns true if the option is selected. Defaults to the selectedSort === sortField.\n   * }\n   * @returns\n   */\n  private getSortDisplayOption(\n    sortField: SortField,\n    options?: {\n      additionalClickEvent?: (e: Event) => void;\n      isSelected?: () => boolean;\n      displayName?: TemplateResult;\n    }\n  ): TemplateResult {\n    const isSelected =\n      options?.isSelected ?? (() => this.selectedSort === sortField);\n    const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n    return html`\n      <a\n        href=\"#\"\n        @click=${(e: Event) => {\n          e.preventDefault();\n          this.setSelectedSort(sortField);\n          options?.additionalClickEvent?.(e);\n        }}\n        class=${isSelected() ? 'selected' : ''}\n      >\n        ${displayName}\n      </a>\n    `;\n  }\n\n  private get mobileSortSelectorTemplate() {\n    return html`\n      <select\n        id=\"mobile-sort-selector\"\n        @change=${this.mobileSortChanged}\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n      >\n        ${Object.keys(SortField).map(\n          field => html`\n            <option value=\"${field}\" ?selected=${this.selectedSort === field}>\n              ${SortFieldDisplayName[field as SortField]}\n            </option>\n          `\n        )}\n      </select>\n    `;\n  }\n\n  private mobileSortChanged(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    this.setSelectedSort(target.value as SortField);\n  }\n\n  private get displayOptionTemplate() {\n    return html`\n      <ul>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'grid';\n            }}\n            class=${this.displayMode === 'grid' ? 'active' : ''}\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  private get dateSortSelector() {\n    return html`\n      <div id=\"date-sort-selector\">\n        <ul>\n          <li>${this.getDateSortButton(SortField.datearchived)}</li>\n          <li>${this.getDateSortButton(SortField.datepublished)}</li>\n          <li>${this.getDateSortButton(SortField.datereviewed)}</li>\n          <li>${this.getDateSortButton(SortField.dateadded)}</li>\n        </ul>\n      </div>\n    `;\n  }\n\n  private getDateSortButton(sortField: SortField) {\n    return html`\n      <button\n        @click=${() => {\n          this.selectDateSort(sortField);\n        }}\n      >\n        ${SortFieldDisplayName[sortField]}\n      </button>\n    `;\n  }\n\n  private selectDateSort(sortField: SortField) {\n    this.dateSortSelectorVisible = false;\n    this.setSelectedSort(sortField);\n  }\n\n  private setSortDirections(sortDirection: 'asc' | 'desc') {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  private setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    this.emitSortChangedEvent();\n  }\n\n  /**\n   * There are four date sort options.\n   *\n   * This checks to see if the current sort is one of them.\n   *\n   * @readonly\n   * @private\n   * @type {boolean}\n   * @memberof SortFilterBar\n   */\n  private get dateOptionSelected(): boolean {\n    return [\n      'datearchived',\n      'datepublished',\n      'datereviewed',\n      'dateadded',\n    ].includes(this.selectedSort);\n  }\n\n  /**\n   * The display name of the current date field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get dateSortField(): string {\n    const defaultSort = SortFieldDisplayName[SortField.datearchived];\n    return this.dateOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('titleLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    const event = new CustomEvent('creatorLetterChanged', {\n      detail: { selectedLetter: e.detail.selectedLetter },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent('displayModeChanged', {\n      detail: { displayMode: this.displayMode },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private emitSortChangedEvent() {\n    const event = new CustomEvent<{\n      selectedSort: SortField;\n      sortDirection: 'asc' | 'desc' | null;\n    }>('sortChanged', {\n      detail: {\n        selectedSort: this.selectedSort,\n        sortDirection: this.sortDirection,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static styles = css`\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n      border: 1px solid rgb(232, 232, 232);\n      align-items: center;\n      padding: 0.5rem 1.5rem;\n    }\n\n    #sort-direction-container {\n      flex: 0;\n    }\n\n    #sort-by-text {\n      text-transform: uppercase;\n    }\n\n    #bottom-shadow {\n      height: 1px;\n      width: 100%;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n      background-color: #bbb;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      margin: 0;\n      padding: 0;\n      align-items: center;\n    }\n\n    li {\n      padding: 0;\n    }\n\n    .sort-button {\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      outline: inherit;\n      width: 12px;\n      height: 12px;\n      opacity: 0.5;\n    }\n\n    .sort-button.selected {\n      opacity: 1;\n    }\n\n    .sort-button:disabled {\n      opacity: 0.25;\n      cursor: default;\n    }\n\n    #show-details {\n      text-transform: uppercase;\n      cursor: pointer;\n      display: flex;\n    }\n\n    #show-details input {\n      margin-right: 0.5rem;\n      flex: 0 0 12px;\n    }\n\n    #sort-descending-btn {\n      transform: rotate(180deg);\n    }\n\n    #sort-direction-selector {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n      margin-right: 1rem;\n    }\n\n    #sort-selector-container {\n      flex: 1;\n    }\n\n    /*\n      we move the desktop sort selector offscreen instead of display: none\n      because we need to observe the width of it vs its container to determine\n      if it's wide enough to display the desktop version and if you displY: none,\n      the width becomes 0\n    */\n    #desktop-sort-selector.hidden {\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n    }\n\n    #mobile-sort-selector.hidden {\n      display: none;\n    }\n\n    #desktop-sort-selector {\n      display: inline-flex;\n    }\n\n    #desktop-sort-selector li {\n      display: flex;\n      align-items: center;\n    }\n\n    #desktop-sort-selector li a {\n      text-decoration: none;\n      text-transform: uppercase;\n      font-size: 1.4rem;\n      color: #333;\n    }\n\n    #desktop-sort-selector li a.selected {\n      font-weight: bold;\n    }\n\n    #desktop-sort-selector li::after {\n      content: '•';\n      padding-left: 1rem;\n      padding-right: 1rem;\n    }\n\n    #desktop-sort-selector li:first-child::after {\n      content: '';\n    }\n\n    #desktop-sort-selector li:last-child::after {\n      content: '';\n    }\n\n    #display-style-selector {\n      flex: 0;\n    }\n\n    #display-style-selector button {\n      background: none;\n      color: inherit;\n      border: none;\n      appearance: none;\n      cursor: pointer;\n      -webkit-appearance: none;\n      opacity: 0.5;\n    }\n\n    #display-style-selector button.active {\n      opacity: 1;\n    }\n\n    #display-style-selector button svg {\n      width: 24px;\n      height: 24px;\n    }\n  `;\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { localized, msg } from '@lit/localize';
+import { msg } from '@lit/localize';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
@@ -153,7 +153,6 @@ __decorate([
     property({ type: Object })
 ], CollectionTile.prototype, "model", void 0);
 CollectionTile = __decorate([
-    localized(),
     customElement('collection-tile')
 ], CollectionTile);
 export { CollectionTile };

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

@@ -1 +1 @@
-{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAK7E,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;;;uCAGwB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;;8EAIsB,MAAA,IAAI;aACjE,KAAK,0CAAE,UAAU;;;;;iDAKe,cAAc;;mCAE5B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,cAAc,EAAE;mCACtC,GAAG,CAAC,OAAO,CAAC;;;;KAI1C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;kCA0BoB,eAAe;mCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;yBAuBzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;qCAwBH,eAAe;sCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyChD,CAAC;IACJ,CAAC;CACF,CAAA;AAnJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAF1B,SAAS,EAAE;IACX,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoJ1B;SApJY,cAAc","sourcesContent":["import { localized, msg } from '@lit/localize';\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { TileModel } from '../../models';\n\n@localized()\n@customElement('collection-tile')\nexport class CollectionTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"collection-image-title\">\n          <div id=\"collection-title\">${this.model?.title}</div>\n          <div id=\"collection-image-container\">\n            <div\n              id=\"collection-image\"\n              style=\"background-image:url('https://archive.org/services/img/${this\n                .model?.identifier}')\"\n            ></div>\n          </div>\n        </div>\n        <div id=\"item-count-container\">\n          <div id=\"item-count-image-container\">${collectionIcon}</div>\n          <div id=\"item-count-stacked-text\">\n            <div id=\"item-count\">${this.model?.itemCount.toLocaleString()}</div>\n            <div id=\"items-text\">${msg('items')}</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #collection-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #collection-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-count-image-container svg {\n        filter: invert(100%);\n      }\n\n      #collection-image-title {\n        background-color: #666;\n        border: 1px solid #2c2c2c;\n        padding: 0.5rem;\n        border-top-left-radius: ${cornerRadiusCss};\n        border-top-right-radius: ${cornerRadiusCss};\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n      }\n\n      #collection-title {\n        font-weight: bold;\n        color: #fff;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #container {\n        box-shadow: 1px 1px 2px 0px;\n        border-radius: ${cornerRadiusCss};\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #container:hover > #collection-image-title > #collection-title {\n        text-decoration: underline;\n      }\n\n      /* this is a workaround for Safari 15 where the hover effects are not working */\n      #collection-image-title:hover > #collection-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #collection-image-title {\n        background-color: #757575;\n      }\n\n      #item-count-container {\n        background-color: #444;\n        border-bottom: 1px solid #2c2c2c;\n        border-left: 1px solid #2c2c2c;\n        border-right: 1px solid #2c2c2c;\n        border-bottom-left-radius: ${cornerRadiusCss};\n        border-bottom-right-radius: ${cornerRadiusCss};\n        display: flex;\n        padding: 0rem 0.5rem;\n        height: 5.5rem;\n        align-items: center;\n      }\n\n      #item-count-image-container {\n        margin-right: 0.5rem;\n      }\n\n      #item-count-stacked-text {\n        display: flex;\n        align-items: baseline;\n        color: #fff;\n      }\n      #item-count-image-container svg {\n        height: 2.5rem;\n        align-items: baseline;\n      }\n\n      #container:hover > #item-count-container {\n        background-color: #575757;\n      }\n\n      #item-count {\n        font-size: 1.4rem;\n        font-weight: bold;\n      }\n\n      #item-count-image {\n        width: 3rem;\n        height: 3rem;\n        margin-right: 1rem;\n      }\n\n      #items-text {\n        font-size: 1.4rem;\n        font-weight: bold;\n        margin-left: 0.5rem;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"collection-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/collection-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAI7E,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAG5C,MAAM;;QACJ,OAAO,IAAI,CAAA;;;uCAGwB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;;8EAIsB,MAAA,IAAI;aACjE,KAAK,0CAAE,UAAU;;;;;iDAKe,cAAc;;mCAE5B,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,CAAC,cAAc,EAAE;mCACtC,GAAG,CAAC,OAAO,CAAC;;;;KAI1C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;kCA0BoB,eAAe;mCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;yBAuBzB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;qCAwBH,eAAe;sCACd,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyChD,CAAC;IACJ,CAAC;CACF,CAAA;AAnJ6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB;AADnC,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAoJ1B;SApJY,cAAc","sourcesContent":["import { msg } from '@lit/localize';\nimport { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { collectionIcon } from '../../assets/img/icons/mediatype/collection';\nimport { TileModel } from '../../models';\n\n@customElement('collection-tile')\nexport class CollectionTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"collection-image-title\">\n          <div id=\"collection-title\">${this.model?.title}</div>\n          <div id=\"collection-image-container\">\n            <div\n              id=\"collection-image\"\n              style=\"background-image:url('https://archive.org/services/img/${this\n                .model?.identifier}')\"\n            ></div>\n          </div>\n        </div>\n        <div id=\"item-count-container\">\n          <div id=\"item-count-image-container\">${collectionIcon}</div>\n          <div id=\"item-count-stacked-text\">\n            <div id=\"item-count\">${this.model?.itemCount.toLocaleString()}</div>\n            <div id=\"items-text\">${msg('items')}</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #collection-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #collection-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-count-image-container svg {\n        filter: invert(100%);\n      }\n\n      #collection-image-title {\n        background-color: #666;\n        border: 1px solid #2c2c2c;\n        padding: 0.5rem;\n        border-top-left-radius: ${cornerRadiusCss};\n        border-top-right-radius: ${cornerRadiusCss};\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n      }\n\n      #collection-title {\n        font-weight: bold;\n        color: #fff;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #container {\n        box-shadow: 1px 1px 2px 0px;\n        border-radius: ${cornerRadiusCss};\n        height: 100%;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #container:hover > #collection-image-title > #collection-title {\n        text-decoration: underline;\n      }\n\n      /* this is a workaround for Safari 15 where the hover effects are not working */\n      #collection-image-title:hover > #collection-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #collection-image-title {\n        background-color: #757575;\n      }\n\n      #item-count-container {\n        background-color: #444;\n        border-bottom: 1px solid #2c2c2c;\n        border-left: 1px solid #2c2c2c;\n        border-right: 1px solid #2c2c2c;\n        border-bottom-left-radius: ${cornerRadiusCss};\n        border-bottom-right-radius: ${cornerRadiusCss};\n        display: flex;\n        padding: 0rem 0.5rem;\n        height: 5.5rem;\n        align-items: center;\n      }\n\n      #item-count-image-container {\n        margin-right: 0.5rem;\n      }\n\n      #item-count-stacked-text {\n        display: flex;\n        align-items: baseline;\n        color: #fff;\n      }\n      #item-count-image-container svg {\n        height: 2.5rem;\n        align-items: baseline;\n      }\n\n      #container:hover > #item-count-container {\n        background-color: #575757;\n      }\n\n      #item-count {\n        font-size: 1.4rem;\n        font-weight: bold;\n      }\n\n      #item-count-image {\n        width: 3rem;\n        height: 3rem;\n        margin-right: 1rem;\n      }\n\n      #items-text {\n        font-size: 1.4rem;\n        font-weight: bold;\n        margin-left: 0.5rem;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,8 +1,12 @@
 import { CSSResultGroup, LitElement } from 'lit';
+import '@internetarchive/collection-name-cache';
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import { TileModel } from '../../models';
 import '../../mediatype-icon';
 export declare class ItemTile extends LitElement {
     model?: TileModel;
+    baseNavigationUrl?: string;
+    collectionNameCache?: CollectionNameCacheInterface;
     get renderItemImageView(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): CSSResultGroup;

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

@@ -1,6 +1,8 @@
 import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import '@internetarchive/collection-name-cache';
 import { formatCount } from '../../utils/format-count';
 import '../../mediatype-icon';
 import { favoriteFilledIcon } from './icons/favorite-filled';
@@ -9,34 +11,47 @@ import viewsIcon from './icons/views';
 let ItemTile = class ItemTile extends LitElement {
     get renderItemImageView() {
         var _a, _b;
-        const imgSrcUrl = `https://archive.org/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
-        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collection.includes('deemphasize');
-        return !containsDeemphasize
-            ? html `<div
-          id="item-image"
+        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}`;
+        const containsDeemphasize = (_b = this.model) === null || _b === void 0 ? void 0 : _b.collections.includes('deemphasize');
+        const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';
+        const itemImageClass = `item-image ${!containsDeemphasize ? 'default' : 'deemphasize'}`;
+        const tileActionClass = `tile-action no-preview${!containsDeemphasize ? ' hidden' : ''}`;
+        return html `
+      <div class=${itemImageBoxClass}>
+        <div
+          class=${itemImageClass}
           style="background-image:url(${imgSrcUrl})"
-        ></div>`
-            : html `<div id="item-image-box">
-          <div
-            id="item-image-deemphasize"
-            style="background-image:url(${imgSrcUrl})"
-          ></div>
-          <div class="tile-action no-preview">Content may be inappropriate</div>
-        </div>`;
+        ></div>
+        <div class=${tileActionClass}>Content may be inappropriate</div>
+      </div>
+    `;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || '';
-        const itemCreator = ((_b = this.model) === null || _b === void 0 ? void 0 : _b.creator) || '-';
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const collectionIdentifier = (_a = this.model) === null || _a === void 0 ? void 0 : _a.collections[0];
+        const collectionUrl = `${this.baseNavigationUrl}/details/${collectionIdentifier}`;
+        const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.collections[0]}`;
+        const itemTitle = ((_c = this.model) === null || _c === void 0 ? void 0 : _c.title) || '';
+        const itemCreator = ((_d = this.model) === null || _d === void 0 ? void 0 : _d.creator) || '-';
         return html `
       <div id="container">
-        <div id="title-image-container">
-          <p id="item-title" title=${itemTitle}>
-            ${(_c = this.model) === null || _c === void 0 ? void 0 : _c.title}
-          </p>
-          <div id="item-image-container">
-            ${this.renderItemImageView}
+        <a href=${collectionUrl}>
+          <div id="stealth-popup">
+            <div
+              id="collection-thumbnail"
+              style="background-image:url(${imgSrcUrl})"
+            ></div>
+            <div id="collection-title-text">
+              <async-collection-name
+                .collectionNameCache=${this.collectionNameCache}
+                .identifier=${collectionIdentifier}
+              ></async-collection-name>
+            </div>
           </div>
+        </a>
+        <div id="title-image-container">
+          <h1 id="item-title" title=${itemTitle}>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.title}</h1>
+          <div id="item-image-container">${this.renderItemImageView}</div>
           <div class="item-creator">
             <span id="text-by">By:</span>
             <span>${itemCreator}</span>
@@ -45,19 +60,29 @@ let ItemTile = class ItemTile extends LitElement {
         <div id="item-stats-container">
           <div id="stats-holder">
             <div class="col">
-              <mediatype-icon mediatype="${(_d = this.model) === null || _d === void 0 ? void 0 : _d.mediatype}" showText="true">
+              <mediatype-icon
+                .mediatype=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.mediatype}
+                ?showText=${true}
+              >
+              </mediatype-icon>
             </div>
             <div class="col">
               ${viewsIcon}
-              <p class="status-text">${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.viewCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${favoriteFilledIcon}
-              <p class="status-text">${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_h = this.model) === null || _h === void 0 ? void 0 : _h.itemCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${reviewsIcon}
-              <p class="status-text">${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}</p>
+              <p class="status-text">
+                ${formatCount((_j = this.model) === null || _j === void 0 ? void 0 : _j.favCount, 'short', 'short')}
+              </p>
             </div>
           </div>
         </div>
@@ -74,6 +99,11 @@ let ItemTile = class ItemTile extends LitElement {
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
+      }
+
+      mediatype-icon {
+        --iconHeight: 10px;
       }
 
       #title-image-container {
@@ -105,41 +135,39 @@ let ItemTile = class ItemTile extends LitElement {
         flex: 1;
       }
 
-      #item-image {
+      .item-image-box {
         width: 16rem;
         height: 16rem;
-        border-radius: 0.8rem;
         overflow: hidden;
+        position: relative;
         box-shadow: 1px 1px 2px 0px;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
+        display: flex;
       }
 
-      #item-image-box {
+      .item-image {
         width: 16rem;
         height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        border: 5px solid #0000000;
+        object-fit: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
         position: relative;
-        display: flex;
+        -webkit-appearance: none;
+        overflow: visible;
       }
 
-      #item-image-deemphasize {
-        width: 16rem;
-        height: 16rem;
-        object-fit: cover;
-        background-position: center;
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .deemphasize {
         background-size: cover;
         filter: blur(15px);
-        position: absolute;
         z-index: 1;
       }
 
       .tile-action {
-        border: 2px solid currentColor;
+        border: 1px solid currentColor;
         border-radius: 1px;
         padding: 5px;
         font-weight: 500;
@@ -175,7 +203,6 @@ let ItemTile = class ItemTile extends LitElement {
         background-color: #fcfcfc;
       }
 
-      /**  creator **/
       .item-creator {
         color: #000000;
         display: -webkit-box;
@@ -227,12 +254,74 @@ let ItemTile = class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
+
+      #container:hover #stealth-popup {
+        margin-top: -25px;
+        visibility: visible;
+        opacity: 1;
+      }
+
+      #stealth-popup {
+        transition: margin-top 0.3s ease, opacity 0.3s ease;
+        position: absolute;
+        visibility: hidden;
+        margin-left: -10px;
+        text-align: left;
+        display: flex;
+        padding: 5px;
+        width: 96%;
+        background: #f5f5f7 100%;
+        border: 1px #2c2c2c;
+        border-radius: ${cornerRadiusCss};
+        box-shadow: 1px 1px 2px 0px;
+      }
+
+      #collection-thumbnail {
+        display: flex;
+        transition: opacity 0.3s ease;
+        width: 3rem;
+        height: 3rem;
+        flex: 0 0 3rem;
+        border-radius: 8px;
+        border: 1px solid #ddd;
+        overflow: hidden;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+
+      #collection-title-text {
+        line-height: 1;
+        font-size: 16px;
+        font-weight: bold;
+        text-align: left;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        height: 3.5rem;
+        display: -webkit-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      a {
+        color: #333;
+        text-decoration: none;
+        display: block;
+      }
     `;
     }
 };
 __decorate([
     property({ type: Object })
 ], ItemTile.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], ItemTile.prototype, "baseNavigationUrl", void 0);
+__decorate([
+    property({ type: Object })
+], ItemTile.prototype, "collectionNameCache", void 0);
 ItemTile = __decorate([
     customElement('item-tile')
 ], ItemTile);

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":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAE9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAGtC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAGtC,IAAI,mBAAmB;;QACrB,MAAM,SAAS,GAAG,oCAAoC,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,EAAE,CAAC;QAC/E,MAAM,mBAAmB,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QAC3E,OAAO,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;wCAE4B,SAAS;gBACjC;YACV,CAAC,CAAC,IAAI,CAAA;;;0CAG8B,SAAS;;;eAGpC,CAAC;IACd,CAAC;IAED,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,EAAE,CAAC;QAC1C,MAAM,WAAW,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,KAAI,GAAG,CAAC;QAE/C,OAAO,IAAI,CAAA;;;qCAGsB,SAAS;cAChC,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK;;;cAGjB,IAAI,CAAC,mBAAmB;;;;oBAIlB,WAAW;;;;;;2CAOf,MAAA,IAAI,CAAC,KAAK,0CAAE,SACd;;;gBAGE,SAAS;uCACc,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,kBAAkB;uCACK,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EACrB,OAAO,EACP,OAAO,CACR;;;gBAGC,WAAW;uCACY,WAAW,CAClC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EACpB,OAAO,EACP,OAAO,CACR;;;;;KAKV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JnC,CAAC;IACJ,CAAC;CACF,CAAA;AAhP6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AADnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiPpB;SAjPY,QAAQ","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  get renderItemImageView() {\n    const imgSrcUrl = `https://archive.org/services/img/${this.model?.identifier}`;\n    const containsDeemphasize = this.model?.collection.includes('deemphasize');\n    return !containsDeemphasize\n      ? html`<div\n          id=\"item-image\"\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>`\n      : html`<div id=\"item-image-box\">\n          <div\n            id=\"item-image-deemphasize\"\n            style=\"background-image:url(${imgSrcUrl})\"\n          ></div>\n          <div class=\"tile-action no-preview\">Content may be inappropriate</div>\n        </div>`;\n  }\n\n  render() {\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <div id=\"title-image-container\">\n          <p id=\"item-title\" title=${itemTitle}>\n            ${this.model?.title}\n          </p>\n          <div id=\"item-image-container\">\n            ${this.renderItemImageView}\n          </div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon mediatype=\"${\n                this.model?.mediatype\n              }\" showText=\"true\">\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.viewCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.itemCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">${formatCount(\n                this.model?.favCount,\n                'short',\n                'short'\n              )}</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      #item-image {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n      }\n\n      #item-image-box {\n        width: 16rem;\n        height: 16rem;\n        border-radius: 0.8rem;\n        overflow: hidden;\n        box-shadow: 1px 1px 2px 0px;\n        border: 5px solid #0000000;\n        position: relative;\n        display: flex;\n      }\n\n      #item-image-deemphasize {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-position: center;\n        background-size: cover;\n        filter: blur(15px);\n        position: absolute;\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 2px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      /**  creator **/\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\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 { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '@internetarchive/collection-name-cache';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport '../../mediatype-icon';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\n@customElement('item-tile')\nexport class ItemTile 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  get renderItemImageView() {\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;\n\n    const containsDeemphasize = this.model?.collections.includes('deemphasize');\n    const itemImageBoxClass = containsDeemphasize ? 'item-image-box' : '';\n    const itemImageClass = `item-image ${\n      !containsDeemphasize ? 'default' : 'deemphasize'\n    }`;\n    const tileActionClass = `tile-action no-preview${\n      !containsDeemphasize ? ' hidden' : ''\n    }`;\n\n    return html`\n      <div class=${itemImageBoxClass}>\n        <div\n          class=${itemImageClass}\n          style=\"background-image:url(${imgSrcUrl})\"\n        ></div>\n        <div class=${tileActionClass}>Content may be inappropriate</div>\n      </div>\n    `;\n  }\n\n  render() {\n    const collectionIdentifier = this.model?.collections[0];\n    const collectionUrl = `${this.baseNavigationUrl}/details/${collectionIdentifier}`;\n\n    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;\n    const itemTitle = this.model?.title || '';\n    const itemCreator = this.model?.creator || '-';\n\n    return html`\n      <div id=\"container\">\n        <a href=${collectionUrl}>\n          <div id=\"stealth-popup\">\n            <div\n              id=\"collection-thumbnail\"\n              style=\"background-image:url(${imgSrcUrl})\"\n            ></div>\n            <div id=\"collection-title-text\">\n              <async-collection-name\n                .collectionNameCache=${this.collectionNameCache}\n                .identifier=${collectionIdentifier}\n              ></async-collection-name>\n            </div>\n          </div>\n        </a>\n        <div id=\"title-image-container\">\n          <h1 id=\"item-title\" title=${itemTitle}>${this.model?.title}</h1>\n          <div id=\"item-image-container\">${this.renderItemImageView}</div>\n          <div class=\"item-creator\">\n            <span id=\"text-by\">By:</span>\n            <span>${itemCreator}</span>\n          </div>\n        </div>\n        <div id=\"item-stats-container\">\n          <div id=\"stats-holder\">\n            <div class=\"col\">\n              <mediatype-icon\n                .mediatype=${this.model?.mediatype}\n                ?showText=${true}\n              >\n              </mediatype-icon>\n            </div>\n            <div class=\"col\">\n              ${viewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.viewCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${favoriteFilledIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.itemCount, 'short', 'short')}\n              </p>\n            </div>\n            <div class=\"col\">\n              ${reviewsIcon}\n              <p class=\"status-text\">\n                ${formatCount(this.model?.favCount, 'short', 'short')}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n    return css`\n      #container {\n        background-color: #ffffff;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n      }\n\n      mediatype-icon {\n        --iconHeight: 10px;\n      }\n\n      #title-image-container {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: 0.5rem;\n      }\n\n      #item-title {\n        font-weight: bold;\n        color: #000000;\n        font-size: 1.6rem;\n        text-align: center;\n        margin-top: 0rem;\n        margin-bottom: 0.5rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        line-height: 2rem;\n        height: 4rem;\n      }\n\n      #item-image-container {\n        display: flex;\n        justify-content: center;\n        flex: 1;\n      }\n\n      .item-image-box {\n        width: 16rem;\n        height: 16rem;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 1px 1px 2px 0px;\n        display: flex;\n      }\n\n      .item-image {\n        width: 16rem;\n        height: 16rem;\n        object-fit: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n        position: relative;\n        -webkit-appearance: none;\n        overflow: visible;\n      }\n\n      .default {\n        background-size: contain;\n        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));\n      }\n\n      .deemphasize {\n        background-size: cover;\n        filter: blur(15px);\n        z-index: 1;\n      }\n\n      .tile-action {\n        border: 1px solid currentColor;\n        border-radius: 1px;\n        padding: 5px;\n        font-weight: 500;\n        width: auto;\n        position: absolute;\n        z-index: 2;\n        display: flex;\n        top: 5.5rem;\n      }\n\n      .no-preview {\n        background-color: #fffecb;\n        color: #000000;\n        font-size: 1.4rem;\n        line-height: 2rem;\n        text-align: center;\n      }\n\n      .hidden {\n        display: none;\n      }\n\n      #container:hover > #title-image-container > .item-title {\n        text-decoration: underline;\n      }\n\n      /** this is a workaround for Safari 15 where the hover effects are not working */\n      #title-image-container:hover > #item-title {\n        text-decoration: underline;\n      }\n\n      #container:hover > #item-title {\n        background-color: #fcfcfc;\n      }\n\n      .item-creator {\n        color: #000000;\n        display: -webkit-box;\n        font-size: 1.4rem;\n        height: 3rem;\n        margin: 0px;\n        overflow: hidden;\n        padding: 0.5rem;\n        text-align: center;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      #text-by {\n        font-weight: bold;\n      }\n\n      #item-stats-container {\n        align-items: center;\n        display: flex;\n        height: 5.5rem;\n        padding-left: 1rem;\n        padding-right: 0.5rem;\n      }\n\n      #stats-holder {\n        align-items: center;\n        display: flex;\n        flex: 1;\n        justify-content: space-evenly;\n        text-align: center;\n        width: 100%;\n      }\n\n      svg {\n        height: 10px;\n        width: 10px;\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: center;\n      }\n\n      .col {\n        width: 25%;\n      }\n\n      #container:hover #stealth-popup {\n        margin-top: -25px;\n        visibility: visible;\n        opacity: 1;\n      }\n\n      #stealth-popup {\n        transition: margin-top 0.3s ease, opacity 0.3s ease;\n        position: absolute;\n        visibility: hidden;\n        margin-left: -10px;\n        text-align: left;\n        display: flex;\n        padding: 5px;\n        width: 96%;\n        background: #f5f5f7 100%;\n        border: 1px #2c2c2c;\n        border-radius: ${cornerRadiusCss};\n        box-shadow: 1px 1px 2px 0px;\n      }\n\n      #collection-thumbnail {\n        display: flex;\n        transition: opacity 0.3s ease;\n        width: 3rem;\n        height: 3rem;\n        flex: 0 0 3rem;\n        border-radius: 8px;\n        border: 1px solid #ddd;\n        overflow: hidden;\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center center;\n      }\n\n      #collection-title-text {\n        line-height: 1;\n        font-size: 16px;\n        font-weight: bold;\n        text-align: left;\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n        height: 3.5rem;\n        display: -webkit-box;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      a {\n        color: #333;\n        text-decoration: none;\n        display: block;\n      }\n    `;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import eyeIcon from '../../assets/img/icons/eye';
+let TileListCompactHeader = class TileListCompactHeader extends LitElement {
+    render() {
+        return html `
+      <div id="list-line-header" class="${this.classSize}">
+        <div id="thumb"></div>
+        <div id="title">Title</div>
+        <div id="date">Date Archived</div>
+        <div id="creator">Creator</div>
+        <div id="views">${eyeIcon}</div>
+        <div id="icon"></div>
+      </div>
+    `;
+    }
+    get classSize() {
+        var _a;
+        return ((_a = this.currentWidth) !== null && _a !== void 0 ? _a : 531) < 530 ? 'mobile' : 'desktop';
+    }
+    static get styles() {
+        return css `
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #views {
+        text-align: right;
+        /* Lower icon to align with text baseline */
+        line-height: 14px;
+      }
+      #views svg {
+        height: 18px;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: center;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-bottom: 2px;
+      }
+
+      #list-line-header.mobile {
+        grid-template-columns: 30px 3fr 29px 2fr 19px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], TileListCompactHeader.prototype, "model", void 0);
+__decorate([
+    property({ type: Number })
+], TileListCompactHeader.prototype, "currentWidth", void 0);
+__decorate([
+    property({ type: Object })
+], TileListCompactHeader.prototype, "sortParam", void 0);
+TileListCompactHeader = __decorate([
+    customElement('tile-list-compact-header')
+], TileListCompactHeader);
+export { TileListCompactHeader };
+//# sourceMappingURL=tile-list-compact-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-list-compact-header.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,OAAO,MAAM,4BAA4B,CAAC;AAIjD,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAOnD,MAAM;QACJ,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,SAAS;;;;;0BAK9B,OAAO;;;KAG5B,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;;QACnB,OAAO,CAAC,MAAA,IAAI,CAAC,YAAY,mCAAI,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCT,CAAC;IACJ,CAAC;CACF,CAAA;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAuB;AAEtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAuB;AALvC,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAmEjC;SAnEY,qBAAqB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport eyeIcon from '../../assets/img/icons/eye';\nimport { TileModel } from '../../models';\n\n@customElement('tile-list-compact-header')\nexport class TileListCompactHeader extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line-header\" class=\"${this.classSize}\">\n        <div id=\"thumb\"></div>\n        <div id=\"title\">Title</div>\n        <div id=\"date\">Date Archived</div>\n        <div id=\"creator\">Creator</div>\n        <div id=\"views\">${eyeIcon}</div>\n        <div id=\"icon\"></div>\n      </div>\n    `;\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n        font-weight: bold;\n        line-height: 20px;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #views {\n        text-align: right;\n        /* Lower icon to align with text baseline */\n        line-height: 14px;\n      }\n      #views svg {\n        height: 18px;\n      }\n\n      #list-line-header {\n        display: grid;\n        column-gap: 10px;\n        align-items: center;\n        padding-left: 1rem;\n        padding-right: 1rem;\n        padding-bottom: 2px;\n      }\n\n      #list-line-header.mobile {\n        grid-template-columns: 30px 3fr 29px 2fr 19px;\n      }\n\n      #list-line-header.desktop {\n        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -9,6 +9,7 @@ export declare class TileListCompact extends LitElement {
     currentHeight?: number;
     sortParam?: SortParam;
     render(): import("lit-html").TemplateResult<1>;
+    private get imageTemplate();
     private get date();
     private get classSize();
     private get formatSize();