@internetarchive/collection-browser 0.4.18-alpha.6 → 0.4.19

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 {\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 type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-dropdown';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n  CollectionDisplayMode,\n  DefaultSortDirection,\n  PrefixFilterCounts,\n  PrefixFilterType,\n  SortField,\n  SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\nimport { srOnlyStyle } from '../styles/sr-only';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  /** The current sort direction (asc/desc), or null if none is set */\n  @property({ type: String }) sortDirection: SortDirection | null = null;\n\n  /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n  @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n  /** The currently selected title letter filter, or null if none is set */\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  /** The currently selected creator letter filter, or null if none is set */\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  /** Whether to show the Relevance sort option (default `true`) */\n  @property({ type: Boolean }) showRelevance: boolean = true;\n\n  /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n  @property({ type: Object }) prefixFilterCountMap?: Record<\n    PrefixFilterType,\n    PrefixFilterCounts\n  >;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  /**\n   * Which of the alphabet bars (title/creator) should be shown, or null if one\n   * should not currently be rendered.\n   */\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n  /**\n   * Whether the transparent backdrop to catch clicks outside the dropdown menu\n   * should be rendered.\n   */\n  @state() dropdownBackdropVisible = false;\n\n  /**\n   * The width of the desktop view sort option container, updated upon each resize.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @state() desktopSortContainerWidth = 0;\n\n  /**\n   * The width of the full sort bar, updated upon each resize.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @state() selectorBarContainerWidth = 0;\n\n  /**\n   * The container for all the desktop view's sort options.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @query('#desktop-sort-container')\n  private desktopSortContainer!: HTMLUListElement;\n\n  /**\n   * The container for the full sort bar.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @query('#sort-selector-container')\n  private sortSelectorContainer!: HTMLDivElement;\n\n  /** The dropdown component containing options for weekly and all-time views */\n  @query('#views-dropdown')\n  private viewsDropdown!: IaDropdown;\n\n  /** The dropdown component containing the four date options */\n  @query('#date-dropdown')\n  private dateDropdown!: IaDropdown;\n\n  /** The single, consolidated dropdown component shown in mobile view */\n  @query('#mobile-dropdown')\n  private mobileDropdown!: IaDropdown;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <section id=\"sort-bar\" aria-label=\"Sorting options\">\n          <div class=\"sort-direction-container\">\n            ${this.sortDirectionSelectorTemplate}\n          </div>\n          <span class=\"sort-by-text\">Sort by:</span>\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        </section>\n\n        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n        ${this.alphaBarTemplate}\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 = DefaultSortDirection[this.selectedSort];\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.alphaSelectorVisible = 'title';\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.alphaSelectorVisible = 'creator';\n    }\n\n    if (changed.has('dropdownBackdropVisible')) {\n      this.setupEscapeListeners();\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  private setupEscapeListeners() {\n    if (this.dropdownBackdropVisible) {\n      document.addEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener\n      );\n    } else {\n      document.removeEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener\n      );\n    }\n  }\n\n  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeDropdowns();\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.desktopSortContainer,\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.desktopSortContainer,\n      handler: this,\n    });\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    if (entry.target === this.desktopSortContainer) {\n      this.desktopSortContainerWidth = entry.contentRect.width;\n    } else if (entry.target === this.sortSelectorContainer) {\n      this.selectorBarContainerWidth = entry.contentRect.width;\n    }\n  }\n\n  /**\n   * Whether to show the mobile sort bar because there is not enough space\n   * for the desktop sort bar.\n   */\n  private get mobileSelectorVisible() {\n    return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;\n  }\n\n  /**\n   * Template to render the alphabet bar, or `nothing` if it should not be rendered\n   * for the current sort\n   */\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n    if (this.alphaSelectorVisible === null) {\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\n    } else {\n      return this.alphaSelectorVisible === 'creator'\n        ? this.creatorSelectorBar\n        : this.titleSelectorBar;\n    }\n\n    return nothing;\n  }\n\n  /** Template to render the sort direction toggle button */\n  private get sortDirectionSelectorTemplate(): TemplateResult {\n    const oppositeSortDirectionReadable =\n      this.sortDirection === 'asc' ? 'descending' : 'ascending';\n    const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;\n\n    return html`\n      <button\n        class=\"sort-direction-selector\"\n        ?disabled=${this.selectedSort === 'relevance'}\n        @click=${this.toggleSortDirection}\n      >\n        <span class=\"sr-only\">${srLabel}</span>\n        ${this.sortDirectionIcon}\n      </button>\n    `;\n  }\n\n  /** Template to render the sort direction button's icon in the correct current state */\n  private get sortDirectionIcon(): TemplateResult {\n    // For relevance sort, show a fully disabled icon\n    if (this.selectedSort === 'relevance') {\n      return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n    }\n\n    // For all other sorts, show the ascending/descending direction\n    return html`\n      <div class=\"sort-direction-icon\">\n        ${this.sortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in desktop view */\n  private get desktopSortSelectorTemplate() {\n    return html`\n      <div\n        id=\"desktop-sort-container\"\n        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n      >\n        <ul id=\"desktop-sort-selector\">\n          <li>\n            ${this.showRelevance\n              ? this.getSortDisplayOption(SortField.relevance, {\n                  onClick: () => {\n                    this.dropdownBackdropVisible = false;\n                    if (this.selectedSort !== SortField.relevance) {\n                      this.clearAlphaBarFilters();\n                      this.setSelectedSort(SortField.relevance);\n                    }\n                  },\n                })\n              : nothing}\n          </li>\n          <li>${this.viewsDropdownTemplate}</li>\n          <li>\n            ${this.getSortDisplayOption(SortField.title, {\n              onClick: () => {\n                this.dropdownBackdropVisible = false;\n                if (this.selectedSort !== SortField.title) {\n                  this.alphaSelectorVisible = 'title';\n                  this.selectedCreatorFilter = null;\n                  this.setSelectedSort(SortField.title);\n                  this.emitCreatorLetterChangedEvent();\n                }\n              },\n            })}\n          </li>\n          <li>${this.dateDropdownTemplate}</li>\n          <li>\n            ${this.getSortDisplayOption(SortField.creator, {\n              onClick: () => {\n                this.dropdownBackdropVisible = false;\n                if (this.selectedSort !== SortField.creator) {\n                  this.alphaSelectorVisible = 'creator';\n                  this.selectedTitleFilter = null;\n                  this.setSelectedSort(SortField.creator);\n                  this.emitTitleLetterChangedEvent();\n                }\n              },\n            })}\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in mobile view */\n  private get mobileSortSelectorTemplate() {\n    return html`\n      <div\n        id=\"mobile-sort-container\"\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n      >\n        ${this.getSortDropdown({\n          displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,\n          id: 'mobile-dropdown',\n          selected: true,\n          dropdownOptions: Object.keys(SortField).map(field =>\n            this.getDropdownOption(field as SortField)\n          ),\n          selectedOption: this.selectedSort ?? SortField.relevance,\n          onOptionSelected: this.mobileSortChanged,\n          onDropdownClick: () => {\n            this.dropdownBackdropVisible = this.mobileDropdown.open;\n            this.mobileDropdown.classList.toggle(\n              'open',\n              this.mobileDropdown.open\n            );\n          },\n        })}\n      </div>\n    `;\n  }\n\n  /**\n   * This generates each of the non-dropdown 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   *    onClick?: (e: Event) => 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   *    selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.\n   * }\n   * @returns\n   */\n  private getSortDisplayOption(\n    sortField: SortField,\n    options?: {\n      displayName?: TemplateResult;\n      selected?: boolean;\n      onClick?: (e: Event) => void;\n    }\n  ): TemplateResult {\n    const isSelected = options?.selected ?? this.selectedSort === sortField;\n    const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n    return html`\n      <button\n        class=${isSelected ? 'selected' : nothing}\n        @click=${(e: Event) => {\n          e.preventDefault();\n          options?.onClick?.(e);\n        }}\n      >\n        ${displayName}\n      </button>\n    `;\n  }\n\n  /**\n   * Generates a dropdown component containing multiple grouped sort options.\n   *\n   * @param options.displayName The name to use for the dropdown's visible label\n   * @param options.id The id to apply to the dropdown element\n   * @param options.dropdownOptions An array of option objects used to populate the dropdown\n   * @param options.selectedOption The id of the option that should be initially selected\n   * @param options.selected A boolean indicating whether this dropdown should use its\n   *  selected appearance\n   * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n   * @param options.onDropdownClick A handler for click events on the dropdown\n   * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events\n   *  on the dropdown's label\n   */\n  private getSortDropdown(options: {\n    displayName: TemplateResult;\n    id?: string;\n    dropdownOptions: optionInterface[];\n    selectedOption?: string;\n    selected: boolean;\n    onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n    onDropdownClick?: (e: PointerEvent) => void;\n    onLabelInteraction?: (e: Event) => void;\n  }): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=${options.id ?? nothing}\n        class=${options.selected ? 'selected' : nothing}\n        displayCaret\n        closeOnSelect\n        includeSelectedOption\n        .openViaButton=${options.selected}\n        .options=${options.dropdownOptions}\n        .selectedOption=${options.selectedOption ?? ''}\n        @optionSelected=${options.onOptionSelected ?? nothing}\n        @click=${options.onDropdownClick ?? nothing}\n      >\n        <span\n          class=\"dropdown-label\"\n          slot=\"dropdown-label\"\n          @click=${options.onLabelInteraction ?? nothing}\n          @keydown=${options.onLabelInteraction\n            ? (e: KeyboardEvent) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  options.onLabelInteraction?.(e);\n                }\n              }\n            : nothing}\n        >\n          ${options.displayName}\n        </span>\n      </ia-dropdown>\n    `;\n  }\n\n  /** Generates a single dropdown option object for the given sort field */\n  private getDropdownOption(sortField: SortField): optionInterface {\n    return {\n      id: sortField,\n      selectedHandler: () => {\n        this.selectDropdownSortField(sortField);\n      },\n      label: html`\n        <span class=\"dropdown-option-label\">\n          ${SortFieldDisplayName[sortField]}\n        </span>\n      `,\n    };\n  }\n\n  /** Handler for when any sort dropdown option is selected */\n  private dropdownOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n    this.clearAlphaBarFilters();\n    this.setSelectedSort(e.detail.option.id as SortField);\n  }\n\n  /** The template to render for the views dropdown */\n  private get viewsDropdownTemplate(): TemplateResult {\n    return this.getSortDropdown({\n      displayName: html`${this.viewSortField}`,\n      id: 'views-dropdown',\n      selected: this.viewOptionSelected,\n      dropdownOptions: [\n        this.getDropdownOption(SortField.weeklyview),\n        this.getDropdownOption(SortField.alltimeview),\n      ],\n      selectedOption: this.viewOptionSelected ? this.selectedSort : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        this.dateDropdown.open = false;\n        this.dropdownBackdropVisible = this.viewsDropdown.open;\n        this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.viewsDropdown.open && !this.viewOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(SortField.weeklyview);\n        }\n      },\n    });\n  }\n\n  /** The template to render for the date dropdown */\n  private get dateDropdownTemplate(): TemplateResult {\n    return this.getSortDropdown({\n      displayName: html`${this.dateSortField}`,\n      id: 'date-dropdown',\n      selected: this.dateOptionSelected,\n      dropdownOptions: [\n        this.getDropdownOption(SortField.date),\n        this.getDropdownOption(SortField.datearchived),\n        this.getDropdownOption(SortField.datereviewed),\n        this.getDropdownOption(SortField.dateadded),\n      ],\n      selectedOption: this.dateOptionSelected ? this.selectedSort : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        this.viewsDropdown.open = false;\n        this.dropdownBackdropVisible = this.dateDropdown.open;\n        this.dateDropdown.classList.toggle('open', this.dateDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.dateDropdown.open && !this.dateOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(SortField.date);\n        }\n      },\n    });\n  }\n\n  /** Handler for when a new mobile sort dropdown option is selected */\n  private mobileSortChanged(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n\n    const sortField = e.detail.option.id as SortField;\n    this.setSelectedSort(sortField);\n\n    this.alphaSelectorVisible = null;\n    if (sortField !== 'title' && this.selectedTitleFilter) {\n      this.selectedTitleFilter = null;\n      this.emitTitleLetterChangedEvent();\n    }\n    if (sortField !== 'creator' && this.selectedCreatorFilter) {\n      this.selectedCreatorFilter = null;\n      this.emitCreatorLetterChangedEvent();\n    }\n  }\n\n  /** Template for rendering the three display mode options */\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            title=\"Tile view\"\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-detail-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n            title=\"List view\"\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-compact-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n            title=\"Compact list view\"\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for rendering the transparent backdrop to capture clicks outside the\n   * dropdown menu while it is open.\n   */\n  private get dropdownBackdrop() {\n    return html`\n      <div\n        id=\"sort-selector-backdrop\"\n        @keyup=${this.closeDropdowns}\n        @click=${this.closeDropdowns}\n      ></div>\n    `;\n  }\n\n  /** Closes all of the sorting dropdown components' menus */\n  private closeDropdowns() {\n    this.dropdownBackdropVisible = false;\n    const allDropdowns = [\n      this.viewsDropdown,\n      this.dateDropdown,\n      this.mobileDropdown,\n    ];\n    for (const dropdown of allDropdowns) {\n      dropdown.open = false;\n      dropdown.classList.remove('open');\n    }\n  }\n\n  private selectDropdownSortField(sortField: SortField) {\n    // When a dropdown sort option is selected, we additionally need to clear the backdrop\n    this.dropdownBackdropVisible = false;\n    this.setSelectedSort(sortField);\n  }\n\n  private clearAlphaBarFilters() {\n    this.alphaSelectorVisible = null;\n    this.selectedTitleFilter = null;\n    this.selectedCreatorFilter = null;\n    this.emitTitleLetterChangedEvent();\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private setSortDirection(sortDirection: SortDirection) {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** Toggles the current sort direction between 'asc' and 'desc' */\n  private toggleSortDirection() {\n    this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');\n  }\n\n  private setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    // Apply this field's default sort direction\n    this.sortDirection = DefaultSortDirection[this.selectedSort];\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    const dateSortFields: SortField[] = [\n      SortField.datearchived,\n      SortField.date,\n      SortField.datereviewed,\n      SortField.dateadded,\n    ];\n    return dateSortFields.includes(this.selectedSort);\n  }\n\n  /**\n   * There are two view 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 viewOptionSelected(): boolean {\n    const viewSortFields: SortField[] = [\n      SortField.alltimeview,\n      SortField.weeklyview,\n    ];\n    return viewSortFields.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.date];\n    const name = this.dateOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n    return name;\n  }\n\n  /**\n   * The display name of the current view field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get viewSortField(): string {\n    const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n    const name = this.viewOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n    return name;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      .letterCounts=${this.prefixFilterCountMap?.title}\n      ariaLandmarkLabel=\"Filter by title letter\"\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      .letterCounts=${this.prefixFilterCountMap?.creator}\n      ariaLandmarkLabel=\"Filter by creator letter\"\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n    this.emitTitleLetterChangedEvent();\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private emitTitleLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'titleLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedTitleFilter },\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  private emitCreatorLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'creatorLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedCreatorFilter },\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent<{\n      displayMode?: CollectionDisplayMode;\n    }>('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: SortDirection | null;\n    }>('sortChanged', {\n      detail: {\n        selectedSort: this.selectedSort,\n        sortDirection: this.sortDirection,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          position: relative;\n        }\n\n        #sort-bar {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          border-bottom: 1px solid #2c2c2c;\n          font-size: 1.4rem;\n        }\n\n        ul {\n          list-style: none;\n          display: flex;\n          align-items: center;\n          margin: 0;\n          padding: 0;\n        }\n\n        li {\n          padding: 0;\n        }\n\n        .sort-by-text {\n          margin-right: 5px;\n          font-weight: bold;\n          white-space: nowrap;\n        }\n\n        .sort-direction-container {\n          display: flex;\n          align-self: stretch;\n          flex: 0;\n          margin: 0 5px;\n        }\n\n        .sort-direction-selector {\n          padding: 0;\n          border: none;\n          appearance: none;\n          background: transparent;\n          cursor: pointer;\n        }\n\n        .sort-direction-selector:disabled {\n          cursor: default;\n        }\n\n        .sort-direction-icon {\n          display: flex;\n          align-items: center;\n          background: none;\n          color: inherit;\n          border: none;\n          padding: 0;\n          outline: inherit;\n          width: 14px;\n          height: 14px;\n        }\n\n        .sort-direction-icon > svg {\n          flex: 1;\n        }\n\n        #date-sort-selector,\n        #view-sort-selector {\n          position: absolute;\n          left: 150px;\n          top: 45px;\n\n          z-index: 1;\n          padding: 1rem;\n          background-color: white;\n          border-radius: 2.5rem;\n          border: 1px solid #404142;\n        }\n\n        #sort-selector-container {\n          flex: 1;\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\n        }\n\n        #desktop-sort-container,\n        #mobile-sort-container {\n          display: flex;\n          justify-content: flex-start;\n          align-items: center;\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 display: none,\n          the width becomes 0\n        */\n        #desktop-sort-container.hidden {\n          position: absolute;\n          top: -9999px;\n          left: -9999px;\n          visibility: hidden;\n        }\n\n        #mobile-sort-container.hidden {\n          display: none;\n        }\n\n        #sort-selector-backdrop {\n          position: fixed;\n          top: 0;\n          left: 0;\n          width: 100vw;\n          height: 100vh;\n          z-index: 1;\n          background-color: transparent;\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          padding-left: 5px;\n          padding-right: 5px;\n        }\n\n        #desktop-sort-selector li a {\n          padding: 0 5px;\n          text-decoration: none;\n          color: #333;\n          line-height: 2;\n        }\n\n        #desktop-sort-selector li button {\n          padding: 0px 5px;\n          border: none;\n          background: none;\n          font-family: inherit;\n          font-size: inherit;\n          color: #333;\n          line-height: 2;\n          cursor: pointer;\n          appearance: none;\n        }\n\n        #desktop-sort-selector li button.selected {\n          font-weight: bold;\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          fill: #bbbbbb;\n        }\n\n        #display-style-selector button.active {\n          fill: var(--ia-theme-primary-text-color, #2c2c2c);\n        }\n\n        #display-style-selector button svg {\n          width: 24px;\n          height: 24px;\n        }\n\n        ia-dropdown {\n          --dropdownTextColor: white;\n          --dropdownOffsetTop: 0;\n          --dropdownBorderTopWidth: 0;\n          --dropdownBorderTopLeftRadius: 0;\n          --dropdownBorderTopRightRadius: 0;\n          --dropdownWhiteSpace: nowrap;\n          --dropdownListZIndex: 2;\n          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n          --dropdownSelectedTextColor: white;\n          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n          --caretHeight: 9px;\n          --caretWidth: 12px;\n          --caretPadding: 0 5px 0 0;\n        }\n        ia-dropdown.selected .dropdown-label {\n          font-weight: bold;\n        }\n        ia-dropdown.open {\n          z-index: 2;\n        }\n\n        .dropdown-label {\n          display: inline-block;\n          height: 100%;\n          padding-left: 5px;\n          font-size: 1.4rem;\n          line-height: 2;\n          color: var(--ia-theme-primary-text-color, #2c2c2c);\n          white-space: nowrap;\n          user-select: none;\n        }\n      `,\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 type {\n  SharedResizeObserverInterface,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport '@internetarchive/ia-dropdown';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SortDirection } from '@internetarchive/search-service';\nimport {\n  CollectionDisplayMode,\n  DefaultSortDirection,\n  PrefixFilterCounts,\n  PrefixFilterType,\n  SortField,\n  SortFieldDisplayName,\n} from '../models';\nimport './alpha-bar';\n\nimport { sortUpIcon } from './img/sort-toggle-up';\nimport { sortDownIcon } from './img/sort-toggle-down';\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\nimport { tileIcon } from './img/tile';\nimport { listIcon } from './img/list';\nimport { compactIcon } from './img/compact';\n\ntype AlphaSelector = 'creator' | 'title';\n\n@customElement('sort-filter-bar')\nexport class SortFilterBar\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\n\n  /** The current sort direction (asc/desc), or null if none is set */\n  @property({ type: String }) sortDirection: SortDirection | null = null;\n\n  /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\n  @property({ type: String }) selectedSort: SortField = SortField.relevance;\n\n  /** The currently selected title letter filter, or null if none is set */\n  @property({ type: String }) selectedTitleFilter: string | null = null;\n\n  /** The currently selected creator letter filter, or null if none is set */\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\n\n  /** Whether to show the Relevance sort option (default `true`) */\n  @property({ type: Boolean }) showRelevance: boolean = true;\n\n  /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\n  @property({ type: Object }) prefixFilterCountMap?: Record<\n    PrefixFilterType,\n    PrefixFilterCounts\n  >;\n\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\n\n  /**\n   * Which of the alphabet bars (title/creator) should be shown, or null if one\n   * should not currently be rendered.\n   */\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\n\n  /**\n   * Whether the transparent backdrop to catch clicks outside the dropdown menu\n   * should be rendered.\n   */\n  @state() dropdownBackdropVisible = false;\n\n  /**\n   * The width of the desktop view sort option container, updated upon each resize.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @state() desktopSortContainerWidth = 0;\n\n  /**\n   * The width of the full sort bar, updated upon each resize.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @state() selectorBarContainerWidth = 0;\n\n  /**\n   * The container for all the desktop view's sort options.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @query('#desktop-sort-container')\n  private desktopSortContainer!: HTMLUListElement;\n\n  /**\n   * The container for the full sort bar.\n   * Used for dynamically determining whether to use desktop or mobile view.\n   */\n  @query('#sort-selector-container')\n  private sortSelectorContainer!: HTMLDivElement;\n\n  /** The dropdown component containing options for weekly and all-time views */\n  @query('#views-dropdown')\n  private viewsDropdown!: IaDropdown;\n\n  /** The dropdown component containing the four date options */\n  @query('#date-dropdown')\n  private dateDropdown!: IaDropdown;\n\n  /** The single, consolidated dropdown component shown in mobile view */\n  @query('#mobile-dropdown')\n  private mobileDropdown!: IaDropdown;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <div id=\"sort-bar\">\n          <div class=\"sort-direction-container\">\n            ${this.sortDirectionSelectorTemplate}\n          </div>\n          <span class=\"sort-by-text\">Sort by:</span>\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.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n        ${this.alphaBarTemplate}\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 = DefaultSortDirection[this.selectedSort];\n    }\n\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\n      this.alphaSelectorVisible = 'title';\n    }\n\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\n      this.alphaSelectorVisible = 'creator';\n    }\n\n    if (changed.has('dropdownBackdropVisible')) {\n      this.setupEscapeListeners();\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  private setupEscapeListeners() {\n    if (this.dropdownBackdropVisible) {\n      document.addEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener\n      );\n    } else {\n      document.removeEventListener(\n        'keydown',\n        this.boundSortBarSelectorEscapeListener\n      );\n    }\n  }\n\n  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeDropdowns();\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.desktopSortContainer,\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.desktopSortContainer,\n      handler: this,\n    });\n  }\n\n  handleResize(entry: ResizeObserverEntry): void {\n    if (entry.target === this.desktopSortContainer) {\n      this.desktopSortContainerWidth = entry.contentRect.width;\n    } else if (entry.target === this.sortSelectorContainer) {\n      this.selectorBarContainerWidth = entry.contentRect.width;\n    }\n  }\n\n  /**\n   * Whether to show the mobile sort bar because there is not enough space\n   * for the desktop sort bar.\n   */\n  private get mobileSelectorVisible() {\n    return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;\n  }\n\n  /**\n   * Template to render the alphabet bar, or `nothing` if it should not be rendered\n   * for the current sort\n   */\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\n\n    if (this.alphaSelectorVisible === null) {\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\n    } else {\n      return this.alphaSelectorVisible === 'creator'\n        ? this.creatorSelectorBar\n        : this.titleSelectorBar;\n    }\n\n    return nothing;\n  }\n\n  /** Template to render the sort direction toggle button */\n  private get sortDirectionSelectorTemplate(): TemplateResult {\n    return html`\n      <button\n        class=\"sort-direction-selector\"\n        ?disabled=${this.selectedSort === 'relevance'}\n        @click=${this.toggleSortDirection}\n      >\n        ${this.sortDirectionIcon}\n      </button>\n    `;\n  }\n\n  /** Template to render the sort direction button's icon in the correct current state */\n  private get sortDirectionIcon(): TemplateResult {\n    // For relevance sort, show a fully disabled icon\n    if (this.selectedSort === 'relevance') {\n      return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\n    }\n\n    // For all other sorts, show the ascending/descending direction\n    return html`\n      <div class=\"sort-direction-icon\">\n        ${this.sortDirection === 'asc' ? sortUpIcon : sortDownIcon}\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in desktop view */\n  private get desktopSortSelectorTemplate() {\n    return html`\n      <div\n        id=\"desktop-sort-container\"\n        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\n      >\n        <ul id=\"desktop-sort-selector\">\n          <li>\n            ${this.showRelevance\n              ? this.getSortDisplayOption(SortField.relevance, {\n                  onClick: () => {\n                    this.dropdownBackdropVisible = false;\n                    if (this.selectedSort !== SortField.relevance) {\n                      this.clearAlphaBarFilters();\n                      this.setSelectedSort(SortField.relevance);\n                    }\n                  },\n                })\n              : nothing}\n          </li>\n          <li>${this.viewsDropdownTemplate}</li>\n          <li>\n            ${this.getSortDisplayOption(SortField.title, {\n              onClick: () => {\n                this.dropdownBackdropVisible = false;\n                if (this.selectedSort !== SortField.title) {\n                  this.alphaSelectorVisible = 'title';\n                  this.selectedCreatorFilter = null;\n                  this.setSelectedSort(SortField.title);\n                  this.emitCreatorLetterChangedEvent();\n                }\n              },\n            })}\n          </li>\n          <li>${this.dateDropdownTemplate}</li>\n          <li>\n            ${this.getSortDisplayOption(SortField.creator, {\n              onClick: () => {\n                this.dropdownBackdropVisible = false;\n                if (this.selectedSort !== SortField.creator) {\n                  this.alphaSelectorVisible = 'creator';\n                  this.selectedTitleFilter = null;\n                  this.setSelectedSort(SortField.creator);\n                  this.emitTitleLetterChangedEvent();\n                }\n              },\n            })}\n          </li>\n        </ul>\n      </div>\n    `;\n  }\n\n  /** The template to render all the sort options in mobile view */\n  private get mobileSortSelectorTemplate() {\n    return html`\n      <div\n        id=\"mobile-sort-container\"\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n      >\n        ${this.getSortDropdown({\n          displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,\n          id: 'mobile-dropdown',\n          selected: true,\n          dropdownOptions: Object.keys(SortField).map(field =>\n            this.getDropdownOption(field as SortField)\n          ),\n          selectedOption: this.selectedSort ?? SortField.relevance,\n          onOptionSelected: this.mobileSortChanged,\n          onDropdownClick: () => {\n            this.dropdownBackdropVisible = this.mobileDropdown.open;\n            this.mobileDropdown.classList.toggle(\n              'open',\n              this.mobileDropdown.open\n            );\n          },\n        })}\n      </div>\n    `;\n  }\n\n  /**\n   * This generates each of the non-dropdown 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   *    onClick?: (e: Event) => 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   *    selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.\n   * }\n   * @returns\n   */\n  private getSortDisplayOption(\n    sortField: SortField,\n    options?: {\n      displayName?: TemplateResult;\n      selected?: boolean;\n      onClick?: (e: Event) => void;\n    }\n  ): TemplateResult {\n    const isSelected = options?.selected ?? this.selectedSort === sortField;\n    const displayName = options?.displayName ?? SortFieldDisplayName[sortField];\n    return html`\n      <button\n        class=${isSelected ? 'selected' : nothing}\n        @click=${(e: Event) => {\n          e.preventDefault();\n          options?.onClick?.(e);\n        }}\n      >\n        ${displayName}\n      </button>\n    `;\n  }\n\n  /**\n   * Generates a dropdown component containing multiple grouped sort options.\n   *\n   * @param options.displayName The name to use for the dropdown's visible label\n   * @param options.id The id to apply to the dropdown element\n   * @param options.dropdownOptions An array of option objects used to populate the dropdown\n   * @param options.selectedOption The id of the option that should be initially selected\n   * @param options.selected A boolean indicating whether this dropdown should use its\n   *  selected appearance\n   * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\n   * @param options.onDropdownClick A handler for click events on the dropdown\n   * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events\n   *  on the dropdown's label\n   */\n  private getSortDropdown(options: {\n    displayName: TemplateResult;\n    id?: string;\n    dropdownOptions: optionInterface[];\n    selectedOption?: string;\n    selected: boolean;\n    onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\n    onDropdownClick?: (e: PointerEvent) => void;\n    onLabelInteraction?: (e: Event) => void;\n  }): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=${options.id ?? nothing}\n        class=${options.selected ? 'selected' : nothing}\n        displayCaret\n        closeOnSelect\n        includeSelectedOption\n        .openViaButton=${options.selected}\n        .options=${options.dropdownOptions}\n        .selectedOption=${options.selectedOption ?? ''}\n        @optionSelected=${options.onOptionSelected ?? nothing}\n        @click=${options.onDropdownClick ?? nothing}\n      >\n        <span\n          class=\"dropdown-label\"\n          slot=\"dropdown-label\"\n          @click=${options.onLabelInteraction ?? nothing}\n          @keydown=${options.onLabelInteraction\n            ? (e: KeyboardEvent) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  options.onLabelInteraction?.(e);\n                }\n              }\n            : nothing}\n        >\n          ${options.displayName}\n        </span>\n      </ia-dropdown>\n    `;\n  }\n\n  /** Generates a single dropdown option object for the given sort field */\n  private getDropdownOption(sortField: SortField): optionInterface {\n    return {\n      id: sortField,\n      selectedHandler: () => {\n        this.selectDropdownSortField(sortField);\n      },\n      label: html`\n        <span class=\"dropdown-option-label\">\n          ${SortFieldDisplayName[sortField]}\n        </span>\n      `,\n    };\n  }\n\n  /** Handler for when any sort dropdown option is selected */\n  private dropdownOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n    this.clearAlphaBarFilters();\n    this.setSelectedSort(e.detail.option.id as SortField);\n  }\n\n  /** The template to render for the views dropdown */\n  private get viewsDropdownTemplate(): TemplateResult {\n    return this.getSortDropdown({\n      displayName: html`${this.viewSortField}`,\n      id: 'views-dropdown',\n      selected: this.viewOptionSelected,\n      dropdownOptions: [\n        this.getDropdownOption(SortField.weeklyview),\n        this.getDropdownOption(SortField.alltimeview),\n      ],\n      selectedOption: this.viewOptionSelected ? this.selectedSort : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        this.dateDropdown.open = false;\n        this.dropdownBackdropVisible = this.viewsDropdown.open;\n        this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.viewsDropdown.open && !this.viewOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(SortField.weeklyview);\n        }\n      },\n    });\n  }\n\n  /** The template to render for the date dropdown */\n  private get dateDropdownTemplate(): TemplateResult {\n    return this.getSortDropdown({\n      displayName: html`${this.dateSortField}`,\n      id: 'date-dropdown',\n      selected: this.dateOptionSelected,\n      dropdownOptions: [\n        this.getDropdownOption(SortField.date),\n        this.getDropdownOption(SortField.datearchived),\n        this.getDropdownOption(SortField.datereviewed),\n        this.getDropdownOption(SortField.dateadded),\n      ],\n      selectedOption: this.dateOptionSelected ? this.selectedSort : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        this.viewsDropdown.open = false;\n        this.dropdownBackdropVisible = this.dateDropdown.open;\n        this.dateDropdown.classList.toggle('open', this.dateDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.dateDropdown.open && !this.dateOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(SortField.date);\n        }\n      },\n    });\n  }\n\n  /** Handler for when a new mobile sort dropdown option is selected */\n  private mobileSortChanged(e: CustomEvent<{ option: optionInterface }>) {\n    this.dropdownBackdropVisible = false;\n\n    const sortField = e.detail.option.id as SortField;\n    this.setSelectedSort(sortField);\n\n    this.alphaSelectorVisible = null;\n    if (sortField !== 'title' && this.selectedTitleFilter) {\n      this.selectedTitleFilter = null;\n      this.emitTitleLetterChangedEvent();\n    }\n    if (sortField !== 'creator' && this.selectedCreatorFilter) {\n      this.selectedCreatorFilter = null;\n      this.emitCreatorLetterChangedEvent();\n    }\n  }\n\n  /** Template for rendering the three display mode options */\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            title=\"Tile view\"\n          >\n            ${tileIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-detail-button\"\n            @click=${() => {\n              this.displayMode = 'list-detail';\n            }}\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\n            title=\"List view\"\n          >\n            ${listIcon}\n          </button>\n        </li>\n        <li>\n          <button\n            id=\"list-compact-button\"\n            @click=${() => {\n              this.displayMode = 'list-compact';\n            }}\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\n            title=\"Compact list view\"\n          >\n            ${compactIcon}\n          </button>\n        </li>\n      </ul>\n    `;\n  }\n\n  /**\n   * Template for rendering the transparent backdrop to capture clicks outside the\n   * dropdown menu while it is open.\n   */\n  private get dropdownBackdrop() {\n    return html`\n      <div\n        id=\"sort-selector-backdrop\"\n        @keyup=${this.closeDropdowns}\n        @click=${this.closeDropdowns}\n      ></div>\n    `;\n  }\n\n  /** Closes all of the sorting dropdown components' menus */\n  private closeDropdowns() {\n    this.dropdownBackdropVisible = false;\n    const allDropdowns = [\n      this.viewsDropdown,\n      this.dateDropdown,\n      this.mobileDropdown,\n    ];\n    for (const dropdown of allDropdowns) {\n      dropdown.open = false;\n      dropdown.classList.remove('open');\n    }\n  }\n\n  private selectDropdownSortField(sortField: SortField) {\n    // When a dropdown sort option is selected, we additionally need to clear the backdrop\n    this.dropdownBackdropVisible = false;\n    this.setSelectedSort(sortField);\n  }\n\n  private clearAlphaBarFilters() {\n    this.alphaSelectorVisible = null;\n    this.selectedTitleFilter = null;\n    this.selectedCreatorFilter = null;\n    this.emitTitleLetterChangedEvent();\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private setSortDirection(sortDirection: SortDirection) {\n    this.sortDirection = sortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** Toggles the current sort direction between 'asc' and 'desc' */\n  private toggleSortDirection() {\n    this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');\n  }\n\n  private setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    // Apply this field's default sort direction\n    this.sortDirection = DefaultSortDirection[this.selectedSort];\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    const dateSortFields: SortField[] = [\n      SortField.datearchived,\n      SortField.date,\n      SortField.datereviewed,\n      SortField.dateadded,\n    ];\n    return dateSortFields.includes(this.selectedSort);\n  }\n\n  /**\n   * There are two view 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 viewOptionSelected(): boolean {\n    const viewSortFields: SortField[] = [\n      SortField.alltimeview,\n      SortField.weeklyview,\n    ];\n    return viewSortFields.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.date];\n    const name = this.dateOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n    return name;\n  }\n\n  /**\n   * The display name of the current view field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get viewSortField(): string {\n    const defaultSort = SortFieldDisplayName[SortField.weeklyview];\n    const name = this.viewOptionSelected\n      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort\n      : defaultSort;\n    return name;\n  }\n\n  private get titleSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedTitleFilter}\n      .letterCounts=${this.prefixFilterCountMap?.title}\n      @letterChanged=${this.titleLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private get creatorSelectorBar() {\n    return html` <alpha-bar\n      .selectedLetter=${this.selectedCreatorFilter}\n      .letterCounts=${this.prefixFilterCountMap?.creator}\n      @letterChanged=${this.creatorLetterChanged}\n    ></alpha-bar>`;\n  }\n\n  private titleLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\n    this.emitTitleLetterChangedEvent();\n  }\n\n  private creatorLetterChanged(\n    e: CustomEvent<{ selectedLetter: string | undefined }>\n  ) {\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\n    this.emitCreatorLetterChangedEvent();\n  }\n\n  private emitTitleLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'titleLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedTitleFilter },\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  private emitCreatorLetterChangedEvent() {\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\n      'creatorLetterChanged',\n      {\n        detail: { selectedLetter: this.selectedCreatorFilter },\n      }\n    );\n    this.dispatchEvent(event);\n  }\n\n  private displayModeChanged() {\n    const event = new CustomEvent<{\n      displayMode?: CollectionDisplayMode;\n    }>('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: SortDirection | 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      position: relative;\n    }\n\n    #sort-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border-bottom: 1px solid #2c2c2c;\n      font-size: 1.4rem;\n    }\n\n    ul {\n      list-style: none;\n      display: flex;\n      align-items: center;\n      margin: 0;\n      padding: 0;\n    }\n\n    li {\n      padding: 0;\n    }\n\n    .sort-by-text {\n      margin-right: 5px;\n      font-weight: bold;\n      white-space: nowrap;\n    }\n\n    .sort-direction-container {\n      display: flex;\n      align-self: stretch;\n      flex: 0;\n      margin: 0 5px;\n    }\n\n    .sort-direction-selector {\n      padding: 0;\n      border: none;\n      appearance: none;\n      background: transparent;\n      cursor: pointer;\n    }\n\n    .sort-direction-selector:disabled {\n      cursor: default;\n    }\n\n    .sort-direction-icon {\n      display: flex;\n      align-items: center;\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      outline: inherit;\n      width: 14px;\n      height: 14px;\n    }\n\n    .sort-direction-icon > svg {\n      flex: 1;\n    }\n\n    #date-sort-selector,\n    #view-sort-selector {\n      position: absolute;\n      left: 150px;\n      top: 45px;\n\n      z-index: 1;\n      padding: 1rem;\n      background-color: white;\n      border-radius: 2.5rem;\n      border: 1px solid #404142;\n    }\n\n    #sort-selector-container {\n      flex: 1;\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\n    }\n\n    #desktop-sort-container,\n    #mobile-sort-container {\n      display: flex;\n      justify-content: flex-start;\n      align-items: center;\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 display: none,\n      the width becomes 0\n    */\n    #desktop-sort-container.hidden {\n      position: absolute;\n      top: -9999px;\n      left: -9999px;\n      visibility: hidden;\n    }\n\n    #mobile-sort-container.hidden {\n      display: none;\n    }\n\n    #sort-selector-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      height: 100vh;\n      z-index: 1;\n      background-color: transparent;\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      padding-left: 5px;\n      padding-right: 5px;\n    }\n\n    #desktop-sort-selector li a {\n      padding: 0 5px;\n      text-decoration: none;\n      color: #333;\n      line-height: 2;\n    }\n\n    #desktop-sort-selector li button {\n      padding: 0px 5px;\n      border: none;\n      background: none;\n      font-size: inherit;\n      color: #333;\n      line-height: 2;\n      cursor: pointer;\n      appearance: none;\n    }\n\n    #desktop-sort-selector li button.selected {\n      font-weight: bold;\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      fill: #bbbbbb;\n    }\n\n    #display-style-selector button.active {\n      fill: var(--ia-theme-primary-text-color, #2c2c2c);\n    }\n\n    #display-style-selector button svg {\n      width: 24px;\n      height: 24px;\n    }\n\n    ia-dropdown {\n      --dropdownTextColor: white;\n      --dropdownOffsetTop: 0;\n      --dropdownBorderTopWidth: 0;\n      --dropdownBorderTopLeftRadius: 0;\n      --dropdownBorderTopRightRadius: 0;\n      --dropdownWhiteSpace: nowrap;\n      --dropdownListZIndex: 2;\n      --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n      --dropdownSelectedTextColor: white;\n      --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n      --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n      --caretHeight: 9px;\n      --caretWidth: 12px;\n      --caretPadding: 0 5px 0 0;\n    }\n    ia-dropdown.selected .dropdown-label {\n      font-weight: bold;\n    }\n    ia-dropdown.open {\n      z-index: 2;\n    }\n\n    .dropdown-label {\n      display: inline-block;\n      height: 100%;\n      padding-left: 5px;\n      font-size: 1.4rem;\n      line-height: 2;\n      color: var(--ia-theme-primary-text-color, #2c2c2c);\n      white-space: nowrap;\n      user-select: none;\n    }\n  `;\n}\n"]}

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

@@ -36,7 +36,7 @@ let AccountTile = class AccountTile extends LitElement {
     get getTitleTemplate() {
         var _a;
         return html `<div id="title">
-      <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h4>
+      <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
     </div>`;
     }
     get getArchivistTemplate() {

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

@@ -1 +1 @@
-{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAK+B,mBAAc,GAAG,KAAK,CAAC;IAoFtD,CAAC;IAlFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;8BACe,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;WACvD,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;mBACI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;mBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;kBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;sBAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;;kBAGtD;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAxF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AALzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyFvB;SAzFY,WAAW","sourcesContent":["import { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h4 class=\"truncated\">${this.model?.identifier}</h4>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>Archivist since ${this.model?.dateAdded?.getFullYear()}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">More info</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } }\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAA3C;;QAK+B,mBAAc,GAAG,KAAK,CAAC;IAoFtD,CAAC;IAlFC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,kBAAkB;;;cAGnB,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB;cAC/C,IAAI,CAAC,oBAAoB;;YAE3B,IAAI,CAAC,oBAAoB;;;KAGhC,CAAC;IACJ,CAAC;IAED,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;wBACH,IAAI,CAAC,YAAY;oBACrB,MAAM;;;KAGrB,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;8BACe,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;WACzC,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;8BACe,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;WACvD,CAAC;IACV,CAAC;IAED,IAAY,oBAAoB;;QAC9B,OAAO,IAAI,CAAA;mBACI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;mBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;kBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;sBAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;kBAE5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;QAC5B,iCAAiC;QACjC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,iBAAiB;;;kBAGtD;YACZ,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,iBAAiB,CAAC,CAAe;QACvC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,mBAAmB,EACnB,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,CAC3C,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,iCAAiC,CAAC;QAE7D,OAAO;YACL,cAAc;YACd,GAAG,CAAA;;8BAEqB,eAAe;;OAEtC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAxF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAuB;AAErB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAwB;AALzC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyFvB;SAzFY,WAAW","sourcesContent":["import { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.getAvatarTemplate} ${this.getTitleTemplate}\n            ${this.getArchivistTemplate}\n          </div>\n          ${this.getTileStatsTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  private get getAvatarTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get getTitleTemplate() {\n    return html`<div id=\"title\">\n      <h1 class=\"truncated\">${this.model?.identifier}</h1>\n    </div>`;\n  }\n\n  private get getArchivistTemplate() {\n    return html`<div class=\"archivist-since\">\n      <span>Archivist since ${this.model?.dateAdded?.getFullYear()}</span>\n    </div>`;\n  }\n\n  private get getTileStatsTemplate() {\n    return html`<tile-stats\n      .mediatype=${this.model?.mediatype}\n      .itemCount=${this.model?.itemCount}\n      .favCount=${this.model?.favCount}\n      .commentCount=${this.model?.commentCount}\n    >\n    </tile-stats>`;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">More info</span>\n        </button>`\n      : nothing;\n  }\n\n  private infoButtonPressed(e: PointerEvent) {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } }\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles() {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -37,7 +37,7 @@ let CollectionTile = class CollectionTile extends LitElement {
     get getTitleTemplate() {
         var _a;
         return html `<div id="title">
-      <h4 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h4>
+      <h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h1>
     </div>`;
     }
     get getTileStatsTemplate() {
@@ -95,7 +95,7 @@ let CollectionTile = class CollectionTile extends LitElement {
           flex-grow: initial;
         }
 
-        h4.truncated {
+        h1.truncated {
           color: ${whiteColor};
         }
 

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

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

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

@@ -31,9 +31,9 @@ let ItemTile = class ItemTile extends LitElement {
             ${this.imageBlockTemplate}
 
             <div id="title">
-              <h4 class="truncated" title=${ifDefined(itemTitle)}>
+              <h1 class="truncated" title=${ifDefined(itemTitle)}>
                 ${itemTitle}
-              </h4>
+              </h1>
             </div>
 
             ${this.volumeIssueTemplate}

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

@@ -1 +1 @@
-{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    const itemTitle = this.model?.title;\n    const [viewCount, viewLabel] =\n      this.sortParam?.field === 'week'\n        ? [this.model?.weeklyViewCount, 'weekly views']\n        : [this.model?.viewCount, 'all-time views'];\n\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.imageBlockTemplate}\n\n            <div id=\"title\">\n              <h4 class=\"truncated\" title=${ifDefined(itemTitle)}>\n                ${itemTitle}\n              </h4>\n            </div>\n\n            ${this.volumeIssueTemplate}\n            ${this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate}\n            ${this.textSnippetsTemplate}\n          </div>\n\n          <tile-stats\n            .mediatype=${this.model?.mediatype}\n            .viewCount=${viewCount}\n            .viewLabel=${viewLabel}\n            .favCount=${this.model?.favCount}\n            .commentCount=${this.model?.commentCount}\n          >\n          </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get creatorTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.creator) return nothing;\n\n    return html`\n      <div class=\"created-by\">\n        <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n          by&nbsp;${this.model?.creator}\n        </span>\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .loggedIn=${this.loggedIn}\n        .isCompactTile=${false}\n        .isListTile=${false}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n    let format: DateFormat = 'long';\n    switch (this.sortParam?.field) {\n      case 'date': {\n        const datePublished = this.model?.datePublished;\n        sortedValue = { field: 'published', value: datePublished };\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\n          format = 'year-only';\n        }\n        break;\n      }\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    if (!sortedValue?.value) {\n      return nothing;\n    }\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n        </span>\n      </div>\n    `;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">More info</span>\n        </button>`\n      : nothing;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n      </text-snippet-block>\n    `;\n  }\n\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.volume || !this.model?.issue) return nothing;\n\n    return html`\n      <div class=\"volume-issue\">\n        <span class=\"truncated\" title=\"volume|issue\">\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n        </span>\n      </div>\n    `;\n  }\n\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private infoButtonPressed(e: PointerEvent): void {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } }\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n\n        text-snippet-block {\n          --containerLeftMargin: 5px;\n          --containerTopMargin: 5px;\n        }\n\n        /**\n         * iOS Safari long-press on tiles (to bring up hover pane)\n         * gets messy without this\n         */\n        @media screen and (pointer: coarse) and (hover: none) {\n          .container {\n            -webkit-touch-callout: none;\n          }\n\n          .truncated {\n            -webkit-touch-callout: default;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { SortParam } from '@internetarchive/search-service';\n\nimport { DateFormat, formatDate } from '../../utils/format-date';\nimport { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';\nimport type { TileModel } from '../../models';\n\nimport { baseTileStyles } from './styles/tile-grid-shared-styles';\nimport '../image-block';\nimport '../text-snippet-block';\nimport '../item-image';\nimport '../mediatype-icon';\nimport './tile-stats';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n  @property({ type: String }) baseImageUrl?: string;\n\n  @property({ type: Boolean }) loggedIn = false;\n\n  @property({ type: Object }) model?: TileModel;\n\n  @property({ type: Object }) sortParam?: SortParam;\n\n  @property({ type: Boolean }) showInfoButton = false;\n\n  render() {\n    const itemTitle = this.model?.title;\n    const [viewCount, viewLabel] =\n      this.sortParam?.field === 'week'\n        ? [this.model?.weeklyViewCount, 'weekly views']\n        : [this.model?.viewCount, 'all-time views'];\n\n    return html`\n      <div class=\"container\">\n        ${this.infoButtonTemplate}\n        <div class=\"tile-details\">\n          <div class=\"item-info\">\n            ${this.imageBlockTemplate}\n\n            <div id=\"title\">\n              <h1 class=\"truncated\" title=${ifDefined(itemTitle)}>\n                ${itemTitle}\n              </h1>\n            </div>\n\n            ${this.volumeIssueTemplate}\n            ${this.doesSortedByDate\n              ? this.sortedDateInfoTemplate\n              : this.creatorTemplate}\n            ${this.textSnippetsTemplate}\n          </div>\n\n          <tile-stats\n            .mediatype=${this.model?.mediatype}\n            .viewCount=${viewCount}\n            .viewLabel=${viewLabel}\n            .favCount=${this.model?.favCount}\n            .commentCount=${this.model?.commentCount}\n          >\n          </tile-stats>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Templates\n   */\n  private get creatorTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.creator) return nothing;\n\n    return html`\n      <div class=\"created-by\">\n        <span class=\"truncated\" title=${ifDefined(this.model?.creator)}>\n          by&nbsp;${this.model?.creator}\n        </span>\n      </div>\n    `;\n  }\n\n  private get imageBlockTemplate(): TemplateResult {\n    return html`\n      <image-block\n        .model=${this.model}\n        .baseImageUrl=${this.baseImageUrl}\n        .loggedIn=${this.loggedIn}\n        .isCompactTile=${false}\n        .isListTile=${false}\n        .viewSize=${'grid'}\n      >\n      </image-block>\n    `;\n  }\n\n  private get sortedDateInfoTemplate() {\n    let sortedValue;\n    let format: DateFormat = 'long';\n    switch (this.sortParam?.field) {\n      case 'date': {\n        const datePublished = this.model?.datePublished;\n        sortedValue = { field: 'published', value: datePublished };\n        if (isFirstMillisecondOfUTCYear(datePublished)) {\n          format = 'year-only';\n        }\n        break;\n      }\n      case 'reviewdate':\n        sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };\n        break;\n      case 'addeddate':\n        sortedValue = { field: 'added', value: this.model?.dateAdded };\n        break;\n      case 'publicdate':\n        sortedValue = { field: 'archived', value: this.model?.dateArchived };\n        break;\n      default:\n        break;\n    }\n\n    if (!sortedValue?.value) {\n      return nothing;\n    }\n    return html`\n      <div class=\"date-sorted-by truncated\">\n        <span>\n          ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}\n        </span>\n      </div>\n    `;\n  }\n\n  private get infoButtonTemplate(): TemplateResult | typeof nothing {\n    // &#9432; is an information icon\n    return this.showInfoButton\n      ? html`<button class=\"info-button\" @click=${this.infoButtonPressed}>\n          &#9432;\n          <span class=\"sr-only\">More info</span>\n        </button>`\n      : nothing;\n  }\n\n  private get textSnippetsTemplate(): TemplateResult | typeof nothing {\n    if (!this.hasSnippets) return nothing;\n\n    return html`\n      <text-snippet-block viewsize=\"grid\" .snippets=${this.model?.snippets}>\n      </text-snippet-block>\n    `;\n  }\n\n  private get volumeIssueTemplate(): TemplateResult | typeof nothing {\n    if (!this.model?.volume || !this.model?.issue) return nothing;\n\n    return html`\n      <div class=\"volume-issue\">\n        <span class=\"truncated\" title=\"volume|issue\">\n          Volume&nbsp;${this.model?.volume}, Issue&nbsp;${this.model?.issue}\n        </span>\n      </div>\n    `;\n  }\n\n  private get doesSortedByDate() {\n    return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(\n      this.sortParam?.field as string\n    );\n  }\n\n  private get hasSnippets(): boolean {\n    return !!this.model?.snippets?.length;\n  }\n\n  private infoButtonPressed(e: PointerEvent): void {\n    e.preventDefault();\n    const event = new CustomEvent<{ x: number; y: number }>(\n      'infoButtonPressed',\n      { detail: { x: e.clientX, y: e.clientY } }\n    );\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * CSS\n   */\n  static get styles(): CSSResultGroup {\n    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;\n\n    return [\n      baseTileStyles,\n      css`\n        .container {\n          border: 1px solid ${tileBorderColor};\n        }\n\n        text-snippet-block {\n          --containerLeftMargin: 5px;\n          --containerTopMargin: 5px;\n        }\n\n        /**\n         * iOS Safari long-press on tiles (to bring up hover pane)\n         * gets messy without this\n         */\n        @media screen and (pointer: coarse) and (hover: none) {\n          .container {\n            -webkit-touch-callout: none;\n          }\n\n          .truncated {\n            -webkit-touch-callout: default;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js

@@ -1,14 +1,10 @@
 import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
 /**
  * Base tile styles
  */
 const tileBackgroundColor = css `var(--tileBackgroundColor, #ffffff)`;
 const tileCornerRadius = css `var(--tileCornerRadius, 4px)`;
 export const baseTileStyles = css `
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
   .container {
     background-color: ${tileBackgroundColor};
     border: 1px #2c2c2c;
@@ -69,7 +65,7 @@ export const baseTileStyles = css `
     -webkit-box-orient: vertical;
   }
 
-  h4.truncated {
+  h1.truncated {
     display: -webkit-box;
     margin: 0px;
     line-height: 15px;
@@ -123,5 +119,19 @@ export const baseTileStyles = css `
   .hidden {
     display: none;
   }
+
+  .sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+  }
 `;
 //# sourceMappingURL=tile-grid-shared-styles.js.map

package/dist/src/tiles/grid/styles/tile-grid-shared-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;IAE7B,WAAW;;;wBAGS,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GpC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { srOnlyStyle } from '../../../styles/sr-only';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n  /* Include .sr-only styles for all tiles */\n  ${srOnlyStyle}\n\n  .container {\n    background-color: ${tileBackgroundColor};\n    border: 1px #2c2c2c;\n    border-radius: ${tileCornerRadius};\n    box-shadow: 1px 1px 2px 0;\n    box-sizing: border-box;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  image-block {\n    display: block;\n    position: relative;\n    text-align: center;\n  }\n\n  .tile-details {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    row-gap: 10px;\n    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n  }\n\n  .item-info {\n    display: flex;\n    flex-direction: column;\n    row-gap: 5px;\n    flex-grow: 1;\n  }\n\n  #title {\n    padding: 0 5px;\n  }\n\n  .created-by,\n  .date-sorted-by,\n  .volume-issue,\n  .archivist-since {\n    display: flex;\n    justify-content: left;\n    align-items: flex-start;\n    padding: 0 5px;\n  }\n\n  .truncated {\n    flex: 1;\n    color: #2c2c2c;\n    min-width: 0; /* Important for long words! */\n    text-align: left;\n    line-height: 15px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n  }\n\n  h4.truncated {\n    display: -webkit-box;\n    margin: 0px;\n    line-height: 15px;\n    font-size: 14px;\n    font-weight: 500;\n    padding-bottom: 1px;\n  }\n\n  span {\n    display: -webkit-box;\n    font-size: 1.4rem;\n    line-height: 15px;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    padding-bottom: 1px;\n  }\n\n  .container:hover > .tile-details > .item-info > #title > .truncated {\n    text-decoration: underline;\n  }\n\n  /** this is a workaround for Safari 15 where the hover effects are not working */\n  #title:hover > .truncated {\n    text-decoration: underline;\n  }\n\n  .info-button {\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: rgba(220, 220, 220, 0.5);\n    color: white;\n    font-size: 2rem;\n    font-weight: bold;\n    line-height: 1;\n    text-shadow: black 1px 1px 3px;\n    overflow: visible;\n    aspect-ratio: 1 / 1;\n    z-index: 1;\n  }\n\n  .hidden {\n    display: none;\n  }\n`;\n"]}
+{"version":3,"file":"tile-grid-shared-styles.js","sourceRoot":"","sources":["../../../../../src/tiles/grid/styles/tile-grid-shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AAEH,MAAM,mBAAmB,GAAG,GAAG,CAAA,qCAAqC,CAAC;AACrE,MAAM,gBAAgB,GAAG,GAAG,CAAA,8BAA8B,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;wBAET,mBAAmB;;qBAEtB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HpC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Base tile styles\n */\n\nconst tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;\nconst tileCornerRadius = css`var(--tileCornerRadius, 4px)`;\n\nexport const baseTileStyles = css`\n  .container {\n    background-color: ${tileBackgroundColor};\n    border: 1px #2c2c2c;\n    border-radius: ${tileCornerRadius};\n    box-shadow: 1px 1px 2px 0;\n    box-sizing: border-box;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  image-block {\n    display: block;\n    position: relative;\n    text-align: center;\n  }\n\n  .tile-details {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    row-gap: 10px;\n    font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;\n  }\n\n  .item-info {\n    display: flex;\n    flex-direction: column;\n    row-gap: 5px;\n    flex-grow: 1;\n  }\n\n  #title {\n    padding: 0 5px;\n  }\n\n  .created-by,\n  .date-sorted-by,\n  .volume-issue,\n  .archivist-since {\n    display: flex;\n    justify-content: left;\n    align-items: flex-start;\n    padding: 0 5px;\n  }\n\n  .truncated {\n    flex: 1;\n    color: #2c2c2c;\n    min-width: 0; /* Important for long words! */\n    text-align: left;\n    line-height: 15px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n  }\n\n  h1.truncated {\n    display: -webkit-box;\n    margin: 0px;\n    line-height: 15px;\n    font-size: 14px;\n    font-weight: 500;\n    padding-bottom: 1px;\n  }\n\n  span {\n    display: -webkit-box;\n    font-size: 1.4rem;\n    line-height: 15px;\n    overflow: hidden;\n    word-wrap: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    padding-bottom: 1px;\n  }\n\n  .container:hover > .tile-details > .item-info > #title > .truncated {\n    text-decoration: underline;\n  }\n\n  /** this is a workaround for Safari 15 where the hover effects are not working */\n  #title:hover > .truncated {\n    text-decoration: underline;\n  }\n\n  .info-button {\n    position: absolute;\n    right: 10px;\n    top: 10px;\n    margin: 0;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: rgba(220, 220, 220, 0.5);\n    color: white;\n    font-size: 2rem;\n    font-weight: bold;\n    line-height: 1;\n    text-shadow: black 1px 1px 3px;\n    overflow: visible;\n    aspect-ratio: 1 / 1;\n    z-index: 1;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    margin: -1px !important;\n    padding: 0 !important;\n    border: 0 !important;\n    overflow: hidden !important;\n    white-space: nowrap !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    -webkit-clip-path: inset(50%) !important;\n    clip-path: inset(50%) !important;\n  }\n`;\n"]}

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

@@ -5,7 +5,6 @@ import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
 import { reviewsIcon } from '../../assets/img/icons/reviews';
 import { uploadIcon } from '../../assets/img/icons/upload';
 import { viewsIcon } from '../../assets/img/icons/views';
-import { srOnlyStyle } from '../../styles/sr-only';
 import { formatCount } from '../../utils/format-count';
 let TileStats = class TileStats extends LitElement {
     render() {
@@ -53,71 +52,79 @@ let TileStats = class TileStats extends LitElement {
     `;
     }
     static get styles() {
-        return [
-            srOnlyStyle,
-            css `
-        mediatype-icon {
-          --iconHeight: 25px;
-          --iconWidth: 25px;
-        }
+        return css `
+      mediatype-icon {
+        --iconHeight: 25px;
+        --iconWidth: 25px;
+      }
 
-        ul {
-          all: unset; // unset all property values
-          list-style-type: none; // remove default list-style
-        }
+      ul {
+        all: unset; // unset all property values
+        list-style-type: none; // remove default list-style
+      }
 
-        li {
-          list-style-type: none; // remove default list-style
-        }
+      li {
+        list-style-type: none; // remove default list-style
+      }
 
-        svg {
-          height: 13px;
-          width: 13px;
-          display: block;
-          margin: auto;
-          pointer-events: none;
-        }
+      svg {
+        height: 13px;
+        width: 13px;
+        display: block;
+        margin: auto;
+        pointer-events: none;
+      }
 
-        /* Make the reviews icon slightly smaller/lower, for even visual weight */
-        .reviews svg {
-          height: 11px;
-          width: 11px;
-          margin-top: 2px;
-        }
+      /* Make the reviews icon slightly smaller/lower, for even visual weight */
+      .reviews svg {
+        height: 11px;
+        width: 11px;
+        margin-top: 2px;
+      }
 
-        .item-stats {
-          height: 30px;
-          padding-left: 5px;
-          padding-right: 5px;
-          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-          text-align: center;
-        }
+      .item-stats {
+        height: 30px;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+        text-align: center;
+      }
 
-        #stats-row {
-          display: flex;
-          justify-content: space-between;
-          flex-wrap: wrap;
-          width: 100%;
-          padding-bottom: 5px;
-        }
+      #stats-row {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        width: 100%;
+        padding-bottom: 5px;
+      }
 
-        .col {
-          min-width: 15px;
-          max-width: 25%;
-          height: 25px;
-        }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
 
-        .status-text {
-          font-size: 14px;
-          height: 15px;
-          color: #2c2c2c;
-          line-height: 17px;
-          margin: auto;
-          display: block;
-          text-align: center;
-        }
-      `,
-        ];
+      .col {
+        min-width: 15px;
+        max-width: 25%;
+        height: 25px;
+      }
+
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 17px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
     }
 };
 __decorate([