@internetarchive/collection-browser 0.0.1-alpha.13 → 0.0.1-alpha.16

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 { LitElement, html, css, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { CollectionDisplayMode, SortField } from '../models';\nimport './alpha-bar';\n\nimport { sortIcon } from './img/sort-triangle';\nimport { gridIcon } from './img/grid';\nimport { listIcon } from './img/list';\n\nenum SortFieldName {\n  datearchived = 'Date Archived',\n  datepublished = 'Date Published',\n  datereviewed = 'Date Reviewed',\n  dateadded = 'Date Added',\n}\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar extends LitElement {\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  @property({ type: String }) sortDirection: 'asc' | 'desc' | null = null;\n\n  @property({ type: String }) selectedSort: 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  @state() titleSelectorVisible: boolean = false;\n\n  @state() creatorSelectorVisible: boolean = false;\n\n  @state() dateSortSelectorVisible = false;\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-selector\">\n            <ul>\n              <li>\n                <div id=\"sort-direction-container\">\n                  <button\n                    id=\"sort-ascending-btn\"\n                    class=\"sort-button ${this.sortDirection === 'asc'\n                      ? 'selected'\n                      : ''}\"\n                    @click=${() => {\n                      this.sortDirection = 'asc';\n                    }}\n                  >\n                    ${sortIcon}\n                  </button>\n                  <button\n                    id=\"sort-descending-btn\"\n                    class=\"sort-button ${this.sortDirection === 'desc'\n                      ? 'selected'\n                      : ''}\"\n                    @click=${() => {\n                      this.sortDirection = 'desc';\n                    }}\n                  >\n                    ${sortIcon}\n                  </button>\n                </div>\n              </li>\n              <li id=\"sort-by-text\">Sort By</li>\n              ${this.showRelevance\n                ? html`\n                    <li>\n                      <a\n                        href=\"#\"\n                        @click=${(e: Event) => {\n                          e.preventDefault();\n                          this.selectedSort = 'relevance';\n                        }}\n                        class=${this.selectedSort === 'relevance'\n                          ? 'selected'\n                          : ''}\n                      >\n                        Relevance\n                      </a>\n                    </li>\n                  `\n                : nothing}\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.selectedSort = 'views';\n                  }}\n                  class=${this.selectedSort === 'views' ? 'selected' : ''}\n                >\n                  Views\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.titleSelectorVisible = !this.titleSelectorVisible;\n                    this.selectedSort = 'title';\n                  }}\n                  class=${this.selectedSort === 'title' ? 'selected' : ''}\n                >\n                  Title\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.dateSortSelectorVisible =\n                      !this.dateSortSelectorVisible;\n                    this.selectedSort = 'datearchived';\n                  }}\n                  class=${this.dateOptionSelected ? 'selected' : ''}\n                >\n                  ${this.dateSortField}\n                </a>\n              </li>\n              <li>\n                <a\n                  href=\"#\"\n                  @click=${(e: Event) => {\n                    e.preventDefault();\n                    this.creatorSelectorVisible = !this.creatorSelectorVisible;\n                    this.selectedSort = 'creator';\n                  }}\n                  class=${this.selectedSort === 'creator' ? 'selected' : ''}\n                >\n                  Creator\n                </a>\n              </li>\n            </ul>\n          </div>\n\n          <div id=\"display-style\">\n            <ul>\n              ${this.displayMode !== 'grid'\n                ? html`<li>\n                    <label id=\"show-details\">\n                      <input\n                        type=\"checkbox\"\n                        @click=${this.detailSelected}\n                        ?checked=${this.displayMode === 'list-detail'}\n                      />\n                      Show Details\n                    </label>\n                  </li>`\n                : nothing}\n\n              <li>\n                <button\n                  id=\"grid-button\"\n                  @click=${this.gridSelected}\n                  class=${this.displayMode === 'grid' ? 'active' : ''}\n                >\n                  ${gridIcon}\n                </button>\n              </li>\n              <li>\n                <button\n                  id=\"list-button\"\n                  @click=${this.listSelected}\n                  class=${this.displayMode !== 'grid' ? 'active' : ''}\n                >\n                  ${listIcon}\n                </button>\n              </li>\n            </ul>\n          </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 (\n      (changed.has('sortDirection') || changed.has('selectedSort')) &&\n      this.sortDirection !== null\n    ) {\n      this.sortChanged();\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\n  private get dateSortSelector() {\n    return html`\n      <div id=\"date-sort-selector\">\n        <ul>\n          <li>\n            <button\n              @click=${() => {\n                this.selectedSort = 'datepublished';\n                this.dateSortSelectorVisible = false;\n              }}\n            >\n              Date Archived\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.selectedSort = 'datepublished';\n                this.dateSortSelectorVisible = false;\n              }}\n            >\n              Date Published\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.selectedSort = 'datereviewed';\n                this.dateSortSelectorVisible = false;\n              }}\n            >\n              Date Reviewed\n            </button>\n          </li>\n          <li>\n            <button\n              @click=${() => {\n                this.selectedSort = 'dateadded';\n                this.dateSortSelectorVisible = false;\n              }}\n            >\n              Date Added\n            </button>\n          </li>\n        </ul>\n      </div>\n    `;\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    return (\n      SortFieldName[this.selectedSort as keyof typeof SortFieldName] ??\n      'Date Archived'\n    );\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 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 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    #container {\n      margin: 0 1rem 2.5rem 1rem;\n    }\n\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-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    #show-details {\n      text-transform: uppercase;\n      cursor: pointer;\n    }\n\n    #sort-descending-btn {\n      transform: rotate(180deg);\n    }\n\n    #sort-direction-container {\n      display: flex;\n      flex-direction: column;\n      gap: 3px;\n    }\n\n    #sort-selector li {\n      display: flex;\n      align-items: center;\n    }\n\n    #sort-selector li a {\n      text-decoration: none;\n      text-transform: uppercase;\n      font-size: 1.4rem;\n      color: #333;\n    }\n\n    #sort-selector li a.selected {\n      font-weight: bold;\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    #display-style 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 button.active {\n      opacity: 1;\n    }\n\n    #display-style button svg {\n      width: 24px;\n      height: 24px;\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 { gridIcon } from './img/grid';\nimport { listIcon } from './img/list';\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        ${this.displayMode !== 'grid'\n          ? html`<li>\n              <label id=\"show-details\">\n                <input\n                  type=\"checkbox\"\n                  @click=${this.detailSelected}\n                  ?checked=${this.displayMode === 'list-detail'}\n                />\n                Show Details\n              </label>\n            </li>`\n          : nothing}\n\n        <li>\n          <button\n            id=\"grid-button\"\n            @click=${this.gridSelected}\n            class=${this.displayMode === 'grid' ? 'active' : ''}\n          >\n            ${gridIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-button\"\n            @click=${this.listSelected}\n            class=${this.displayMode !== 'grid' ? 'active' : ''}\n          >\n            ${listIcon}\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    return SortFieldDisplayName[this.selectedSort] ?? 'Date Archived';\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 gridSelected() {\n    this.displayMode = 'grid';\n    this.emitSortChangedEvent();\n  }\n\n  private listSelected() {\n    this.displayMode = 'list-compact';\n    this.emitSortChangedEvent();\n  }\n\n  private detailSelected(e: Event) {\n    this.displayMode = (e.target as HTMLInputElement).checked\n      ? 'list-detail'\n      : 'list-compact';\n    this.emitSortChangedEvent();\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    #container {\n      margin: 0 1rem 2.5rem 1rem;\n    }\n\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    }\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/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,77 @@
+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;
+        padding-right: 6px;
+      }
+      #views svg {
+        height: 18px;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: center;
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+
+      #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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCT,CAAC;IACJ,CAAC;CACF,CAAA;AAhE6B;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,CAiEjC;SAjEY,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        padding-right: 6px;\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      }\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,7 +9,7 @@ export declare class TileListCompact extends LitElement {
     currentHeight?: number;
     sortParam?: SortParam;
     render(): import("lit-html").TemplateResult<1>;
-    private img;
+    private get imageTemplate();
     private get date();
     private get classSize();
     private get formatSize();

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 import { formatCount } from '../../utils/format-count';
@@ -10,7 +10,7 @@ let TileListCompact = class TileListCompact extends LitElement {
         var _a, _b, _c, _d, _e, _f, _g;
         return html `
       <div id="list-line" class="${this.classSize}">
-        <div id="thumb">${this.img()}</div>
+        <div id="thumb">${this.imageTemplate}</div>
         <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
         <div id="date">${formatDate(this.date, this.formatSize)}</div>
         <div id="creator">${DOMPurify.sanitize((_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.creator) !== null && _d !== void 0 ? _d : '')}</div>
@@ -23,16 +23,16 @@ let TileListCompact = class TileListCompact extends LitElement {
       </div>
     `;
     }
-    img() {
+    get imageTemplate() {
         var _a, _b;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier) {
-            return html ` <img
-        src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
-        alt="${this.model.identifier}"
-        class=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
-      />`;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
+            return nothing;
         }
-        return html ``;
+        return html ` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class="${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}"
+    />`;
     }
     /*
      * TODO: fix field names to match model in src/collection-browser.ts
@@ -147,7 +147,7 @@ let TileListCompact = class TileListCompact extends LitElement {
       #list-line {
         display: grid;
         column-gap: 10px;
-        border-top: 1px solid #ddd !important;
+        border-top: 1px solid #ddd;
         align-items: center;
         line-height: 20px;
       }
@@ -182,7 +182,7 @@ let TileListCompact = class TileListCompact extends LitElement {
         flex-shrink: 1;
         flex-basis: 0;
       }
-      */
+    */
 
       #list-line:hover #title {
         text-decoration: underline;

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"thumb\">${this.img()}</div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${DOMPurify.sanitize(this.model?.creator ?? '')}</div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n    `;\n  }\n\n  private img() {\n    if (this.model?.identifier) {\n      return html` <img\n        src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n        alt=\"${this.model.identifier}\"\n        class=${this.model?.mediatype}\n      />`;\n    }\n    return html``;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      /* fields */\n\n      #thumb {\n        padding-left: 6px;\n      }\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 30px;\n        height: 30px;\n      }\n\n      .desktop #thumb img {\n        width: 45px;\n        height: 45px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 15px;\n        -webkit-border-radius: 15px;\n        -moz-border-radius: 15px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 22.5px;\n        -webkit-border-radius: 22.5px;\n        -moz-border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #icon {\n        height: 20px;\n        padding-right: 6px;\n      }\n\n      .mobile #icon {\n        height: 14px;\n      }\n\n      .desktop #icon {\n        height: 20px;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd !important;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 30px 3fr 29px 2fr 19px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      /*\n      #title {\n        flex-grow: 3;\n        flex-shrink: 3;\n        flex-basis: 0;\n      }\n\n      #creator {\n        flex-grow: 2;\n        flex-shrink: 2;\n        flex-basis: 0;\n      }\n\n      #date {\n        flex-grow: 1;\n        flex-shrink: 1;\n        flex-basis: 0;\n      }\n      */\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list-compact.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list-compact.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list-compact')\nexport class TileListCompact extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"thumb\">${this.imageTemplate}</div>\n        <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n        <div id=\"date\">${formatDate(this.date, this.formatSize)}</div>\n        <div id=\"creator\">${DOMPurify.sanitize(this.model?.creator ?? '')}</div>\n        <div id=\"views\">\n          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n        </div>\n        <div id=\"icon\">\n          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>\n        </div>\n      </div>\n    `;\n  }\n\n  private get imageTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=\"${this.model?.mediatype}\"\n    />`;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      /* fields */\n\n      #thumb {\n        padding-left: 6px;\n      }\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 30px;\n        height: 30px;\n      }\n\n      .desktop #thumb img {\n        width: 45px;\n        height: 45px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 15px;\n        -webkit-border-radius: 15px;\n        -moz-border-radius: 15px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 22.5px;\n        -webkit-border-radius: 22.5px;\n        -moz-border-radius: 22.5px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n      }\n\n      #title,\n      #creator {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n      }\n\n      #views {\n        text-align: right;\n      }\n\n      .mobile #views {\n        display: none;\n      }\n\n      #icon {\n        height: 20px;\n        padding-right: 6px;\n      }\n\n      .mobile #icon {\n        height: 14px;\n      }\n\n      .desktop #icon {\n        height: 20px;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: grid;\n        column-gap: 10px;\n        border-top: 1px solid #ddd;\n        align-items: center;\n        line-height: 20px;\n      }\n\n      #list-line.mobile {\n        grid-template-columns: 30px 3fr 29px 2fr 19px;\n        padding-top: 2px;\n        padding-bottom: 2px;\n      }\n\n      #list-line.desktop {\n        grid-template-columns: 51px 3fr 100px 2fr 60px 26px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n      }\n\n      /*\n      #title {\n        flex-grow: 3;\n        flex-shrink: 3;\n        flex-basis: 0;\n      }\n\n      #creator {\n        flex-grow: 2;\n        flex-shrink: 2;\n        flex-basis: 0;\n      }\n\n      #date {\n        flex-grow: 1;\n        flex-shrink: 1;\n        flex-basis: 0;\n      }\n    */\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

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

@@ -9,16 +9,16 @@ export declare class TileList extends LitElement {
     currentHeight?: number;
     sortParam?: SortParam;
     render(): import("lit-html").TemplateResult<1>;
-    private img;
-    private iconLeft;
-    private creator;
-    private itemLine;
-    private views;
-    private rating;
-    private reviews;
-    private description;
-    private topics;
-    private source;
+    private get imgTemplate();
+    private get iconLeftTemplate();
+    private get creatorTemplate();
+    private get itemLineTemplate();
+    private get viewsTemplate();
+    private get ratingTemplate();
+    private get reviewsTemplate();
+    private get descriptionTemplate();
+    private get topicsTemplate();
+    private get sourceTemplate();
     private searchLink;
     private get date();
     private get classSize();

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 /* eslint-disable lit/no-invalid-html */
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 import { formatCount } from '../../utils/format-count';
@@ -12,27 +12,27 @@ let TileList = class TileList extends LitElement {
         return html `
       <div id="list-line" class="${this.classSize}">
         <div id="list-line-left">
-          <div id="thumb">${this.img()}</div>
-          ${this.iconLeft()}
+          <div id="thumb">${this.imgTemplate}</div>
+          ${this.iconLeftTemplate}
         </div>
         <div id="list-line-right">
           <div id="title">${DOMPurify.sanitize((_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '')}</div>
-          ${this.itemLine()} ${this.creator()}
+          ${this.itemLineTemplate} ${this.creatorTemplate}
           <div id="date">
             <span class="label">Published:</span> ${formatDate(this.date, this.formatSize)}
           </div>
           <div id="views-line">
-            ${this.views()} ${this.rating()} ${this.reviews()}
+            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
           </div>
-          ${this.topics()} ${this.description()}
+          ${this.topicsTemplate} ${this.descriptionTemplate}
         </div>
       </div>
     `;
     }
-    img() {
+    get imgTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier)) {
-            return html ``;
+            return nothing;
         }
         return html ` <img
       src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
@@ -40,10 +40,10 @@ let TileList = class TileList extends LitElement {
       class=${(_b = this.model) === null || _b === void 0 ? void 0 : _b.mediatype}
     />`;
     }
-    iconLeft() {
+    get iconLeftTemplate() {
         var _a;
         if (this.classSize !== 'desktop') {
-            return html ``;
+            return nothing;
         }
         return html `
       <div id="icon-left">
@@ -52,10 +52,10 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
-    creator() {
+    get creatorTemplate() {
         var _a, _b, _c;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.creator)) {
-            return html ``;
+            return nothing;
         }
         return html `
       <div id="creator">
@@ -64,14 +64,14 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
-    itemLine() {
-        const source = this.source();
+    get itemLineTemplate() {
+        const source = this.sourceTemplate;
         if (!source) {
-            return html ``;
+            return nothing;
         }
         return html ` <div id="item-line">${source}</div> `;
     }
-    views() {
+    get viewsTemplate() {
         var _a, _b;
         return html `
       <div id="views">
@@ -80,10 +80,10 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
-    rating() {
+    get ratingTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.averageRating)) {
-            return html ``;
+            return nothing;
         }
         return html `
       <div id="reviews">
@@ -92,10 +92,10 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
-    reviews() {
+    get reviewsTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.commentCount)) {
-            return html ``;
+            return nothing;
         }
         return html `
       <div id="reviews">
@@ -104,36 +104,41 @@ let TileList = class TileList extends LitElement {
       </div>
     `;
     }
-    description() {
+    get descriptionTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.description)) {
-            return html ``;
+            return nothing;
         }
         const description = DOMPurify.sanitize(`${(_b = this.model) === null || _b === void 0 ? void 0 : _b.description}`);
-        return html `<div id="description">${description}</div>`;
+        return html ` <div id="description">${description}</div> `;
     }
-    topics() {
+    get topicsTemplate() {
         var _a, _b;
         if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.subject)) {
-            return html ``;
+            return nothing;
         }
-        return html ` <div id="topics">
-      <span class="label">Topics: </span>
-      ${DOMPurify.sanitize((_b = this.model) === null || _b === void 0 ? void 0 : _b.subject)}
-    </div>`;
+        return html `
+      <div id="topics">
+        <span class="label">Topics: </span>
+        ${DOMPurify.sanitize((_b = this.model) === null || _b === void 0 ? void 0 : _b.subject)}
+      </div>
+    `;
     }
-    source() {
+    get sourceTemplate() {
         var _a;
-        if ((_a = this.model) === null || _a === void 0 ? void 0 : _a.source) {
-            return html `<div id="source">
-        <span class="label">Source: </span>${this.searchLink('source', this.model.source)}
-      </div>`;
+        if (!((_a = this.model) === null || _a === void 0 ? void 0 : _a.source)) {
+            return nothing;
         }
-        return html ``;
+        return html `
+      <div id="source">
+        <span class="label">Source: </span>
+        ${this.searchLink('source', this.model.source)}
+      </div>
+    `;
     }
     searchLink(field, searchTerm) {
         if (!field || !searchTerm) {
-            return html ``;
+            return nothing;
         }
         const query = encodeURIComponent(`${field}:"${searchTerm}"`);
         // eslint-disable-next-line lit/no-invalid-html

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

@@ -1 +1 @@
-{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-invalid-html */\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.img()}</div>\n          ${this.iconLeft()}\n        </div>\n        <div id=\"list-line-right\">\n          <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n          ${this.itemLine()} ${this.creator()}\n          <div id=\"date\">\n            <span class=\"label\">Published:</span> ${formatDate(\n              this.date,\n              this.formatSize\n            )}\n          </div>\n          <div id=\"views-line\">\n            ${this.views()} ${this.rating()} ${this.reviews()}\n          </div>\n          ${this.topics()} ${this.description()}\n        </div>\n      </div>\n    `;\n  }\n\n  private img() {\n    if (!this.model?.identifier) {\n      return html``;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=${this.model?.mediatype}\n    />`;\n  }\n\n  private iconLeft() {\n    if (this.classSize !== 'desktop') {\n      return html``;\n    }\n    return html`\n      <div id=\"icon-left\">\n        <mediatype-icon .mediatype=${this.model?.mediatype} .showText=${true}>\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private creator() {\n    if (!this.model?.creator) {\n      return html``;\n    }\n    return html`\n      <div id=\"creator\">\n        <span class=\"label\">By: </span>\n        ${DOMPurify.sanitize(this.model?.creator ?? '')}\n      </div>\n    `;\n  }\n\n  private itemLine() {\n    const source = this.source();\n    if (!source) {\n      return html``;\n    }\n    return html` <div id=\"item-line\">${source}</div> `;\n  }\n\n  private views() {\n    return html`\n      <div id=\"views\">\n        <span class=\"label\">Views: </span>\n        ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n      </div>\n    `;\n  }\n\n  private rating() {\n    if (!this.model?.averageRating) {\n      return html``;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Avg Rating: </span>\n        ${this.model?.averageRating}\n      </div>\n    `;\n  }\n\n  private reviews() {\n    if (!this.model?.commentCount) {\n      return html``;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Reviews: </span>\n        ${this.model?.commentCount}\n      </div>\n    `;\n  }\n\n  private description() {\n    if (!this.model?.description) {\n      return html``;\n    }\n    const description = DOMPurify.sanitize(`${this.model?.description}`);\n    return html`<div id=\"description\">${description}</div>`;\n  }\n\n  private topics() {\n    if (!this.model?.subject) {\n      return html``;\n    }\n    return html` <div id=\"topics\">\n      <span class=\"label\">Topics: </span>\n      ${DOMPurify.sanitize(this.model?.subject)}\n    </div>`;\n  }\n\n  private source() {\n    if (this.model?.source) {\n      return html`<div id=\"source\">\n        <span class=\"label\">Source: </span>${this.searchLink(\n          'source',\n          this.model.source\n        )}\n      </div>`;\n    }\n    return html``;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return html``;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // eslint-disable-next-line lit/no-invalid-html\n    return html`\n      <a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n        ${DOMPurify.sanitize(searchTerm)}\n      </a>\n    `;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      .mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      .desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n      /* fields */\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 90px;\n        height: 90px;\n      }\n\n      .desktop #thumb img {\n        width: 100px;\n        height: 100px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 45px;\n        -webkit-border-radius: 45px;\n        -moz-border-radius: 45px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 50px;\n        -webkit-border-radius: 50px;\n        -moz-border-radius: 50px;\n      }\n\n      #icon.show-text svg {\n        height: unset;\n        width: unset;\n      }\n\n      #iconLeft #icon.show-text svg {\n        height: 20px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        line-height: 30px;\n      }\n\n      #creator,\n      #date,\n      #topics,\n      #item-line {\n        line-height: 20px;\n      }\n\n      #title,\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #title,\n      #creator {\n        white-space: nowrap;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      mediatype-icon {\n        --iconHeight: 20px;\n      }\n\n      #description {\n        padding-top: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: flex;\n        column-gap: 5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #item-line,\n      #views-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        line-height: 20px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"tile-list.js","sourceRoot":"","sources":["../../../../src/tiles/list/tile-list.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-invalid-html */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { SortParam } from '@internetarchive/search-service';\nimport DOMPurify from 'dompurify';\nimport { TileModel } from '../../models';\nimport { formatCount, NumberFormat } from '../../utils/format-count';\nimport { formatDate, DateFormat } from '../../utils/format-date';\nimport '../../mediatype-icon';\n\n@customElement('tile-list')\nexport class TileList extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseNavigationUrl?: string;\n\n  @property({ type: Number }) currentWidth?: number;\n\n  @property({ type: Number }) currentHeight?: number;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  render() {\n    return html`\n      <div id=\"list-line\" class=\"${this.classSize}\">\n        <div id=\"list-line-left\">\n          <div id=\"thumb\">${this.imgTemplate}</div>\n          ${this.iconLeftTemplate}\n        </div>\n        <div id=\"list-line-right\">\n          <div id=\"title\">${DOMPurify.sanitize(this.model?.title ?? '')}</div>\n          ${this.itemLineTemplate} ${this.creatorTemplate}\n          <div id=\"date\">\n            <span class=\"label\">Published:</span> ${formatDate(\n              this.date,\n              this.formatSize\n            )}\n          </div>\n          <div id=\"views-line\">\n            ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}\n          </div>\n          ${this.topicsTemplate} ${this.descriptionTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get imgTemplate() {\n    if (!this.model?.identifier) {\n      return nothing;\n    }\n    return html` <img\n      src=\"${this.baseNavigationUrl}/services/img/${this.model.identifier}\"\n      alt=\"${this.model.identifier}\"\n      class=${this.model?.mediatype}\n    />`;\n  }\n\n  private get iconLeftTemplate() {\n    if (this.classSize !== 'desktop') {\n      return nothing;\n    }\n    return html`\n      <div id=\"icon-left\">\n        <mediatype-icon .mediatype=${this.model?.mediatype} .showText=${true}>\n        </mediatype-icon>\n      </div>\n    `;\n  }\n\n  private get creatorTemplate() {\n    if (!this.model?.creator) {\n      return nothing;\n    }\n    return html`\n      <div id=\"creator\">\n        <span class=\"label\">By: </span>\n        ${DOMPurify.sanitize(this.model?.creator ?? '')}\n      </div>\n    `;\n  }\n\n  private get itemLineTemplate() {\n    const source = this.sourceTemplate;\n    if (!source) {\n      return nothing;\n    }\n    return html` <div id=\"item-line\">${source}</div> `;\n  }\n\n  private get viewsTemplate() {\n    return html`\n      <div id=\"views\">\n        <span class=\"label\">Views: </span>\n        ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}\n      </div>\n    `;\n  }\n\n  private get ratingTemplate() {\n    if (!this.model?.averageRating) {\n      return nothing;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Avg Rating: </span>\n        ${this.model?.averageRating}\n      </div>\n    `;\n  }\n\n  private get reviewsTemplate() {\n    if (!this.model?.commentCount) {\n      return nothing;\n    }\n    return html`\n      <div id=\"reviews\">\n        <span class=\"label\">Reviews: </span>\n        ${this.model?.commentCount}\n      </div>\n    `;\n  }\n\n  private get descriptionTemplate() {\n    if (!this.model?.description) {\n      return nothing;\n    }\n    const description = DOMPurify.sanitize(`${this.model?.description}`);\n    return html` <div id=\"description\">${description}</div> `;\n  }\n\n  private get topicsTemplate() {\n    if (!this.model?.subject) {\n      return nothing;\n    }\n    return html`\n      <div id=\"topics\">\n        <span class=\"label\">Topics: </span>\n        ${DOMPurify.sanitize(this.model?.subject)}\n      </div>\n    `;\n  }\n\n  private get sourceTemplate() {\n    if (!this.model?.source) {\n      return nothing;\n    }\n    return html`\n      <div id=\"source\">\n        <span class=\"label\">Source: </span>\n        ${this.searchLink('source', this.model.source)}\n      </div>\n    `;\n  }\n\n  private searchLink(field: string, searchTerm: string) {\n    if (!field || !searchTerm) {\n      return nothing;\n    }\n    const query = encodeURIComponent(`${field}:\"${searchTerm}\"`);\n    // eslint-disable-next-line lit/no-invalid-html\n    return html`\n      <a href=\"${this.baseNavigationUrl}/search.php?query=${query}\">\n        ${DOMPurify.sanitize(searchTerm)}\n      </a>\n    `;\n  }\n\n  /*\n   * TODO: fix field names to match model in src/collection-browser.ts\n   * private get dateSortSelector()\n   * @see src/models.ts\n   */\n  private get date(): Date | undefined {\n    switch (this.sortParam?.field) {\n      case 'date':\n        return this.model?.datePublished;\n      case 'reviewdate':\n        return this.model?.dateReviewed;\n      case 'addeddate':\n        return this.model?.dateAdded;\n      default:\n        return this.model?.dateArchived; // publicdate\n    }\n  }\n\n  private get classSize(): string {\n    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';\n  }\n\n  private get formatSize(): DateFormat | NumberFormat {\n    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';\n  }\n\n  static get styles() {\n    return css`\n      html {\n        font-size: unset;\n      }\n\n      div {\n        font-size: 14px;\n      }\n\n      .label {\n        font-weight: bold;\n      }\n\n      .mobile {\n        --infiniteScrollerRowGap: 20px;\n        --infiniteScrollerRowHeight: auto;\n      }\n\n      .desktop {\n        --infiniteScrollerRowGap: 30px;\n        --infiniteScrollerRowHeight: auto;\n      }\n      /* fields */\n\n      #thumb img {\n        object-fit: cover;\n        display: block;\n      }\n\n      .mobile #thumb img {\n        width: 90px;\n        height: 90px;\n      }\n\n      .desktop #thumb img {\n        width: 100px;\n        height: 100px;\n      }\n\n      #thumb img.collection {\n        border-radius: 8px;\n        -webkit-border-radius: 8px;\n        -moz-border-radius: 8px;\n      }\n\n      .mobile #thumb img.account {\n        border-radius: 45px;\n        -webkit-border-radius: 45px;\n        -moz-border-radius: 45px;\n      }\n\n      .desktop #thumb img.account {\n        border-radius: 50px;\n        -webkit-border-radius: 50px;\n        -moz-border-radius: 50px;\n      }\n\n      #icon.show-text svg {\n        height: unset;\n        width: unset;\n      }\n\n      #iconLeft #icon.show-text svg {\n        height: 20px;\n      }\n\n      #title {\n        color: #4b64ff;\n        text-decoration: none;\n        font-size: 22px;\n        font-weight: bold;\n        line-height: 30px;\n      }\n\n      #creator,\n      #date,\n      #topics,\n      #item-line {\n        line-height: 20px;\n      }\n\n      #title,\n      #creator,\n      #topic,\n      #source {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n\n      #title,\n      #creator {\n        white-space: nowrap;\n      }\n\n      #icon {\n        padding-top: 5px;\n      }\n\n      mediatype-icon {\n        --iconHeight: 20px;\n      }\n\n      #description {\n        padding-top: 10px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        display: -webkit-box;\n        word-break: break-word;\n        -webkit-line-clamp: 3; /* number of lines to show */\n        line-clamp: 3;\n        -webkit-box-orient: vertical;\n        text-align: left;\n      }\n\n      /* list-line */\n\n      #list-line {\n        display: flex;\n        column-gap: 5px;\n      }\n\n      #list-line:hover #title {\n        text-decoration: underline;\n      }\n\n      #item-line,\n      #views-line {\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        line-height: 20px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -7,6 +7,7 @@ import './grid/item-tile';
 import './grid/account-tile';
 import './list/tile-list';
 import './list/tile-list-compact';
+import './list/tile-list-compact-header';
 export declare class TileDispatcher extends LitElement implements SharedResizeObserverResizeHandlerInterface {
     displayMode?: CollectionDisplayMode;
     model?: TileModel;
@@ -18,6 +19,8 @@ export declare class TileDispatcher extends LitElement implements SharedResizeOb
     sortParam?: SortParam;
     private container;
     render(): import("lit-html").TemplateResult<1>;
+    private get headerTemplate();
+    private get tileTemplate();
     handleResize(entry: ResizeObserverEntry): void;
     disconnectedCallback(): void;
     private stopResizeObservation;