@internetarchive/collection-browser 3.0.7-alpha-webdev7989.0 → 3.1.1-alpha-webdev6778.1

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 { msg } from '@lit/localize';\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  ALL_DATE_SORT_FIELDS,\n  ALL_VIEWS_SORT_FIELDS,\n  CollectionDisplayMode,\n  DateSortField,\n  defaultSortAvailability,\n  PrefixFilterCounts,\n  PrefixFilterType,\n  SORT_OPTIONS,\n  SortField,\n  ViewsSortField,\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 default sort direction to use if none is set */\n  @property({ type: String }) defaultSortDirection: SortDirection | null = null;\n\n  /** The default sort field to use if none is set */\n  @property({ type: String }) defaultSortField: Exclude<\n    SortField,\n    SortField.default\n  > = SortField.relevance;\n\n  /** Which view sort option to expose by default. */\n  @property({ type: String }) defaultViewSort: ViewsSortField =\n    SortField.weeklyview;\n\n  /** Which date sort option to expose by default */\n  @property({ type: String }) defaultDateSort: DateSortField = SortField.date;\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.default;\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  /**\n   * Map defining which sortable fields should be included on the sort bar.\n   *\n   * E.g.,\n   * ```\n   * {\n   *   [SortField.relevance]: true,\n   *   [SortField.date]: false,\n   *   [SortField.title]: true,\n   *   ...\n   * }\n   * ```\n   */\n  @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\n\n  /** Whether to replace the default sort options with a slot for customization (default `false`) */\n  @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\n    false;\n\n  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\n  @property({ type: Boolean, reflect: true })\n  suppressDisplayModes: boolean = false;\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   * The Views sort option that was most recently selected (or the default, if none has been selected yet)\n   */\n  @state() private lastSelectedViewSort = this.defaultViewSort;\n\n  /**\n   * The Date sort option that was most recently selected (or the default, if none has been selected yet)\n   */\n  @state() private lastSelectedDateSort = this.defaultDateSort;\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 all the available 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          <slot name=\"sort-options-left\"></slot>\n          <div id=\"sort-options\">\n            ${!this.enableSortOptionsSlot\n              ? html`\n                  <div class=\"sort-direction-container\">\n                    ${this.sortDirectionSelectorTemplate}\n                  </div>\n                  <span class=\"sort-by-text\">${msg('Sort by:')}</span>\n                  <div id=\"sort-selector-container\">\n                    ${this.mobileSortSelectorTemplate}\n                    ${this.desktopSortSelectorTemplate}\n                  </div>\n                `\n              : html`<slot name=\"sort-options\"></slot>`}\n          </div>\n          <slot name=\"sort-options-right\"></slot>\n\n          ${this.suppressDisplayModes\n            ? nothing\n            : html`<div id=\"display-style-selector\">\n                ${this.displayOptionTemplate}\n              </div>`}\n        </section>\n\n        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\n        ${this.alphaBarTemplate}\n      </div>\n    `;\n  }\n\n  willUpdate(changed: PropertyValues) {\n    if (changed.has('selectedSort') || changed.has('defaultSortField')) {\n      // If the sort is changed from its default without a direction set,\n      // we adopt the default sort direction for that sort type.\n      if (\n        this.selectedSort &&\n        this.selectedSort !== SortField.default &&\n        this.sortDirection === null\n      ) {\n        const sortOption = SORT_OPTIONS[this.finalizedSortField];\n        this.sortDirection = sortOption.defaultSortDirection;\n      }\n\n      if (this.viewOptionSelected) {\n        this.lastSelectedViewSort = this.finalizedSortField as ViewsSortField;\n      } else if (this.dateOptionSelected) {\n        this.lastSelectedDateSort = this.finalizedSortField as DateSortField;\n      }\n    }\n\n    // If we change which dropdown options are defaulted, update the default selections\n    if (changed.has('defaultViewSort')) {\n      this.lastSelectedViewSort = this.defaultViewSort;\n    }\n    if (changed.has('defaultDateSort')) {\n      this.lastSelectedDateSort = this.defaultDateSort;\n    }\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('displayMode')) {\n      this.displayModeChanged();\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') || changed.has('enableSortOptionsSlot')) {\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  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupResizeObserver();\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    if (this.sortSelectorContainer) {\n      resizeObserver.removeObserver({\n        target: this.sortSelectorContainer,\n        handler: this,\n      });\n    }\n\n    if (this.desktopSortContainer) {\n      resizeObserver.removeObserver({\n        target: this.desktopSortContainer,\n        handler: this,\n      });\n    }\n  }\n\n  private setupResizeObserver() {\n    if (!this.resizeObserver) return;\n\n    if (this.sortSelectorContainer) {\n      this.resizeObserver.addObserver({\n        target: this.sortSelectorContainer,\n        handler: this,\n      });\n    }\n\n    if (this.desktopSortContainer) {\n      this.resizeObserver.addObserver({\n        target: this.desktopSortContainer,\n        handler: this,\n      });\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.canChangeSortDirection}\n        @click=${this.handleSortDirectionClicked}\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    // Show a fully disabled icon for sort options without direction support\n    if (!this.canChangeSortDirection) {\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.finalizedSortDirection === '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>${this.relevanceSortSelectorTemplate}</li>\n          <li>${this.allViewsSortOptionsTemplate}</li>\n          <li>${this.titleSortSelectorTemplate}</li>\n          <li>${this.allDateSortOptionsTemplate}</li>\n          <li>${this.creatorSortSelectorTemplate}</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    const displayedOptions = Object.values(SORT_OPTIONS).filter(\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\n    );\n\n    return html`\n      <div\n        id=\"mobile-sort-container\"\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\n      >\n        ${this.getSortDropdown({\n          displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\n          id: 'mobile-dropdown',\n          selected: true,\n          dropdownOptions: displayedOptions.map(opt =>\n            this.getDropdownOption(opt.field),\n          ),\n          selectedOption: this.finalizedSortField,\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 buttons.\n   *\n   * It manages the display value and the selected state of the option.\n   *\n   * @param sortField Which sort field the button represents\n   * @param options Additional options:\n   *   - `onSelected?: (e: Event) => void;` If this is provided, it will also be called when the option is selected.\n   *     Default is to clear any selected alphabetical filters.\n   */\n  private getSortSelectorButton(\n    sortField: SortField,\n    options?: {\n      onSelected?: (e: Event) => void;\n    },\n  ): TemplateResult {\n    const isSelected = this.finalizedSortField === sortField;\n    const displayName = SORT_OPTIONS[sortField].displayName;\n    const onSelected =\n      options?.onSelected ?? (() => this.clearAlphaBarFilters());\n\n    return html`\n      <button\n        class=${isSelected ? 'selected' : ''}\n        data-title=${displayName}\n        @click=${(e: Event) => {\n          e.preventDefault();\n          this.dropdownBackdropVisible = false;\n          if (this.finalizedSortField !== sortField) {\n            onSelected?.(e);\n            this.setSelectedSort(sortField);\n          }\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: string;\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}\n        class=${options.selected ? 'selected' : ''}\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          data-title=${options.displayName}\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          ${SORT_OPTIONS[sortField].displayName}\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\n    const sortField = e.detail.option.id as SortField;\n    this.setSelectedSort(sortField);\n    if (this.viewOptionSelected) {\n      this.lastSelectedViewSort = sortField as ViewsSortField;\n    } else if (this.dateOptionSelected) {\n      this.lastSelectedDateSort = sortField as DateSortField;\n    }\n  }\n\n  //\n  // SORT OPTION TEMPLATES\n  //\n\n  /**\n   * Template for the Relevance sort selector button, or `nothing` if the relevance\n   * field is not available for display.\n   */\n  private get relevanceSortSelectorTemplate(): TemplateResult | typeof nothing {\n    if (!this.sortFieldAvailability.relevance) return nothing;\n    return this.getSortSelectorButton(SortField.relevance);\n  }\n\n  /**\n   * Template for the Views sort selector button.\n   * This is shown instead of the views dropdown when only a single views sort field\n   * is available.\n   */\n  private get viewsSortSelectorTemplate(): TemplateResult | typeof nothing {\n    const { availableViewsFields } = this;\n    if (availableViewsFields.length < 1) return nothing;\n    return this.getSortSelectorButton(availableViewsFields[0]);\n  }\n\n  /**\n   * Template for the Title sort selector button, or `nothing` if the title field is\n   * not available for display.\n   */\n  private get titleSortSelectorTemplate(): TemplateResult | typeof nothing {\n    if (!this.sortFieldAvailability.title) return nothing;\n\n    return this.getSortSelectorButton(SortField.title, {\n      onSelected: () => {\n        this.alphaSelectorVisible = 'title';\n        this.selectedCreatorFilter = null;\n        this.emitCreatorLetterChangedEvent();\n      },\n    });\n  }\n\n  /**\n   * Template for the Date sort selector button.\n   * This is shown instead of the dates dropdown when only a single date sort field\n   * is available.\n   */\n  private get dateSortSelectorTemplate(): TemplateResult | typeof nothing {\n    const { availableDateFields } = this;\n    if (availableDateFields.length < 1) return nothing;\n    return this.getSortSelectorButton(availableDateFields[0]);\n  }\n\n  /**\n   * Template for the Creator sort selector button, or `nothing` if the creator field\n   * is not available for display.\n   */\n  private get creatorSortSelectorTemplate(): TemplateResult | typeof nothing {\n    if (!this.sortFieldAvailability.creator) return nothing;\n\n    return this.getSortSelectorButton(SortField.creator, {\n      onSelected: () => {\n        this.alphaSelectorVisible = 'creator';\n        this.selectedTitleFilter = null;\n        this.emitTitleLetterChangedEvent();\n      },\n    });\n  }\n\n  /**\n   * Template for the Views dropdown, shown when 2+ views sort fields are available.\n   */\n  private get viewsDropdownTemplate(): TemplateResult {\n    const displayedOptions = ALL_VIEWS_SORT_FIELDS.filter(\n      field => this.sortFieldAvailability[field],\n    ).map(field => this.getDropdownOption(field));\n\n    return this.getSortDropdown({\n      displayName: this.viewSortDisplayName,\n      id: 'views-dropdown',\n      selected: this.viewOptionSelected,\n      dropdownOptions: displayedOptions,\n      selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        if (this.dateDropdown) this.dateDropdown.open = false;\n        const viewsDropdown = this.viewsDropdown as IaDropdown;\n        this.dropdownBackdropVisible = viewsDropdown.open;\n        viewsDropdown.classList.toggle('open', viewsDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.viewsDropdown?.open && !this.viewOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(this.lastSelectedViewSort);\n        }\n      },\n    });\n  }\n\n  /**\n   * Template for the Date dropdown, shown when 2+ date sort fields are available.\n   */\n  private get dateDropdownTemplate(): TemplateResult {\n    const displayedOptions = ALL_DATE_SORT_FIELDS.filter(\n      field => this.sortFieldAvailability[field],\n    ).map(field => this.getDropdownOption(field));\n\n    return this.getSortDropdown({\n      displayName: this.dateSortDisplayName,\n      id: 'date-dropdown',\n      selected: this.dateOptionSelected,\n      dropdownOptions: displayedOptions,\n      selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',\n      onOptionSelected: this.dropdownOptionSelected,\n      onDropdownClick: () => {\n        if (this.viewsDropdown) this.viewsDropdown.open = false;\n        const dateDropdown = this.dateDropdown as IaDropdown;\n        this.dropdownBackdropVisible = dateDropdown.open;\n        dateDropdown.classList.toggle('open', dateDropdown.open);\n      },\n      onLabelInteraction: (e: Event) => {\n        if (!this.dateDropdown?.open && !this.dateOptionSelected) {\n          e.stopPropagation();\n          this.clearAlphaBarFilters();\n          this.setSelectedSort(this.lastSelectedDateSort);\n        }\n      },\n    });\n  }\n\n  /**\n   * Provides the appropriate template to use for Views sorting, depending on how many\n   * views sort fields are available.\n   */\n  private get allViewsSortOptionsTemplate(): TemplateResult | typeof nothing {\n    const numViewsSortOptions = this.availableViewsFields.length;\n    switch (numViewsSortOptions) {\n      case 0:\n        return nothing;\n      case 1:\n        return this.viewsSortSelectorTemplate;\n      default:\n        return this.viewsDropdownTemplate;\n    }\n  }\n\n  /**\n   * Provides the appropriate template to use for Date sorting, depending on how many\n   * date sort fields are available.\n   */\n  private get allDateSortOptionsTemplate(): TemplateResult | typeof nothing {\n    const numDateSortOptions = this.availableDateFields.length;\n    switch (numDateSortOptions) {\n      case 0:\n        return nothing;\n      case 1:\n        return this.dateSortSelectorTemplate;\n      default:\n        return this.dateDropdownTemplate;\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  /** Added data-testid for Playwright testing * */\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            data-testid=\"grid-button\"\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            data-testid=\"list-detail-button\"\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            data-testid=\"list-compact-button\"\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      if (!dropdown) continue;\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(\n      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\n    );\n  }\n\n  private handleSortDirectionClicked(): void {\n    if (\n      !this.sortDirection &&\n      this.defaultSortField &&\n      this.defaultSortDirection\n    ) {\n      // When the sort direction is merely defaulted (not set by the user), clicking\n      // the toggled button should \"promote\" the default sort to an explicitly-set one\n      // and then toggle it as usual.\n      this.selectedSort = this.defaultSortField;\n      this.sortDirection = this.defaultSortDirection;\n    }\n\n    this.toggleSortDirection();\n  }\n\n  private setSelectedSort(sort: SortField) {\n    this.selectedSort = sort;\n    // Apply this field's default sort direction\n    const sortOption = SORT_OPTIONS[sort];\n    this.sortDirection = sortOption.defaultSortDirection;\n    this.emitSortChangedEvent();\n  }\n\n  /** The current sort field, or the default one if no explicit sort is set */\n  private get finalizedSortField(): SortField {\n    return this.selectedSort === SortField.default\n      ? this.defaultSortField\n      : this.selectedSort;\n  }\n\n  /** The current sort direction, or the default one if no explicit direction is set */\n  private get finalizedSortDirection(): SortDirection | null {\n    return this.sortDirection === null\n      ? this.defaultSortDirection\n      : this.sortDirection;\n  }\n\n  /** Whether the sort direction button should be enabled for the current sort */\n  private get canChangeSortDirection(): boolean {\n    return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\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.datefavorited,\n      SortField.datearchived,\n      SortField.date,\n      SortField.datereviewed,\n      SortField.dateadded,\n    ];\n    return dateSortFields.includes(this.finalizedSortField);\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.finalizedSortField);\n  }\n\n  /**\n   * The display name of the last selected date field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get dateSortDisplayName(): string {\n    return SORT_OPTIONS[this.lastSelectedDateSort].displayName;\n  }\n\n  /**\n   * The display name of the last selected view field\n   *\n   * @readonly\n   * @private\n   * @type {string}\n   * @memberof SortFilterBar\n   */\n  private get viewSortDisplayName(): string {\n    return SORT_OPTIONS[this.lastSelectedViewSort].displayName;\n  }\n\n  /**\n   * Array of all the views sorts that should be shown\n   */\n  private get availableViewsFields(): SortField[] {\n    return ALL_VIEWS_SORT_FIELDS.filter(\n      field => this.sortFieldAvailability[field],\n    );\n  }\n\n  /**\n   * Array of all the date sorts that should be shown\n   */\n  private get availableDateFields(): SortField[] {\n    return ALL_DATE_SORT_FIELDS.filter(\n      field => this.sortFieldAvailability[field],\n    );\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: flex-start;\n          align-items: center;\n          border-bottom: 1px solid #2c2c2c;\n          font-size: 1.4rem;\n        }\n\n        #sort-options {\n          display: flex;\n          align-items: center;\n          flex-grow: 1;\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        /**\n         * Fix to not shift the sort-bar options when get selected\n         */\n        #desktop-sort-selector li button::before,\n        #desktop-sort-selector .dropdown-label::before {\n          display: block;\n          content: attr(data-title);\n          font-weight: bold;\n          height: 0;\n          overflow: hidden;\n          visibility: hidden;\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          font-family: var(--ia-theme-base-font-family);\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":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAKpC,OAAO,8BAA8B,CAAC;AAGtC,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EAGrB,uBAAuB,EAGvB,YAAY,EACZ,SAAS,GAEV,MAAM,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKzC,IAAM,aAAa,GAAnB,MAAM,aACX,SAAQ,UAAU;IADb;;QAOL,uDAAuD;QAC3B,yBAAoB,GAAyB,IAAI,CAAC;QAE9E,mDAAmD;QACvB,qBAAgB,GAGxC,SAAS,CAAC,SAAS,CAAC;QAExB,mDAAmD;QACvB,oBAAe,GACzC,SAAS,CAAC,UAAU,CAAC;QAEvB,kDAAkD;QACtB,oBAAe,GAAkB,SAAS,CAAC,IAAI,CAAC;QAE5E,oEAAoE;QACxC,kBAAa,GAAyB,IAAI,CAAC;QAEvE,kFAAkF;QACtD,iBAAY,GAAc,SAAS,CAAC,OAAO,CAAC;QAExE,yEAAyE;QAC7C,wBAAmB,GAAkB,IAAI,CAAC;QAEtE,2EAA2E;QAC/C,0BAAqB,GAAkB,IAAI,CAAC;QAExE;;;;;;;;;;;;WAYG;QACyB,0BAAqB,GAAG,uBAAuB,CAAC;QAE5E,kGAAkG;QACtD,0BAAqB,GAC/D,KAAK,CAAC;QAER,2GAA2G;QAE3G,yBAAoB,GAAY,KAAK,CAAC;QAUtC;;WAEG;QACc,yBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC;QAE7D;;WAEG;QACc,yBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC;QAE7D;;;WAGG;QACM,yBAAoB,GAAyB,IAAI,CAAC;QAE3D;;;WAGG;QACM,4BAAuB,GAAG,KAAK,CAAC;QAEzC;;;WAGG;QACM,8BAAyB,GAAG,CAAC,CAAC;QAEvC;;;WAGG;QACM,8BAAyB,GAAG,CAAC,CAAC;QAmI/B,uCAAkC,GAAG,CAAC,CAAgB,EAAE,EAAE;YAChE,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;IA++BJ,CAAC;IA1lCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;cAKD,CAAC,IAAI,CAAC,qBAAqB;YAC3B,CAAC,CAAC,IAAI,CAAA;;sBAEE,IAAI,CAAC,6BAA6B;;+CAET,GAAG,CAAC,UAAU,CAAC;;sBAExC,IAAI,CAAC,0BAA0B;sBAC/B,IAAI,CAAC,2BAA2B;;iBAErC;YACH,CAAC,CAAC,IAAI,CAAA,mCAAmC;;;;YAI3C,IAAI,CAAC,oBAAoB;YACzB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,qBAAqB;qBACvB;;;UAGX,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO;UAC9D,IAAI,CAAC,gBAAgB;;KAE1B,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,OAAuB;QAChC,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACnE,mEAAmE;YACnE,0DAA0D;YAC1D,IACE,IAAI,CAAC,YAAY;gBACjB,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,OAAO;gBACvC,IAAI,CAAC,aAAa,KAAK,IAAI,EAC3B,CAAC;gBACD,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACzD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC;YACvD,CAAC;YAED,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAoC,CAAC;YACxE,CAAC;iBAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,kBAAmC,CAAC;YACvE,CAAC;QACH,CAAC;QAED,mFAAmF;QACnF,IAAI,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACnE,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;QACtC,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvE,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;QACxC,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,uBAAuB,CAAC,EAAE,CAAC;YAC1E,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAC7B,gBAAgB,CACgB,CAAC;YACnC,IAAI,WAAW;gBAAE,IAAI,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC;YAC5D,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,QAAQ,CAAC,gBAAgB,CACvB,SAAS,EACT,IAAI,CAAC,kCAAkC,CACxC,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,mBAAmB,CAC1B,SAAS,EACT,IAAI,CAAC,kCAAkC,CACxC,CAAC;QACJ,CAAC;IACH,CAAC;IAQD,iBAAiB;;QACf,MAAA,KAAK,CAAC,iBAAiB,oDAAI,CAAC;QAC5B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,wBAAwB,CAC9B,cAA6C;QAE7C,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,cAAc,CAAC,cAAc,CAAC;gBAC5B,MAAM,EAAE,IAAI,CAAC,qBAAqB;gBAClC,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,cAAc,CAAC,cAAc,CAAC;gBAC5B,MAAM,EAAE,IAAI,CAAC,oBAAoB;gBACjC,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QAEjC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;gBAC9B,MAAM,EAAE,IAAI,CAAC,qBAAqB;gBAClC,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;gBAC9B,MAAM,EAAE,IAAI,CAAC,oBAAoB;gBACjC,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,YAAY,CAAC,KAA0B;QACrC,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/C,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC3D,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACvD,IAAI,CAAC,yBAAyB,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC3D,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,yBAAyB,GAAG,EAAE,GAAG,IAAI,CAAC,yBAAyB,CAAC;IAC9E,CAAC;IAED;;;OAGG;IACH,IAAY,gBAAgB;QAC1B,IAAI,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC;YAAE,OAAO,OAAO,CAAC;QAEtE,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE,CAAC;YACvC,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,OAAO,IAAI,CAAC,kBAAkB,CAAC;YACpE,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC,gBAAgB,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,oBAAoB,KAAK,SAAS;gBAC5C,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBACzB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAC5B,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,0DAA0D;IAC1D,IAAY,6BAA6B;QACvC,MAAM,6BAA6B,GACjC,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;QAC5D,MAAM,OAAO,GAAG,aAAa,6BAA6B,OAAO,CAAC;QAElE,OAAO,IAAI,CAAA;;;oBAGK,CAAC,IAAI,CAAC,sBAAsB;iBAC/B,IAAI,CAAC,0BAA0B;;gCAEhB,OAAO;UAC7B,IAAI,CAAC,iBAAiB;;KAE3B,CAAC;IACJ,CAAC;IAED,uFAAuF;IACvF,IAAY,iBAAiB;QAC3B,wEAAwE;QACxE,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACjC,OAAO,IAAI,CAAA,oCAAoC,gBAAgB,QAAQ,CAAC;QAC1E,CAAC;QAED,+DAA+D;QAC/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;;KAEtE,CAAC;IACJ,CAAC;IAED,kEAAkE;IAClE,IAAY,2BAA2B;QACrC,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;;;gBAGjD,IAAI,CAAC,6BAA6B;gBAClC,IAAI,CAAC,2BAA2B;gBAChC,IAAI,CAAC,yBAAyB;gBAC9B,IAAI,CAAC,0BAA0B;gBAC/B,IAAI,CAAC,2BAA2B;;;KAG3C,CAAC;IACJ,CAAC;IAED,iEAAiE;IACjE,IAAY,0BAA0B;QACpC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,MAAM,CACzD,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,cAAc,IAAI,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,CACnE,CAAC;QAEF,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;;UAEvD,IAAI,CAAC,eAAe,CAAC;YACrB,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,WAAW;YAC9D,EAAE,EAAE,iBAAiB;YACrB,QAAQ,EAAE,IAAI;YACd,eAAe,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAC1C,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,CAClC;YACD,cAAc,EAAE,IAAI,CAAC,kBAAkB;YACvC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;YACxC,eAAe,EAAE,GAAG,EAAE;gBACpB,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;gBACxD,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAClC,MAAM,EACN,IAAI,CAAC,cAAc,CAAC,IAAI,CACzB,CAAC;YACJ,CAAC;SACF,CAAC;;KAEL,CAAC;IACJ,CAAC;IAED;;;;;;;;;OASG;IACK,qBAAqB,CAC3B,SAAoB,EACpB,OAEC;;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,KAAK,SAAS,CAAC;QACzD,MAAM,WAAW,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC;QACxD,MAAM,UAAU,GACd,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,mCAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAE7D,OAAO,IAAI,CAAA;;gBAEC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;qBACvB,WAAW;iBACf,CAAC,CAAQ,EAAE,EAAE;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;YACrC,IAAI,IAAI,CAAC,kBAAkB,KAAK,SAAS,EAAE,CAAC;gBAC1C,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,CAAC;gBAChB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;;UAEC,WAAW;;KAEhB,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;OAaG;IACK,eAAe,CAAC,OASvB;;QACC,OAAO,IAAI,CAAA;;aAEF,OAAO,CAAC,EAAE;gBACP,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;yBAIzB,OAAO,CAAC,QAAQ;mBACtB,OAAO,CAAC,eAAe;0BAChB,MAAA,OAAO,CAAC,cAAc,mCAAI,EAAE;0BAC5B,MAAA,OAAO,CAAC,gBAAgB,mCAAI,OAAO;iBAC5C,MAAA,OAAO,CAAC,eAAe,mCAAI,OAAO;;;;;uBAK5B,OAAO,CAAC,WAAW;mBACvB,MAAA,OAAO,CAAC,kBAAkB,mCAAI,OAAO;qBACnC,OAAO,CAAC,kBAAkB;YACnC,CAAC,CAAC,CAAC,CAAgB,EAAE,EAAE;;gBACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;oBACvC,MAAA,OAAO,CAAC,kBAAkB,wDAAG,CAAC,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC;YACH,CAAC,CAAC,OAAO;;YAET,OAAO,CAAC,WAAW;;;KAG1B,CAAC;IACJ,CAAC;IAED,yEAAyE;IACjE,iBAAiB,CAAC,SAAoB;QAC5C,OAAO;YACL,EAAE,EAAE,SAAS;YACb,eAAe,EAAE,GAAG,EAAE;gBACpB,IAAI,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;YAC1C,CAAC;YACD,KAAK,EAAE,IAAI,CAAA;;YAEL,YAAY,CAAC,SAAS,CAAC,CAAC,WAAW;;OAExC;SACF,CAAC;IACJ,CAAC;IAED,4DAA4D;IACpD,sBAAsB,CAAC,CAA2C;QACxE,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAe,CAAC;QAClD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAChC,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,IAAI,CAAC,oBAAoB,GAAG,SAA2B,CAAC;QAC1D,CAAC;aAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACnC,IAAI,CAAC,oBAAoB,GAAG,SAA0B,CAAC;QACzD,CAAC;IACH,CAAC;IAED,EAAE;IACF,wBAAwB;IACxB,EAAE;IAEF;;;OAGG;IACH,IAAY,6BAA6B;QACvC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAC1D,OAAO,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACzD,CAAC;IAED;;;;OAIG;IACH,IAAY,yBAAyB;QACnC,MAAM,EAAE,oBAAoB,EAAE,GAAG,IAAI,CAAC;QACtC,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,OAAO,CAAC;QACpD,OAAO,IAAI,CAAC,qBAAqB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED;;;OAGG;IACH,IAAY,yBAAyB;QACnC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEtD,OAAO,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,KAAK,EAAE;YACjD,UAAU,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC;gBACpC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;gBAClC,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACvC,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,IAAY,wBAAwB;QAClC,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC;QACrC,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC;YAAE,OAAO,OAAO,CAAC;QACnD,OAAO,IAAI,CAAC,qBAAqB,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;;OAGG;IACH,IAAY,2BAA2B;QACrC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE,OAAO,OAAO,CAAC;QAExD,OAAO,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,OAAO,EAAE;YACnD,UAAU,EAAE,GAAG,EAAE;gBACf,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;gBACtC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;gBAChC,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACrC,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,IAAY,qBAAqB;QAC/B,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,MAAM,CACnD,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAC3C,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAC,eAAe,CAAC;YAC1B,WAAW,EAAE,IAAI,CAAC,mBAAmB;YACrC,EAAE,EAAE,gBAAgB;YACpB,QAAQ,EAAE,IAAI,CAAC,kBAAkB;YACjC,eAAe,EAAE,gBAAgB;YACjC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACtE,gBAAgB,EAAE,IAAI,CAAC,sBAAsB;YAC7C,eAAe,EAAE,GAAG,EAAE;gBACpB,IAAI,IAAI,CAAC,YAAY;oBAAE,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,KAAK,CAAC;gBACtD,MAAM,aAAa,GAAG,IAAI,CAAC,aAA2B,CAAC;gBACvD,IAAI,CAAC,uBAAuB,GAAG,aAAa,CAAC,IAAI,CAAC;gBAClD,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;YAC7D,CAAC;YACD,kBAAkB,EAAE,CAAC,CAAQ,EAAE,EAAE;;gBAC/B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC1D,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBAClD,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,IAAY,oBAAoB;QAC9B,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,MAAM,CAClD,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAC3C,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QAE9C,OAAO,IAAI,CAAC,eAAe,CAAC;YAC1B,WAAW,EAAE,IAAI,CAAC,mBAAmB;YACrC,EAAE,EAAE,eAAe;YACnB,QAAQ,EAAE,IAAI,CAAC,kBAAkB;YACjC,eAAe,EAAE,gBAAgB;YACjC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACtE,gBAAgB,EAAE,IAAI,CAAC,sBAAsB;YAC7C,eAAe,EAAE,GAAG,EAAE;gBACpB,IAAI,IAAI,CAAC,aAAa;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK,CAAC;gBACxD,MAAM,YAAY,GAAG,IAAI,CAAC,YAA0B,CAAC;gBACrD,IAAI,CAAC,uBAAuB,GAAG,YAAY,CAAC,IAAI,CAAC;gBACjD,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;YAC3D,CAAC;YACD,kBAAkB,EAAE,CAAC,CAAQ,EAAE,EAAE;;gBAC/B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBACzD,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,IAAI,CAAC,oBAAoB,EAAE,CAAC;oBAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;gBAClD,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,IAAY,2BAA2B;QACrC,MAAM,mBAAmB,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;QAC7D,QAAQ,mBAAmB,EAAE,CAAC;YAC5B,KAAK,CAAC;gBACJ,OAAO,OAAO,CAAC;YACjB,KAAK,CAAC;gBACJ,OAAO,IAAI,CAAC,yBAAyB,CAAC;YACxC;gBACE,OAAO,IAAI,CAAC,qBAAqB,CAAC;QACtC,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,IAAY,0BAA0B;QACpC,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC;QAC3D,QAAQ,kBAAkB,EAAE,CAAC;YAC3B,KAAK,CAAC;gBACJ,OAAO,OAAO,CAAC;YACjB,KAAK,CAAC;gBACJ,OAAO,IAAI,CAAC,wBAAwB,CAAC;YACvC;gBACE,OAAO,IAAI,CAAC,oBAAoB,CAAC;QACrC,CAAC;IACH,CAAC;IAED,qEAAqE;IAC7D,iBAAiB,CAAC,CAA2C;QACnE,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QAErC,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAe,CAAC;QAClD,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAEhC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,IAAI,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;QACD,IAAI,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC1D,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,6BAA6B,EAAE,CAAC;QACvC,CAAC;IACH,CAAC;IAED,4DAA4D;IAC5D,iDAAiD;IACjD,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAA;;;;;qBAKM,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC5B,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;cAIjD,QAAQ;;;;;;qBAMD,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;QACnC,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;cAIxD,QAAQ;;;;;;qBAMD,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,GAAG,cAAc,CAAC;QACpC,CAAC;oBACO,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;cAIzD,WAAW;;;;KAIpB,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,gBAAgB;QAC1B,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,cAAc;iBACnB,IAAI,CAAC,cAAc;;KAE/B,CAAC;IACJ,CAAC;IAED,2DAA2D;IACnD,cAAc;QACpB,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,MAAM,YAAY,GAAG;YACnB,IAAI,CAAC,aAAa;YAClB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC;QACF,KAAK,MAAM,QAAQ,IAAI,YAAY,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ;gBAAE,SAAS;YACxB,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;YACtB,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,SAAoB;QAClD,sFAAsF;QACtF,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,gBAAgB,CAAC,aAA4B;QACnD,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QACnC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,kEAAkE;IAC1D,mBAAmB;QACzB,IAAI,CAAC,gBAAgB,CACnB,IAAI,CAAC,sBAAsB,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CACxD,CAAC;IACJ,CAAC;IAEO,0BAA0B;QAChC,IACE,CAAC,IAAI,CAAC,aAAa;YACnB,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,oBAAoB,EACzB,CAAC;YACD,8EAA8E;YAC9E,gFAAgF;YAChF,+BAA+B;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC;YAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,eAAe,CAAC,IAAe;QACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,4CAA4C;QAC5C,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC;QACrD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,4EAA4E;IAC5E,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,OAAO;YAC5C,CAAC,CAAC,IAAI,CAAC,gBAAgB;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;IACxB,CAAC;IAED,qFAAqF;IACrF,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAC,aAAa,KAAK,IAAI;YAChC,CAAC,CAAC,IAAI,CAAC,oBAAoB;YAC3B,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IACzB,CAAC;IAED,+EAA+E;IAC/E,IAAY,sBAAsB;QAChC,OAAO,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC;IAC/D,CAAC;IAED;;;;;;;;;OASG;IACH,IAAY,kBAAkB;QAC5B,MAAM,cAAc,GAAgB;YAClC,SAAS,CAAC,aAAa;YACvB,SAAS,CAAC,YAAY;YACtB,SAAS,CAAC,IAAI;YACd,SAAS,CAAC,YAAY;YACtB,SAAS,CAAC,SAAS;SACpB,CAAC;QACF,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC;IAED;;;;;;;;;OASG;IACH,IAAY,kBAAkB;QAC5B,MAAM,cAAc,GAAgB;YAClC,SAAS,CAAC,WAAW;YACrB,SAAS,CAAC,UAAU;SACrB,CAAC;QACF,OAAO,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,mBAAmB;QAC7B,OAAO,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC;IAC7D,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,mBAAmB;QAC7B,OAAO,YAAY,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC;IAC7D,CAAC;IAED;;OAEG;IACH,IAAY,oBAAoB;QAC9B,OAAO,qBAAqB,CAAC,MAAM,CACjC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAC3C,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAY,mBAAmB;QAC7B,OAAO,oBAAoB,CAAC,MAAM,CAChC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAC3C,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,mBAAmB;sBAC1B,MAAA,IAAI,CAAC,oBAAoB,0CAAE,KAAK;;uBAE/B,IAAI,CAAC,kBAAkB;kBAC5B,CAAC;IACjB,CAAC;IAED,IAAY,kBAAkB;;QAC5B,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,qBAAqB;sBAC5B,MAAA,IAAI,CAAC,oBAAoB,0CAAE,OAAO;;uBAEjC,IAAI,CAAC,oBAAoB;kBAC9B,CAAC;IACjB,CAAC;IAEO,kBAAkB,CACxB,CAAsD;;QAEtD,IAAI,CAAC,mBAAmB,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,2BAA2B,EAAE,CAAC;IACrC,CAAC;IAEO,oBAAoB,CAC1B,CAAsD;;QAEtD,IAAI,CAAC,qBAAqB,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,cAAc,mCAAI,IAAI,CAAC;QAC7D,IAAI,CAAC,6BAA6B,EAAE,CAAC;IACvC,CAAC;IAEO,2BAA2B;QACjC,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,oBAAoB,EACpB;YACE,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,mBAAmB,EAAE;SACrD,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,6BAA6B;QACnC,MAAM,KAAK,GAAG,IAAI,WAAW,CAC3B,sBAAsB,EACtB;YACE,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAAE;SACvD,CACF,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,kBAAkB;QACxB,MAAM,KAAK,GAAG,IAAI,WAAW,CAE1B,oBAAoB,EAAE;YACvB,MAAM,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEO,oBAAoB;QAC1B,MAAM,KAAK,GAAG,IAAI,WAAW,CAG1B,aAAa,EAAE;YAChB,MAAM,EAAE;gBACN,YAAY,EAAE,IAAI,CAAC,YAAY;gBAC/B,aAAa,EAAE,IAAI,CAAC,aAAa;aAClC;SACF,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAsOF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAntC6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqC;AAGpC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAmD;AAGlD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAGH;AAGI;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACJ;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAiD;AAGhD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA4C;AAG3C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA6C;AAG5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA2C;AAG1C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAA6C;AAe5C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAiD;AAGhC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACnC;AAIR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACL;AAGV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAGzB;AAE0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAgD;AAK1D;IAAhB,KAAK,EAAE;2DAAqD;AAK5C;IAAhB,KAAK,EAAE;2DAAqD;AAMpD;IAAR,KAAK,EAAE;2DAAmD;AAMlD;IAAR,KAAK,EAAE;8DAAiC;AAMhC;IAAR,KAAK,EAAE;gEAA+B;AAM9B;IAAR,KAAK,EAAE;gEAA+B;AAO/B;IADP,KAAK,CAAC,yBAAyB,CAAC;2DACe;AAOxC;IADP,KAAK,CAAC,0BAA0B,CAAC;4DACa;AAIvC;IADP,KAAK,CAAC,iBAAiB,CAAC;oDACU;AAI3B;IADP,KAAK,CAAC,gBAAgB,CAAC;mDACU;AAI1B;IADP,KAAK,CAAC,kBAAkB,CAAC;qDACU;AA5HzB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAwtCzB","sourcesContent":["import {\r\n  LitElement,\r\n  html,\r\n  css,\r\n  nothing,\r\n  PropertyValues,\r\n  TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property, query, state } from 'lit/decorators.js';\r\nimport { msg } from '@lit/localize';\r\nimport type {\r\n  SharedResizeObserverInterface,\r\n  SharedResizeObserverResizeHandlerInterface,\r\n} from '@internetarchive/shared-resize-observer';\r\nimport '@internetarchive/ia-dropdown';\r\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\r\nimport type { SortDirection } from '@internetarchive/search-service';\r\nimport {\r\n  ALL_DATE_SORT_FIELDS,\r\n  ALL_VIEWS_SORT_FIELDS,\r\n  CollectionDisplayMode,\r\n  DateSortField,\r\n  defaultSortAvailability,\r\n  PrefixFilterCounts,\r\n  PrefixFilterType,\r\n  SORT_OPTIONS,\r\n  SortField,\r\n  ViewsSortField,\r\n} from '../models';\r\nimport './alpha-bar';\r\n\r\nimport { sortUpIcon } from './img/sort-toggle-up';\r\nimport { sortDownIcon } from './img/sort-toggle-down';\r\nimport { sortDisabledIcon } from './img/sort-toggle-disabled';\r\nimport { tileIcon } from './img/tile';\r\nimport { listIcon } from './img/list';\r\nimport { compactIcon } from './img/compact';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\n\r\ntype AlphaSelector = 'creator' | 'title';\r\n\r\n@customElement('sort-filter-bar')\r\nexport class SortFilterBar\r\n  extends LitElement\r\n  implements SharedResizeObserverResizeHandlerInterface\r\n{\r\n  /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */\r\n  @property({ type: String }) displayMode?: CollectionDisplayMode;\r\n\r\n  /** The default sort direction to use if none is set */\r\n  @property({ type: String }) defaultSortDirection: SortDirection | null = null;\r\n\r\n  /** The default sort field to use if none is set */\r\n  @property({ type: String }) defaultSortField: Exclude<\r\n    SortField,\r\n    SortField.default\r\n  > = SortField.relevance;\r\n\r\n  /** Which view sort option to expose by default. */\r\n  @property({ type: String }) defaultViewSort: ViewsSortField =\r\n    SortField.weeklyview;\r\n\r\n  /** Which date sort option to expose by default */\r\n  @property({ type: String }) defaultDateSort: DateSortField = SortField.date;\r\n\r\n  /** The current sort direction (asc/desc), or null if none is set */\r\n  @property({ type: String }) sortDirection: SortDirection | null = null;\r\n\r\n  /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */\r\n  @property({ type: String }) selectedSort: SortField = SortField.default;\r\n\r\n  /** The currently selected title letter filter, or null if none is set */\r\n  @property({ type: String }) selectedTitleFilter: string | null = null;\r\n\r\n  /** The currently selected creator letter filter, or null if none is set */\r\n  @property({ type: String }) selectedCreatorFilter: string | null = null;\r\n\r\n  /**\r\n   * Map defining which sortable fields should be included on the sort bar.\r\n   *\r\n   * E.g.,\r\n   * ```\r\n   * {\r\n   *   [SortField.relevance]: true,\r\n   *   [SortField.date]: false,\r\n   *   [SortField.title]: true,\r\n   *   ...\r\n   * }\r\n   * ```\r\n   */\r\n  @property({ type: Object }) sortFieldAvailability = defaultSortAvailability;\r\n\r\n  /** Whether to replace the default sort options with a slot for customization (default `false`) */\r\n  @property({ type: Boolean, reflect: true }) enableSortOptionsSlot: boolean =\r\n    false;\r\n\r\n  /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */\r\n  @property({ type: Boolean, reflect: true })\r\n  suppressDisplayModes: boolean = false;\r\n\r\n  /** Maps of result counts for letters on the alphabet bar, for each letter filter type */\r\n  @property({ type: Object }) prefixFilterCountMap?: Record<\r\n    PrefixFilterType,\r\n    PrefixFilterCounts\r\n  >;\r\n\r\n  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;\r\n\r\n  /**\r\n   * The Views sort option that was most recently selected (or the default, if none has been selected yet)\r\n   */\r\n  @state() private lastSelectedViewSort = this.defaultViewSort;\r\n\r\n  /**\r\n   * The Date sort option that was most recently selected (or the default, if none has been selected yet)\r\n   */\r\n  @state() private lastSelectedDateSort = this.defaultDateSort;\r\n\r\n  /**\r\n   * Which of the alphabet bars (title/creator) should be shown, or null if one\r\n   * should not currently be rendered.\r\n   */\r\n  @state() alphaSelectorVisible: AlphaSelector | null = null;\r\n\r\n  /**\r\n   * Whether the transparent backdrop to catch clicks outside the dropdown menu\r\n   * should be rendered.\r\n   */\r\n  @state() dropdownBackdropVisible = false;\r\n\r\n  /**\r\n   * The width of the desktop view sort option container, updated upon each resize.\r\n   * Used for dynamically determining whether to use desktop or mobile view.\r\n   */\r\n  @state() desktopSortContainerWidth = 0;\r\n\r\n  /**\r\n   * The width of the full sort bar, updated upon each resize.\r\n   * Used for dynamically determining whether to use desktop or mobile view.\r\n   */\r\n  @state() selectorBarContainerWidth = 0;\r\n\r\n  /**\r\n   * The container for all the desktop view's sort options.\r\n   * Used for dynamically determining whether to use desktop or mobile view.\r\n   */\r\n  @query('#desktop-sort-container')\r\n  private desktopSortContainer!: HTMLUListElement;\r\n\r\n  /**\r\n   * The container for the full sort bar.\r\n   * Used for dynamically determining whether to use desktop or mobile view.\r\n   */\r\n  @query('#sort-selector-container')\r\n  private sortSelectorContainer!: HTMLDivElement;\r\n\r\n  /** The dropdown component containing options for weekly and all-time views */\r\n  @query('#views-dropdown')\r\n  private viewsDropdown?: IaDropdown;\r\n\r\n  /** The dropdown component containing all the available date options */\r\n  @query('#date-dropdown')\r\n  private dateDropdown?: IaDropdown;\r\n\r\n  /** The single, consolidated dropdown component shown in mobile view */\r\n  @query('#mobile-dropdown')\r\n  private mobileDropdown!: IaDropdown;\r\n\r\n  render() {\r\n    return html`\r\n      <div id=\"container\">\r\n        <section id=\"sort-bar\" aria-label=\"Sorting options\">\r\n          <slot name=\"sort-options-left\"></slot>\r\n          <div id=\"sort-options\">\r\n            ${!this.enableSortOptionsSlot\r\n              ? html`\r\n                  <div class=\"sort-direction-container\">\r\n                    ${this.sortDirectionSelectorTemplate}\r\n                  </div>\r\n                  <span class=\"sort-by-text\">${msg('Sort by:')}</span>\r\n                  <div id=\"sort-selector-container\">\r\n                    ${this.mobileSortSelectorTemplate}\r\n                    ${this.desktopSortSelectorTemplate}\r\n                  </div>\r\n                `\r\n              : html`<slot name=\"sort-options\"></slot>`}\r\n          </div>\r\n          <slot name=\"sort-options-right\"></slot>\r\n\r\n          ${this.suppressDisplayModes\r\n            ? nothing\r\n            : html`<div id=\"display-style-selector\">\r\n                ${this.displayOptionTemplate}\r\n              </div>`}\r\n        </section>\r\n\r\n        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}\r\n        ${this.alphaBarTemplate}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  willUpdate(changed: PropertyValues) {\r\n    if (changed.has('selectedSort') || changed.has('defaultSortField')) {\r\n      // If the sort is changed from its default without a direction set,\r\n      // we adopt the default sort direction for that sort type.\r\n      if (\r\n        this.selectedSort &&\r\n        this.selectedSort !== SortField.default &&\r\n        this.sortDirection === null\r\n      ) {\r\n        const sortOption = SORT_OPTIONS[this.finalizedSortField];\r\n        this.sortDirection = sortOption.defaultSortDirection;\r\n      }\r\n\r\n      if (this.viewOptionSelected) {\r\n        this.lastSelectedViewSort = this.finalizedSortField as ViewsSortField;\r\n      } else if (this.dateOptionSelected) {\r\n        this.lastSelectedDateSort = this.finalizedSortField as DateSortField;\r\n      }\r\n    }\r\n\r\n    // If we change which dropdown options are defaulted, update the default selections\r\n    if (changed.has('defaultViewSort')) {\r\n      this.lastSelectedViewSort = this.defaultViewSort;\r\n    }\r\n    if (changed.has('defaultDateSort')) {\r\n      this.lastSelectedDateSort = this.defaultDateSort;\r\n    }\r\n  }\r\n\r\n  updated(changed: PropertyValues) {\r\n    if (changed.has('displayMode')) {\r\n      this.displayModeChanged();\r\n    }\r\n\r\n    if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {\r\n      this.alphaSelectorVisible = 'title';\r\n    }\r\n\r\n    if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {\r\n      this.alphaSelectorVisible = 'creator';\r\n    }\r\n\r\n    if (changed.has('dropdownBackdropVisible')) {\r\n      this.setupEscapeListeners();\r\n    }\r\n\r\n    if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {\r\n      const oldObserver = changed.get(\r\n        'resizeObserver',\r\n      ) as SharedResizeObserverInterface;\r\n      if (oldObserver) this.disconnectResizeObserver(oldObserver);\r\n      this.setupResizeObserver();\r\n    }\r\n  }\r\n\r\n  private setupEscapeListeners() {\r\n    if (this.dropdownBackdropVisible) {\r\n      document.addEventListener(\r\n        'keydown',\r\n        this.boundSortBarSelectorEscapeListener,\r\n      );\r\n    } else {\r\n      document.removeEventListener(\r\n        'keydown',\r\n        this.boundSortBarSelectorEscapeListener,\r\n      );\r\n    }\r\n  }\r\n\r\n  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {\r\n    if (e.key === 'Escape') {\r\n      this.closeDropdowns();\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback?.();\r\n    this.setupResizeObserver();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.resizeObserver) {\r\n      this.disconnectResizeObserver(this.resizeObserver);\r\n    }\r\n  }\r\n\r\n  private disconnectResizeObserver(\r\n    resizeObserver: SharedResizeObserverInterface,\r\n  ) {\r\n    if (this.sortSelectorContainer) {\r\n      resizeObserver.removeObserver({\r\n        target: this.sortSelectorContainer,\r\n        handler: this,\r\n      });\r\n    }\r\n\r\n    if (this.desktopSortContainer) {\r\n      resizeObserver.removeObserver({\r\n        target: this.desktopSortContainer,\r\n        handler: this,\r\n      });\r\n    }\r\n  }\r\n\r\n  private setupResizeObserver() {\r\n    if (!this.resizeObserver) return;\r\n\r\n    if (this.sortSelectorContainer) {\r\n      this.resizeObserver.addObserver({\r\n        target: this.sortSelectorContainer,\r\n        handler: this,\r\n      });\r\n    }\r\n\r\n    if (this.desktopSortContainer) {\r\n      this.resizeObserver.addObserver({\r\n        target: this.desktopSortContainer,\r\n        handler: this,\r\n      });\r\n    }\r\n  }\r\n\r\n  handleResize(entry: ResizeObserverEntry): void {\r\n    if (entry.target === this.desktopSortContainer) {\r\n      this.desktopSortContainerWidth = entry.contentRect.width;\r\n    } else if (entry.target === this.sortSelectorContainer) {\r\n      this.selectorBarContainerWidth = entry.contentRect.width;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether to show the mobile sort bar because there is not enough space\r\n   * for the desktop sort bar.\r\n   */\r\n  private get mobileSelectorVisible() {\r\n    return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;\r\n  }\r\n\r\n  /**\r\n   * Template to render the alphabet bar, or `nothing` if it should not be rendered\r\n   * for the current sort\r\n   */\r\n  private get alphaBarTemplate(): TemplateResult | typeof nothing {\r\n    if (!['title', 'creator'].includes(this.selectedSort)) return nothing;\r\n\r\n    if (this.alphaSelectorVisible === null) {\r\n      if (this.selectedSort === 'creator') return this.creatorSelectorBar;\r\n      if (this.selectedSort === 'title') return this.titleSelectorBar;\r\n    } else {\r\n      return this.alphaSelectorVisible === 'creator'\r\n        ? this.creatorSelectorBar\r\n        : this.titleSelectorBar;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  /** Template to render the sort direction toggle button */\r\n  private get sortDirectionSelectorTemplate(): TemplateResult {\r\n    const oppositeSortDirectionReadable =\r\n      this.sortDirection === 'asc' ? 'descending' : 'ascending';\r\n    const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;\r\n\r\n    return html`\r\n      <button\r\n        class=\"sort-direction-selector\"\r\n        ?disabled=${!this.canChangeSortDirection}\r\n        @click=${this.handleSortDirectionClicked}\r\n      >\r\n        <span class=\"sr-only\">${srLabel}</span>\r\n        ${this.sortDirectionIcon}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /** Template to render the sort direction button's icon in the correct current state */\r\n  private get sortDirectionIcon(): TemplateResult {\r\n    // Show a fully disabled icon for sort options without direction support\r\n    if (!this.canChangeSortDirection) {\r\n      return html`<div class=\"sort-direction-icon\">${sortDisabledIcon}</div>`;\r\n    }\r\n\r\n    // For all other sorts, show the ascending/descending direction\r\n    return html`\r\n      <div class=\"sort-direction-icon\">\r\n        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** The template to render all the sort options in desktop view */\r\n  private get desktopSortSelectorTemplate() {\r\n    return html`\r\n      <div\r\n        id=\"desktop-sort-container\"\r\n        class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}\r\n      >\r\n        <ul id=\"desktop-sort-selector\">\r\n          <li>${this.relevanceSortSelectorTemplate}</li>\r\n          <li>${this.allViewsSortOptionsTemplate}</li>\r\n          <li>${this.titleSortSelectorTemplate}</li>\r\n          <li>${this.allDateSortOptionsTemplate}</li>\r\n          <li>${this.creatorSortSelectorTemplate}</li>\r\n        </ul>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /** The template to render all the sort options in mobile view */\r\n  private get mobileSortSelectorTemplate() {\r\n    const displayedOptions = Object.values(SORT_OPTIONS).filter(\r\n      opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field],\r\n    );\r\n\r\n    return html`\r\n      <div\r\n        id=\"mobile-sort-container\"\r\n        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}\r\n      >\r\n        ${this.getSortDropdown({\r\n          displayName: SORT_OPTIONS[this.finalizedSortField].displayName,\r\n          id: 'mobile-dropdown',\r\n          selected: true,\r\n          dropdownOptions: displayedOptions.map(opt =>\r\n            this.getDropdownOption(opt.field),\r\n          ),\r\n          selectedOption: this.finalizedSortField,\r\n          onOptionSelected: this.mobileSortChanged,\r\n          onDropdownClick: () => {\r\n            this.dropdownBackdropVisible = this.mobileDropdown.open;\r\n            this.mobileDropdown.classList.toggle(\r\n              'open',\r\n              this.mobileDropdown.open,\r\n            );\r\n          },\r\n        })}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * This generates each of the non-dropdown sort option buttons.\r\n   *\r\n   * It manages the display value and the selected state of the option.\r\n   *\r\n   * @param sortField Which sort field the button represents\r\n   * @param options Additional options:\r\n   *   - `onSelected?: (e: Event) => void;` If this is provided, it will also be called when the option is selected.\r\n   *     Default is to clear any selected alphabetical filters.\r\n   */\r\n  private getSortSelectorButton(\r\n    sortField: SortField,\r\n    options?: {\r\n      onSelected?: (e: Event) => void;\r\n    },\r\n  ): TemplateResult {\r\n    const isSelected = this.finalizedSortField === sortField;\r\n    const displayName = SORT_OPTIONS[sortField].displayName;\r\n    const onSelected =\r\n      options?.onSelected ?? (() => this.clearAlphaBarFilters());\r\n\r\n    return html`\r\n      <button\r\n        class=${isSelected ? 'selected' : ''}\r\n        data-title=${displayName}\r\n        @click=${(e: Event) => {\r\n          e.preventDefault();\r\n          this.dropdownBackdropVisible = false;\r\n          if (this.finalizedSortField !== sortField) {\r\n            onSelected?.(e);\r\n            this.setSelectedSort(sortField);\r\n          }\r\n        }}\r\n      >\r\n        ${displayName}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Generates a dropdown component containing multiple grouped sort options.\r\n   *\r\n   * @param options.displayName The name to use for the dropdown's visible label\r\n   * @param options.id The id to apply to the dropdown element\r\n   * @param options.dropdownOptions An array of option objects used to populate the dropdown\r\n   * @param options.selectedOption The id of the option that should be initially selected\r\n   * @param options.selected A boolean indicating whether this dropdown should use its\r\n   *  selected appearance\r\n   * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown\r\n   * @param options.onDropdownClick A handler for click events on the dropdown\r\n   * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events\r\n   *  on the dropdown's label\r\n   */\r\n  private getSortDropdown(options: {\r\n    displayName: string;\r\n    id: string;\r\n    dropdownOptions: optionInterface[];\r\n    selectedOption?: string;\r\n    selected: boolean;\r\n    onOptionSelected?: (e: CustomEvent<{ option: optionInterface }>) => void;\r\n    onDropdownClick?: (e: PointerEvent) => void;\r\n    onLabelInteraction?: (e: Event) => void;\r\n  }): TemplateResult {\r\n    return html`\r\n      <ia-dropdown\r\n        id=${options.id}\r\n        class=${options.selected ? 'selected' : ''}\r\n        displayCaret\r\n        closeOnSelect\r\n        includeSelectedOption\r\n        .openViaButton=${options.selected}\r\n        .options=${options.dropdownOptions}\r\n        .selectedOption=${options.selectedOption ?? ''}\r\n        @optionSelected=${options.onOptionSelected ?? nothing}\r\n        @click=${options.onDropdownClick ?? nothing}\r\n      >\r\n        <span\r\n          class=\"dropdown-label\"\r\n          slot=\"dropdown-label\"\r\n          data-title=${options.displayName}\r\n          @click=${options.onLabelInteraction ?? nothing}\r\n          @keydown=${options.onLabelInteraction\r\n            ? (e: KeyboardEvent) => {\r\n                if (e.key === 'Enter' || e.key === ' ') {\r\n                  options.onLabelInteraction?.(e);\r\n                }\r\n              }\r\n            : nothing}\r\n        >\r\n          ${options.displayName}\r\n        </span>\r\n      </ia-dropdown>\r\n    `;\r\n  }\r\n\r\n  /** Generates a single dropdown option object for the given sort field */\r\n  private getDropdownOption(sortField: SortField): optionInterface {\r\n    return {\r\n      id: sortField,\r\n      selectedHandler: () => {\r\n        this.selectDropdownSortField(sortField);\r\n      },\r\n      label: html`\r\n        <span class=\"dropdown-option-label\">\r\n          ${SORT_OPTIONS[sortField].displayName}\r\n        </span>\r\n      `,\r\n    };\r\n  }\r\n\r\n  /** Handler for when any sort dropdown option is selected */\r\n  private dropdownOptionSelected(e: CustomEvent<{ option: optionInterface }>) {\r\n    this.dropdownBackdropVisible = false;\r\n    this.clearAlphaBarFilters();\r\n\r\n    const sortField = e.detail.option.id as SortField;\r\n    this.setSelectedSort(sortField);\r\n    if (this.viewOptionSelected) {\r\n      this.lastSelectedViewSort = sortField as ViewsSortField;\r\n    } else if (this.dateOptionSelected) {\r\n      this.lastSelectedDateSort = sortField as DateSortField;\r\n    }\r\n  }\r\n\r\n  //\r\n  // SORT OPTION TEMPLATES\r\n  //\r\n\r\n  /**\r\n   * Template for the Relevance sort selector button, or `nothing` if the relevance\r\n   * field is not available for display.\r\n   */\r\n  private get relevanceSortSelectorTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.sortFieldAvailability.relevance) return nothing;\r\n    return this.getSortSelectorButton(SortField.relevance);\r\n  }\r\n\r\n  /**\r\n   * Template for the Views sort selector button.\r\n   * This is shown instead of the views dropdown when only a single views sort field\r\n   * is available.\r\n   */\r\n  private get viewsSortSelectorTemplate(): TemplateResult | typeof nothing {\r\n    const { availableViewsFields } = this;\r\n    if (availableViewsFields.length < 1) return nothing;\r\n    return this.getSortSelectorButton(availableViewsFields[0]);\r\n  }\r\n\r\n  /**\r\n   * Template for the Title sort selector button, or `nothing` if the title field is\r\n   * not available for display.\r\n   */\r\n  private get titleSortSelectorTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.sortFieldAvailability.title) return nothing;\r\n\r\n    return this.getSortSelectorButton(SortField.title, {\r\n      onSelected: () => {\r\n        this.alphaSelectorVisible = 'title';\r\n        this.selectedCreatorFilter = null;\r\n        this.emitCreatorLetterChangedEvent();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Template for the Date sort selector button.\r\n   * This is shown instead of the dates dropdown when only a single date sort field\r\n   * is available.\r\n   */\r\n  private get dateSortSelectorTemplate(): TemplateResult | typeof nothing {\r\n    const { availableDateFields } = this;\r\n    if (availableDateFields.length < 1) return nothing;\r\n    return this.getSortSelectorButton(availableDateFields[0]);\r\n  }\r\n\r\n  /**\r\n   * Template for the Creator sort selector button, or `nothing` if the creator field\r\n   * is not available for display.\r\n   */\r\n  private get creatorSortSelectorTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.sortFieldAvailability.creator) return nothing;\r\n\r\n    return this.getSortSelectorButton(SortField.creator, {\r\n      onSelected: () => {\r\n        this.alphaSelectorVisible = 'creator';\r\n        this.selectedTitleFilter = null;\r\n        this.emitTitleLetterChangedEvent();\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Template for the Views dropdown, shown when 2+ views sort fields are available.\r\n   */\r\n  private get viewsDropdownTemplate(): TemplateResult {\r\n    const displayedOptions = ALL_VIEWS_SORT_FIELDS.filter(\r\n      field => this.sortFieldAvailability[field],\r\n    ).map(field => this.getDropdownOption(field));\r\n\r\n    return this.getSortDropdown({\r\n      displayName: this.viewSortDisplayName,\r\n      id: 'views-dropdown',\r\n      selected: this.viewOptionSelected,\r\n      dropdownOptions: displayedOptions,\r\n      selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',\r\n      onOptionSelected: this.dropdownOptionSelected,\r\n      onDropdownClick: () => {\r\n        if (this.dateDropdown) this.dateDropdown.open = false;\r\n        const viewsDropdown = this.viewsDropdown as IaDropdown;\r\n        this.dropdownBackdropVisible = viewsDropdown.open;\r\n        viewsDropdown.classList.toggle('open', viewsDropdown.open);\r\n      },\r\n      onLabelInteraction: (e: Event) => {\r\n        if (!this.viewsDropdown?.open && !this.viewOptionSelected) {\r\n          e.stopPropagation();\r\n          this.clearAlphaBarFilters();\r\n          this.setSelectedSort(this.lastSelectedViewSort);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Template for the Date dropdown, shown when 2+ date sort fields are available.\r\n   */\r\n  private get dateDropdownTemplate(): TemplateResult {\r\n    const displayedOptions = ALL_DATE_SORT_FIELDS.filter(\r\n      field => this.sortFieldAvailability[field],\r\n    ).map(field => this.getDropdownOption(field));\r\n\r\n    return this.getSortDropdown({\r\n      displayName: this.dateSortDisplayName,\r\n      id: 'date-dropdown',\r\n      selected: this.dateOptionSelected,\r\n      dropdownOptions: displayedOptions,\r\n      selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',\r\n      onOptionSelected: this.dropdownOptionSelected,\r\n      onDropdownClick: () => {\r\n        if (this.viewsDropdown) this.viewsDropdown.open = false;\r\n        const dateDropdown = this.dateDropdown as IaDropdown;\r\n        this.dropdownBackdropVisible = dateDropdown.open;\r\n        dateDropdown.classList.toggle('open', dateDropdown.open);\r\n      },\r\n      onLabelInteraction: (e: Event) => {\r\n        if (!this.dateDropdown?.open && !this.dateOptionSelected) {\r\n          e.stopPropagation();\r\n          this.clearAlphaBarFilters();\r\n          this.setSelectedSort(this.lastSelectedDateSort);\r\n        }\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Provides the appropriate template to use for Views sorting, depending on how many\r\n   * views sort fields are available.\r\n   */\r\n  private get allViewsSortOptionsTemplate(): TemplateResult | typeof nothing {\r\n    const numViewsSortOptions = this.availableViewsFields.length;\r\n    switch (numViewsSortOptions) {\r\n      case 0:\r\n        return nothing;\r\n      case 1:\r\n        return this.viewsSortSelectorTemplate;\r\n      default:\r\n        return this.viewsDropdownTemplate;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Provides the appropriate template to use for Date sorting, depending on how many\r\n   * date sort fields are available.\r\n   */\r\n  private get allDateSortOptionsTemplate(): TemplateResult | typeof nothing {\r\n    const numDateSortOptions = this.availableDateFields.length;\r\n    switch (numDateSortOptions) {\r\n      case 0:\r\n        return nothing;\r\n      case 1:\r\n        return this.dateSortSelectorTemplate;\r\n      default:\r\n        return this.dateDropdownTemplate;\r\n    }\r\n  }\r\n\r\n  /** Handler for when a new mobile sort dropdown option is selected */\r\n  private mobileSortChanged(e: CustomEvent<{ option: optionInterface }>) {\r\n    this.dropdownBackdropVisible = false;\r\n\r\n    const sortField = e.detail.option.id as SortField;\r\n    this.setSelectedSort(sortField);\r\n\r\n    this.alphaSelectorVisible = null;\r\n    if (sortField !== 'title' && this.selectedTitleFilter) {\r\n      this.selectedTitleFilter = null;\r\n      this.emitTitleLetterChangedEvent();\r\n    }\r\n    if (sortField !== 'creator' && this.selectedCreatorFilter) {\r\n      this.selectedCreatorFilter = null;\r\n      this.emitCreatorLetterChangedEvent();\r\n    }\r\n  }\r\n\r\n  /** Template for rendering the three display mode options */\r\n  /** Added data-testid for Playwright testing * */\r\n  private get displayOptionTemplate() {\r\n    return html`\r\n      <ul>\r\n        <li>\r\n          <button\r\n            id=\"grid-button\"\r\n            @click=${() => {\r\n              this.displayMode = 'grid';\r\n            }}\r\n            class=${this.displayMode === 'grid' ? 'active' : ''}\r\n            title=\"Tile view\"\r\n            data-testid=\"grid-button\"\r\n          >\r\n            ${tileIcon}\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button\r\n            id=\"list-detail-button\"\r\n            @click=${() => {\r\n              this.displayMode = 'list-detail';\r\n            }}\r\n            class=${this.displayMode === 'list-detail' ? 'active' : ''}\r\n            title=\"List view\"\r\n            data-testid=\"list-detail-button\"\r\n          >\r\n            ${listIcon}\r\n          </button>\r\n        </li>\r\n        <li>\r\n          <button\r\n            id=\"list-compact-button\"\r\n            @click=${() => {\r\n              this.displayMode = 'list-compact';\r\n            }}\r\n            class=${this.displayMode === 'list-compact' ? 'active' : ''}\r\n            title=\"Compact list view\"\r\n            data-testid=\"list-compact-button\"\r\n          >\r\n            ${compactIcon}\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for rendering the transparent backdrop to capture clicks outside the\r\n   * dropdown menu while it is open.\r\n   */\r\n  private get dropdownBackdrop() {\r\n    return html`\r\n      <div\r\n        id=\"sort-selector-backdrop\"\r\n        @keyup=${this.closeDropdowns}\r\n        @click=${this.closeDropdowns}\r\n      ></div>\r\n    `;\r\n  }\r\n\r\n  /** Closes all of the sorting dropdown components' menus */\r\n  private closeDropdowns() {\r\n    this.dropdownBackdropVisible = false;\r\n    const allDropdowns = [\r\n      this.viewsDropdown,\r\n      this.dateDropdown,\r\n      this.mobileDropdown,\r\n    ];\r\n    for (const dropdown of allDropdowns) {\r\n      if (!dropdown) continue;\r\n      dropdown.open = false;\r\n      dropdown.classList.remove('open');\r\n    }\r\n  }\r\n\r\n  private selectDropdownSortField(sortField: SortField) {\r\n    // When a dropdown sort option is selected, we additionally need to clear the backdrop\r\n    this.dropdownBackdropVisible = false;\r\n    this.setSelectedSort(sortField);\r\n  }\r\n\r\n  private clearAlphaBarFilters() {\r\n    this.alphaSelectorVisible = null;\r\n    this.selectedTitleFilter = null;\r\n    this.selectedCreatorFilter = null;\r\n    this.emitTitleLetterChangedEvent();\r\n    this.emitCreatorLetterChangedEvent();\r\n  }\r\n\r\n  private setSortDirection(sortDirection: SortDirection) {\r\n    this.sortDirection = sortDirection;\r\n    this.emitSortChangedEvent();\r\n  }\r\n\r\n  /** Toggles the current sort direction between 'asc' and 'desc' */\r\n  private toggleSortDirection() {\r\n    this.setSortDirection(\r\n      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc',\r\n    );\r\n  }\r\n\r\n  private handleSortDirectionClicked(): void {\r\n    if (\r\n      !this.sortDirection &&\r\n      this.defaultSortField &&\r\n      this.defaultSortDirection\r\n    ) {\r\n      // When the sort direction is merely defaulted (not set by the user), clicking\r\n      // the toggled button should \"promote\" the default sort to an explicitly-set one\r\n      // and then toggle it as usual.\r\n      this.selectedSort = this.defaultSortField;\r\n      this.sortDirection = this.defaultSortDirection;\r\n    }\r\n\r\n    this.toggleSortDirection();\r\n  }\r\n\r\n  private setSelectedSort(sort: SortField) {\r\n    this.selectedSort = sort;\r\n    // Apply this field's default sort direction\r\n    const sortOption = SORT_OPTIONS[sort];\r\n    this.sortDirection = sortOption.defaultSortDirection;\r\n    this.emitSortChangedEvent();\r\n  }\r\n\r\n  /** The current sort field, or the default one if no explicit sort is set */\r\n  private get finalizedSortField(): SortField {\r\n    return this.selectedSort === SortField.default\r\n      ? this.defaultSortField\r\n      : this.selectedSort;\r\n  }\r\n\r\n  /** The current sort direction, or the default one if no explicit direction is set */\r\n  private get finalizedSortDirection(): SortDirection | null {\r\n    return this.sortDirection === null\r\n      ? this.defaultSortDirection\r\n      : this.sortDirection;\r\n  }\r\n\r\n  /** Whether the sort direction button should be enabled for the current sort */\r\n  private get canChangeSortDirection(): boolean {\r\n    return SORT_OPTIONS[this.finalizedSortField].canSetDirection;\r\n  }\r\n\r\n  /**\r\n   * There are four date sort options.\r\n   *\r\n   * This checks to see if the current sort is one of them.\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {boolean}\r\n   * @memberof SortFilterBar\r\n   */\r\n  private get dateOptionSelected(): boolean {\r\n    const dateSortFields: SortField[] = [\r\n      SortField.datefavorited,\r\n      SortField.datearchived,\r\n      SortField.date,\r\n      SortField.datereviewed,\r\n      SortField.dateadded,\r\n    ];\r\n    return dateSortFields.includes(this.finalizedSortField);\r\n  }\r\n\r\n  /**\r\n   * There are two view sort options.\r\n   *\r\n   * This checks to see if the current sort is one of them.\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {boolean}\r\n   * @memberof SortFilterBar\r\n   */\r\n  private get viewOptionSelected(): boolean {\r\n    const viewSortFields: SortField[] = [\r\n      SortField.alltimeview,\r\n      SortField.weeklyview,\r\n    ];\r\n    return viewSortFields.includes(this.finalizedSortField);\r\n  }\r\n\r\n  /**\r\n   * The display name of the last selected date field\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {string}\r\n   * @memberof SortFilterBar\r\n   */\r\n  private get dateSortDisplayName(): string {\r\n    return SORT_OPTIONS[this.lastSelectedDateSort].displayName;\r\n  }\r\n\r\n  /**\r\n   * The display name of the last selected view field\r\n   *\r\n   * @readonly\r\n   * @private\r\n   * @type {string}\r\n   * @memberof SortFilterBar\r\n   */\r\n  private get viewSortDisplayName(): string {\r\n    return SORT_OPTIONS[this.lastSelectedViewSort].displayName;\r\n  }\r\n\r\n  /**\r\n   * Array of all the views sorts that should be shown\r\n   */\r\n  private get availableViewsFields(): SortField[] {\r\n    return ALL_VIEWS_SORT_FIELDS.filter(\r\n      field => this.sortFieldAvailability[field],\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Array of all the date sorts that should be shown\r\n   */\r\n  private get availableDateFields(): SortField[] {\r\n    return ALL_DATE_SORT_FIELDS.filter(\r\n      field => this.sortFieldAvailability[field],\r\n    );\r\n  }\r\n\r\n  private get titleSelectorBar() {\r\n    return html` <alpha-bar\r\n      .selectedLetter=${this.selectedTitleFilter}\r\n      .letterCounts=${this.prefixFilterCountMap?.title}\r\n      ariaLandmarkLabel=\"Filter by title letter\"\r\n      @letterChanged=${this.titleLetterChanged}\r\n    ></alpha-bar>`;\r\n  }\r\n\r\n  private get creatorSelectorBar() {\r\n    return html` <alpha-bar\r\n      .selectedLetter=${this.selectedCreatorFilter}\r\n      .letterCounts=${this.prefixFilterCountMap?.creator}\r\n      ariaLandmarkLabel=\"Filter by creator letter\"\r\n      @letterChanged=${this.creatorLetterChanged}\r\n    ></alpha-bar>`;\r\n  }\r\n\r\n  private titleLetterChanged(\r\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\r\n  ) {\r\n    this.selectedTitleFilter = e.detail.selectedLetter ?? null;\r\n    this.emitTitleLetterChangedEvent();\r\n  }\r\n\r\n  private creatorLetterChanged(\r\n    e: CustomEvent<{ selectedLetter: string | undefined }>,\r\n  ) {\r\n    this.selectedCreatorFilter = e.detail.selectedLetter ?? null;\r\n    this.emitCreatorLetterChangedEvent();\r\n  }\r\n\r\n  private emitTitleLetterChangedEvent() {\r\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\r\n      'titleLetterChanged',\r\n      {\r\n        detail: { selectedLetter: this.selectedTitleFilter },\r\n      },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private emitCreatorLetterChangedEvent() {\r\n    const event = new CustomEvent<{ selectedLetter: string | null }>(\r\n      'creatorLetterChanged',\r\n      {\r\n        detail: { selectedLetter: this.selectedCreatorFilter },\r\n      },\r\n    );\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private displayModeChanged() {\r\n    const event = new CustomEvent<{\r\n      displayMode?: CollectionDisplayMode;\r\n    }>('displayModeChanged', {\r\n      detail: { displayMode: this.displayMode },\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private emitSortChangedEvent() {\r\n    const event = new CustomEvent<{\r\n      selectedSort: SortField;\r\n      sortDirection: SortDirection | null;\r\n    }>('sortChanged', {\r\n      detail: {\r\n        selectedSort: this.selectedSort,\r\n        sortDirection: this.sortDirection,\r\n      },\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  static get styles() {\r\n    return [\r\n      srOnlyStyle,\r\n      css`\r\n        #container {\r\n          position: relative;\r\n        }\r\n\r\n        #sort-bar {\r\n          display: flex;\r\n          justify-content: flex-start;\r\n          align-items: center;\r\n          border-bottom: 1px solid #2c2c2c;\r\n          font-size: 1.4rem;\r\n        }\r\n\r\n        #sort-options {\r\n          display: flex;\r\n          align-items: center;\r\n          flex-grow: 1;\r\n        }\r\n\r\n        ul {\r\n          list-style: none;\r\n          display: flex;\r\n          align-items: center;\r\n          margin: 0;\r\n          padding: 0;\r\n        }\r\n\r\n        li {\r\n          padding: 0;\r\n        }\r\n\r\n        .sort-by-text {\r\n          margin-right: 5px;\r\n          font-weight: bold;\r\n          white-space: nowrap;\r\n        }\r\n\r\n        .sort-direction-container {\r\n          display: flex;\r\n          align-self: stretch;\r\n          flex: 0;\r\n          margin: 0 5px;\r\n        }\r\n\r\n        .sort-direction-selector {\r\n          padding: 0;\r\n          border: none;\r\n          appearance: none;\r\n          background: transparent;\r\n          cursor: pointer;\r\n        }\r\n\r\n        .sort-direction-selector:disabled {\r\n          cursor: default;\r\n        }\r\n\r\n        .sort-direction-icon {\r\n          display: flex;\r\n          align-items: center;\r\n          background: none;\r\n          color: inherit;\r\n          border: none;\r\n          padding: 0;\r\n          outline: inherit;\r\n          width: 14px;\r\n          height: 14px;\r\n        }\r\n\r\n        .sort-direction-icon > svg {\r\n          flex: 1;\r\n        }\r\n\r\n        #date-sort-selector,\r\n        #view-sort-selector {\r\n          position: absolute;\r\n          left: 150px;\r\n          top: 45px;\r\n\r\n          z-index: 1;\r\n          padding: 1rem;\r\n          background-color: white;\r\n          border-radius: 2.5rem;\r\n          border: 1px solid #404142;\r\n        }\r\n\r\n        #sort-selector-container {\r\n          flex: 1;\r\n          display: flex;\r\n          justify-content: flex-start;\r\n          align-items: center;\r\n        }\r\n\r\n        #desktop-sort-container,\r\n        #mobile-sort-container {\r\n          display: flex;\r\n          justify-content: flex-start;\r\n          align-items: center;\r\n        }\r\n\r\n        /*\r\n          we move the desktop sort selector offscreen instead of display: none\r\n          because we need to observe the width of it vs its container to determine\r\n          if it's wide enough to display the desktop version and if you display: none,\r\n          the width becomes 0\r\n        */\r\n        #desktop-sort-container.hidden {\r\n          position: absolute;\r\n          top: -9999px;\r\n          left: -9999px;\r\n          visibility: hidden;\r\n        }\r\n\r\n        #mobile-sort-container.hidden {\r\n          display: none;\r\n        }\r\n\r\n        #sort-selector-backdrop {\r\n          position: fixed;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100vw;\r\n          height: 100vh;\r\n          z-index: 1;\r\n          background-color: transparent;\r\n        }\r\n\r\n        #desktop-sort-selector {\r\n          display: inline-flex;\r\n        }\r\n\r\n        #desktop-sort-selector li {\r\n          display: flex;\r\n          align-items: center;\r\n          padding-left: 5px;\r\n          padding-right: 5px;\r\n        }\r\n\r\n        #desktop-sort-selector li a {\r\n          padding: 0 5px;\r\n          text-decoration: none;\r\n          color: #333;\r\n          line-height: 2;\r\n        }\r\n\r\n        #desktop-sort-selector li button {\r\n          padding: 0px 5px;\r\n          border: none;\r\n          background: none;\r\n          font-family: inherit;\r\n          font-size: inherit;\r\n          color: #333;\r\n          line-height: 2;\r\n          cursor: pointer;\r\n          appearance: none;\r\n        }\r\n\r\n        #desktop-sort-selector li button.selected {\r\n          font-weight: bold;\r\n        }\r\n\r\n        /**\r\n         * Fix to not shift the sort-bar options when get selected\r\n         */\r\n        #desktop-sort-selector li button::before,\r\n        #desktop-sort-selector .dropdown-label::before {\r\n          display: block;\r\n          content: attr(data-title);\r\n          font-weight: bold;\r\n          height: 0;\r\n          overflow: hidden;\r\n          visibility: hidden;\r\n        }\r\n\r\n        #display-style-selector {\r\n          flex: 0;\r\n        }\r\n\r\n        #display-style-selector button {\r\n          background: none;\r\n          color: inherit;\r\n          border: none;\r\n          appearance: none;\r\n          cursor: pointer;\r\n          -webkit-appearance: none;\r\n          fill: #bbbbbb;\r\n        }\r\n\r\n        #display-style-selector button.active {\r\n          fill: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        }\r\n\r\n        #display-style-selector button svg {\r\n          width: 24px;\r\n          height: 24px;\r\n        }\r\n\r\n        ia-dropdown {\r\n          --dropdownTextColor: white;\r\n          --dropdownOffsetTop: 0;\r\n          --dropdownBorderTopWidth: 0;\r\n          --dropdownBorderTopLeftRadius: 0;\r\n          --dropdownBorderTopRightRadius: 0;\r\n          --dropdownWhiteSpace: nowrap;\r\n          --dropdownListZIndex: 2;\r\n          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\r\n          --dropdownSelectedTextColor: white;\r\n          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\r\n          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\r\n          --caretHeight: 9px;\r\n          --caretWidth: 12px;\r\n          --caretPadding: 0 5px 0 0;\r\n        }\r\n        ia-dropdown.selected .dropdown-label {\r\n          font-weight: bold;\r\n        }\r\n        ia-dropdown.open {\r\n          z-index: 2;\r\n        }\r\n\r\n        .dropdown-label {\r\n          display: inline-block;\r\n          height: 100%;\r\n          padding-left: 5px;\r\n          font-size: 1.4rem;\r\n          font-family: var(--ia-theme-base-font-family);\r\n          line-height: 2;\r\n          color: var(--ia-theme-primary-text-color, #2c2c2c);\r\n          white-space: nowrap;\r\n          user-select: none;\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

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

@@ -27,52 +27,52 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         this.showInfoButton = false;
     }
     render() {
-        return html `
-      <div class="container">
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
-          </div>
-        </div>
-
-        ${this.getTileStatsTemplate}
-      </div>
+        return html `
+      <div class="container">
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getImageBlockTemplate} ${this.getTitleTemplate}
+          </div>
+        </div>
+
+        ${this.getTileStatsTemplate}
+      </div>
     `;
     }
     get getImageBlockTemplate() {
-        return html `
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
+        return html `
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
     `;
     }
     get getTitleTemplate() {
         var _a;
-        return html `<div id="title">
-      <h3 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h3>
+        return html `<div id="title">
+      <h3 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.title}</h3>
     </div>`;
     }
     get getTileStatsTemplate() {
-        return html `
-      <div id="item-stats">
-        <div id="item-mediatype">${collectionIcon}</div>
-
-        <div id="stats-row">
-          ${this.getItemsTemplate} ${this.getSizeTemplate}
-        </div>
-      </div>
+        return html `
+      <div id="item-stats">
+        <div id="item-mediatype">${collectionIcon}</div>
+
+        <div id="stats-row">
+          ${this.getItemsTemplate} ${this.getSizeTemplate}
+        </div>
+      </div>
     `;
     }
     get getItemsTemplate() {
         var _a, _b;
         const collectionItems = (_b = (_a = this.model) === null || _a === void 0 ? void 0 : _a.itemCount) === null || _b === void 0 ? void 0 : _b.toLocaleString();
-        return html `<span id="item-count"
-      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
+        return html `<span id="item-count"
+      >${collectionItems} item${Number(collectionItems) !== 1 ? 's' : ''}</span
     >`;
     }
     get getSizeTemplate() {
@@ -85,9 +85,9 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
     get infoButtonTemplate() {
         // &#9432; is an information icon
         return this.showInfoButton
-            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
+            ? html `<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
         </button>`
             : nothing;
     }
@@ -102,49 +102,49 @@ let CollectionTile = class CollectionTile extends BaseTileComponent {
         const whiteColor = css `#fff`;
         return [
             baseTileStyles,
-            css `
-        .container {
-          background-color: ${tileBackgroundColor};
-          border: 1px solid ${tileBorderColor};
-        }
-
-        .item-info {
-          flex-grow: initial;
-        }
-
-        h4.truncated,
-        h3.truncated {
-          color: ${whiteColor};
-        }
-
-        #item-mediatype svg {
-          filter: invert(100%);
-          height: 2.5rem;
-          align-items: baseline;
-        }
-
-        .container:hover > #title {
-          text-decoration: underline;
-        }
-
-        /* this is a workaround for Safari 15 where the hover effects are not working */
-        image-block:hover > #title {
-          text-decoration: underline;
-        }
-
-        #item-stats {
-          display: flex;
-          padding: 0 5px 5px;
-          align-items: center;
-        }
-
-        #stats-row {
-          display: flex;
-          align-items: baseline;
-          color: ${whiteColor};
-          flex-direction: column;
-          margin-left: 10px;
-        }
+            css `
+        .container {
+          background-color: ${tileBackgroundColor};
+          border: 1px solid ${tileBorderColor};
+        }
+
+        .item-info {
+          flex-grow: initial;
+        }
+
+        h4.truncated,
+        h3.truncated {
+          color: ${whiteColor};
+        }
+
+        #item-mediatype svg {
+          filter: invert(100%);
+          height: 2.5rem;
+          align-items: baseline;
+        }
+
+        .container:hover > #title {
+          text-decoration: underline;
+        }
+
+        /* this is a workaround for Safari 15 where the hover effects are not working */
+        image-block:hover > #title {
+          text-decoration: underline;
+        }
+
+        #item-stats {
+          display: flex;
+          padding: 0 5px 5px;
+          align-items: center;
+        }
+
+        #stats-row {
+          display: flex;
+          align-items: baseline;
+          color: ${whiteColor};
+          flex-direction: column;
+          margin-left: 10px;
+        }
       `,
         ];
     }

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