@internetarchive/collection-browser 1.7.1-alpha.0 → 1.9.0

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement, html, css, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import '@internetarchive/ia-dropdown';
-import { DefaultSortDirection, SortField, SortFieldDisplayName, } from '../models';
+import { SORT_OPTIONS, SortField, } from '../models';
 import './alpha-bar';
 import { sortUpIcon } from './img/sort-toggle-up';
 import { sortDownIcon } from './img/sort-toggle-down';
@@ -81,7 +81,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             this.displayModeChanged();
         }
         if (changed.has('selectedSort') && this.sortDirection === null) {
-            this.sortDirection = DefaultSortDirection[this.finalizedSortField];
+            const sortOption = SORT_OPTIONS[this.finalizedSortField];
+            this.sortDirection = sortOption.defaultSortDirection;
         }
         if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
             this.alphaSelectorVisible = 'title';
@@ -176,7 +177,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         return html `
       <button
         class="sort-direction-selector"
-        ?disabled=${this.finalizedSortField === SortField.relevance}
+        ?disabled=${!this.canChangeSortDirection}
         @click=${this.handleSortDirectionClicked}
       >
         <span class="sr-only">${srLabel}</span>
@@ -186,8 +187,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     }
     /** Template to render the sort direction button's icon in the correct current state */
     get sortDirectionIcon() {
-        // For relevance sort, show a fully disabled icon
-        if (this.finalizedSortField === SortField.relevance) {
+        // Show a fully disabled icon for sort options without direction support
+        if (!this.canChangeSortDirection) {
             return html `<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
         }
         // For all other sorts, show the ascending/descending direction
@@ -252,21 +253,20 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     }
     /** The template to render all the sort options in mobile view */
     get mobileSortSelectorTemplate() {
-        var _a;
-        const isDisplayableField = (field) => field !== SortField.default &&
-            (field !== SortField.relevance || this.showRelevance);
+        const displayedOptions = Object.values(SORT_OPTIONS)
+            .filter(opt => opt.shownInSortBar)
+            .filter(opt => this.showRelevance || opt.field !== SortField.relevance);
         return html `
       <div
         id="mobile-sort-container"
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-            displayName: html `${(_a = SortFieldDisplayName[this.finalizedSortField]) !== null && _a !== void 0 ? _a : 'Relevance'}`,
+            displayName: html `${SORT_OPTIONS[this.finalizedSortField]
+                .displayName}`,
             id: 'mobile-dropdown',
             selected: true,
-            dropdownOptions: Object.keys(SortField)
-                .filter(field => isDisplayableField(field))
-                .map(field => this.getDropdownOption(field)),
+            dropdownOptions: displayedOptions.map(opt => this.getDropdownOption(opt.field)),
             selectedOption: this.finalizedSortField,
             onOptionSelected: this.mobileSortChanged,
             onDropdownClick: () => {
@@ -293,7 +293,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     getSortDisplayOption(sortField, options) {
         var _a, _b;
         const isSelected = (_a = options === null || options === void 0 ? void 0 : options.selected) !== null && _a !== void 0 ? _a : this.finalizedSortField === sortField;
-        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SortFieldDisplayName[sortField];
+        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SORT_OPTIONS[sortField].displayName;
         return html `
       <button
         class=${isSelected ? 'selected' : nothing}
@@ -365,7 +365,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             },
             label: html `
         <span class="dropdown-option-label">
-          ${SortFieldDisplayName[sortField]}
+          ${SORT_OPTIONS[sortField].displayName}
         </span>
       `,
         };
@@ -549,7 +549,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     setSelectedSort(sort) {
         this.selectedSort = sort;
         // Apply this field's default sort direction
-        this.sortDirection = DefaultSortDirection[this.selectedSort];
+        const sortOption = SORT_OPTIONS[sort];
+        this.sortDirection = sortOption.defaultSortDirection;
         this.emitSortChangedEvent();
     }
     /** The current sort field, or the default one if no explicit sort is set */
@@ -564,6 +565,10 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             ? this.defaultSortDirection
             : this.sortDirection;
     }
+    /** Whether the sort direction button should be enabled for the current sort */
+    get canChangeSortDirection() {
+        return SORT_OPTIONS[this.finalizedSortField].canSetDirection;
+    }
     /**
      * There are four date sort options.
      *
@@ -610,11 +615,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      */
     get dateSortField() {
         var _a;
-        const defaultSort = SortFieldDisplayName[SortField.date];
-        const name = this.dateOptionSelected
-            ? (_a = SortFieldDisplayName[this.finalizedSortField]) !== null && _a !== void 0 ? _a : defaultSort
-            : defaultSort;
-        return name;
+        const defaultDateSort = SORT_OPTIONS[SortField.date];
+        const currentDateSort = this.dateOptionSelected
+            ? (_a = SORT_OPTIONS[this.finalizedSortField]) !== null && _a !== void 0 ? _a : defaultDateSort
+            : defaultDateSort;
+        return currentDateSort.displayName;
     }
     /**
      * The display name of the current view field
@@ -626,11 +631,11 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      */
     get viewSortField() {
         var _a;
-        const defaultSort = SortFieldDisplayName[SortField.weeklyview];
-        const name = this.viewOptionSelected
-            ? (_a = SortFieldDisplayName[this.finalizedSortField]) !== null && _a !== void 0 ? _a : defaultSort
-            : defaultSort;
-        return name;
+        const defaultViewSort = SORT_OPTIONS[SortField.weeklyview];
+        const currentViewSort = this.viewOptionSelected
+            ? (_a = SORT_OPTIONS[this.finalizedSortField]) !== null && _a !== void 0 ? _a : defaultViewSort
+            : defaultViewSort;
+        return currentViewSort.displayName;
     }
     get titleSelectorBar() {
         var _a;

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

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

package/dist/test/collection-facets/more-facets-content.test.js

@@ -64,6 +64,31 @@ describe('More facets content', () => {
         await el.updateComplete;
         expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('title:hello');
     });
+    it('queries for more facets using search service within a collection (no query)', async () => {
+        var _a, _b;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      ></more-facets-content>`);
+        el.facetKey = 'subject';
+        await el.updateComplete;
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.be.empty;
+        expect((_b = searchService.searchParams) === null || _b === void 0 ? void 0 : _b.pageTarget).to.equal('foobar');
+    });
+    it('queries for more facets using search service within a collection (with query)', async () => {
+        var _a, _b;
+        const searchService = new MockSearchService();
+        const el = await fixture(html `<more-facets-content
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      ></more-facets-content>`);
+        el.facetKey = 'subject';
+        el.query = 'title:hello';
+        await el.updateComplete;
+        expect((_a = searchService.searchParams) === null || _a === void 0 ? void 0 : _a.query).to.equal('title:hello');
+        expect((_b = searchService.searchParams) === null || _b === void 0 ? void 0 : _b.pageTarget).to.equal('foobar');
+    });
     it('filter raw selectedFacets object', async () => {
         var _a;
         const searchService = new MockSearchService();

package/dist/test/collection-facets/more-facets-content.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"more-facets-content.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-content.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { Aggregation } from '@internetarchive/search-service';\nimport type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';\nimport '../../src/collection-facets/more-facets-content';\nimport { MockSearchService } from '../mocks/mock-search-service';\nimport { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';\n\nconst selectedFacetsGroup = {\n  title: 'Media Type',\n  key: 'mediatype',\n  buckets: [\n    { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },\n    { displayText: 'movies', key: 'movies', count: 901, state: 'none' },\n    { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },\n    { displayText: 'data', key: 'data', count: 230, state: 'none' },\n    { displayText: 'web', key: 'web', count: 453, state: 'none' },\n  ],\n};\n\nconst aggregations: Record<string, Aggregation> = {\n  collection: new Aggregation({\n    buckets: [\n      {\n        key: 'foo',\n        doc_count: 5,\n      },\n    ],\n  }),\n};\n\ndescribe('More facets content', () => {\n  it('should render more facets template', async () => {\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;\n  });\n\n  it('should render more facets loader template', async () => {\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content></more-facets-content>`\n    );\n\n    el.facetsLoading = true;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;\n  });\n\n  it('should render pagination for more facets', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'mediatype';\n    el.facetsLoading = false;\n    el.paginationSize = 6;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;\n  });\n\n  it('query for more facets content using search service', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'collection';\n    el.query = 'title:hello';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('title:hello');\n  });\n\n  it('filter raw selectedFacets object', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .selectedFacets=${selectedFacetsGroup}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'collection';\n    el.query = 'title:hello';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('title:hello');\n  });\n\n  it('combine selectedFacets and aggregationFacets and render on modal', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .selectedFacets=${selectedFacetsGroup}\n        .aggregations=${aggregations}\n      ></more-facets-content>`\n    );\n\n    await el.updateComplete;\n\n    expect(el.facetGroupTitle).to.equal('Collection');\n\n    const facetGroup = el.facetGroup?.shift();\n    expect(facetGroup?.key).to.equal('collection');\n    expect(facetGroup?.title).to.equal('Collection');\n\n    const bucket = facetGroup?.buckets[0];\n    expect(bucket?.key).to.equal('foo');\n    expect(bucket?.count).to.equal(5);\n  });\n\n  it('cancel button clicked event', async () => {\n    const mockAnalyticsHandler = new MockAnalyticsHandler();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .analyticsHandler=${mockAnalyticsHandler}\n      ></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    el.paginationSize = 5;\n    await el.updateComplete;\n\n    // select cancel button\n    const cancelButton = el.shadowRoot?.querySelector(\n      '.footer > .btn-cancel'\n    ) as HTMLButtonElement;\n    cancelButton?.click();\n\n    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\n    expect(mockAnalyticsHandler.callAction).to.equal('closeMoreFacetsModal');\n    expect(mockAnalyticsHandler.callLabel).to.equal('undefined');\n  });\n\n  it('facet apply button clicked event', async () => {\n    const mockAnalyticsHandler = new MockAnalyticsHandler();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .analyticsHandler=${mockAnalyticsHandler}\n      ></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    el.paginationSize = 5;\n    el.facetKey = 'collection';\n    await el.updateComplete;\n\n    // select submit button\n    const submitButton = el.shadowRoot?.querySelector(\n      '.footer > .btn-submit'\n    ) as HTMLButtonElement;\n    submitButton?.click();\n\n    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\n    expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');\n    expect(mockAnalyticsHandler.callLabel).to.equal('collection');\n  });\n});\n"]}
+{"version":3,"file":"more-facets-content.test.js","sourceRoot":"","sources":["../../../test/collection-facets/more-facets-content.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport { Aggregation } from '@internetarchive/search-service';\nimport type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';\nimport '../../src/collection-facets/more-facets-content';\nimport { MockSearchService } from '../mocks/mock-search-service';\nimport { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';\n\nconst selectedFacetsGroup = {\n  title: 'Media Type',\n  key: 'mediatype',\n  buckets: [\n    { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },\n    { displayText: 'movies', key: 'movies', count: 901, state: 'none' },\n    { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },\n    { displayText: 'data', key: 'data', count: 230, state: 'none' },\n    { displayText: 'web', key: 'web', count: 453, state: 'none' },\n  ],\n};\n\nconst aggregations: Record<string, Aggregation> = {\n  collection: new Aggregation({\n    buckets: [\n      {\n        key: 'foo',\n        doc_count: 5,\n      },\n    ],\n  }),\n};\n\ndescribe('More facets content', () => {\n  it('should render more facets template', async () => {\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;\n  });\n\n  it('should render more facets loader template', async () => {\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content></more-facets-content>`\n    );\n\n    el.facetsLoading = true;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;\n  });\n\n  it('should render pagination for more facets', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'mediatype';\n    el.facetsLoading = false;\n    el.paginationSize = 6;\n    await el.updateComplete;\n\n    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;\n  });\n\n  it('query for more facets content using search service', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'collection';\n    el.query = 'title:hello';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('title:hello');\n  });\n\n  it('queries for more facets using search service within a collection (no query)', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .withinCollection=${'foobar'}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'subject';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.be.empty;\n    expect(searchService.searchParams?.pageTarget).to.equal('foobar');\n  });\n\n  it('queries for more facets using search service within a collection (with query)', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .withinCollection=${'foobar'}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'subject';\n    el.query = 'title:hello';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('title:hello');\n    expect(searchService.searchParams?.pageTarget).to.equal('foobar');\n  });\n\n  it('filter raw selectedFacets object', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .selectedFacets=${selectedFacetsGroup}\n      ></more-facets-content>`\n    );\n\n    el.facetKey = 'collection';\n    el.query = 'title:hello';\n    await el.updateComplete;\n\n    expect(searchService.searchParams?.query).to.equal('title:hello');\n  });\n\n  it('combine selectedFacets and aggregationFacets and render on modal', async () => {\n    const searchService = new MockSearchService();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .searchService=${searchService}\n        .selectedFacets=${selectedFacetsGroup}\n        .aggregations=${aggregations}\n      ></more-facets-content>`\n    );\n\n    await el.updateComplete;\n\n    expect(el.facetGroupTitle).to.equal('Collection');\n\n    const facetGroup = el.facetGroup?.shift();\n    expect(facetGroup?.key).to.equal('collection');\n    expect(facetGroup?.title).to.equal('Collection');\n\n    const bucket = facetGroup?.buckets[0];\n    expect(bucket?.key).to.equal('foo');\n    expect(bucket?.count).to.equal(5);\n  });\n\n  it('cancel button clicked event', async () => {\n    const mockAnalyticsHandler = new MockAnalyticsHandler();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .analyticsHandler=${mockAnalyticsHandler}\n      ></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    el.paginationSize = 5;\n    await el.updateComplete;\n\n    // select cancel button\n    const cancelButton = el.shadowRoot?.querySelector(\n      '.footer > .btn-cancel'\n    ) as HTMLButtonElement;\n    cancelButton?.click();\n\n    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\n    expect(mockAnalyticsHandler.callAction).to.equal('closeMoreFacetsModal');\n    expect(mockAnalyticsHandler.callLabel).to.equal('undefined');\n  });\n\n  it('facet apply button clicked event', async () => {\n    const mockAnalyticsHandler = new MockAnalyticsHandler();\n\n    const el = await fixture<MoreFacetsContent>(\n      html`<more-facets-content\n        .analyticsHandler=${mockAnalyticsHandler}\n      ></more-facets-content>`\n    );\n\n    el.facetsLoading = false;\n    el.paginationSize = 5;\n    el.facetKey = 'collection';\n    await el.updateComplete;\n\n    // select submit button\n    const submitButton = el.shadowRoot?.querySelector(\n      '.footer > .btn-submit'\n    ) as HTMLButtonElement;\n    submitButton?.click();\n\n    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');\n    expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');\n    expect(mockAnalyticsHandler.callLabel).to.equal('collection');\n  });\n});\n"]}

package/dist/test/restoration-state-handler.test.js

@@ -1,6 +1,6 @@
 import { SearchType } from '@internetarchive/search-service';
 import { expect } from '@open-wc/testing';
-import { getDefaultSelectedFacets } from '../src/models';
+import { SortField, getDefaultSelectedFacets } from '../src/models';
 import { RestorationStateHandler } from '../src/restoration-state-handler';
 describe('Restoration state handler', () => {
     it('should restore query from URL', async () => {
@@ -163,6 +163,58 @@ describe('Restoration state handler', () => {
         expect(restorationState.selectedSort).to.equal('date');
         expect(restorationState.sortDirection).to.equal('asc');
     });
+    it('should restore sort from URL (space format)', async () => {
+        const handler = new RestorationStateHandler({ context: 'search' });
+        const url = new URL(window.location.href);
+        url.search = '?sort=foo+desc';
+        window.history.replaceState({ path: url.href }, '', url.href);
+        const restorationState = handler.getRestorationState();
+        expect(restorationState.selectedSort).to.equal('unrecognized');
+        expect(restorationState.sortDirection).to.equal('desc');
+    });
+    it('should restore unrecognized sort from URL (prefix format)', async () => {
+        const handler = new RestorationStateHandler({ context: 'search' });
+        const url = new URL(window.location.href);
+        url.search = '?sort=-foo';
+        window.history.replaceState({ path: url.href }, '', url.href);
+        const restorationState = handler.getRestorationState();
+        expect(restorationState.selectedSort).to.equal('unrecognized');
+        expect(restorationState.sortDirection).to.equal('desc');
+    });
+    it('should save direction to URL even for unrecognized sort fields', async () => {
+        const url = new URL(window.location.href);
+        url.search = '?sort=foo';
+        window.history.replaceState({ path: url.href }, '', url.href);
+        const handler = new RestorationStateHandler({ context: 'search' });
+        handler.persistState({
+            selectedSort: SortField.unrecognized,
+            sortDirection: 'desc',
+            selectedFacets: getDefaultSelectedFacets(),
+        });
+        expect(window.location.search).to.equal('?sort=-foo');
+    });
+    it('should keep existing direction for unrecognized sort fields when unspecified in state', async () => {
+        const url = new URL(window.location.href);
+        url.search = '?sort=foo+desc';
+        window.history.replaceState({ path: url.href }, '', url.href);
+        const handler = new RestorationStateHandler({ context: 'search' });
+        handler.persistState({
+            selectedSort: SortField.unrecognized,
+            selectedFacets: getDefaultSelectedFacets(),
+        });
+        expect(window.location.search).to.equal('?sort=-foo');
+    });
+    it('should just ignore unrecognized sort fields w/ unknown formats', async () => {
+        const url = new URL(window.location.href);
+        url.search = '?sort=+foo';
+        window.history.replaceState({ path: url.href }, '', url.href);
+        const handler = new RestorationStateHandler({ context: 'search' });
+        handler.persistState({
+            selectedSort: SortField.unrecognized,
+            selectedFacets: getDefaultSelectedFacets(),
+        });
+        expect(window.location.search).to.equal('?sort=+foo');
+    });
     it('should not save current page state to the URL for page 1', async () => {
         const url = new URL(window.location.href);
         url.search = '';