@internetarchive/collection-browser 2.3.0 → 2.4.0-e2e-test-0

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

@@ -1,81 +1,81 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import '@internetarchive/ia-dropdown';
-import { SORT_OPTIONS, SortField, } from '../models';
-import './alpha-bar';
-import { sortUpIcon } from './img/sort-toggle-up';
-import { sortDownIcon } from './img/sort-toggle-down';
-import { sortDisabledIcon } from './img/sort-toggle-disabled';
-import { tileIcon } from './img/tile';
-import { listIcon } from './img/list';
-import { compactIcon } from './img/compact';
-import { srOnlyStyle } from '../styles/sr-only';
-let SortFilterBar = class SortFilterBar extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** The default sort direction to use if none is set */
-        this.defaultSortDirection = null;
-        /** The default sort field to use if none is set */
-        this.defaultSortField = SortField.relevance;
-        /** The current sort direction (asc/desc), or null if none is set */
-        this.sortDirection = null;
-        /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
-        this.selectedSort = SortField.default;
-        /** The currently selected title letter filter, or null if none is set */
-        this.selectedTitleFilter = null;
-        /** The currently selected creator letter filter, or null if none is set */
-        this.selectedCreatorFilter = null;
-        /** Whether to show the Relevance sort option (default `true`) */
-        this.showRelevance = true;
-        /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */
-        this.showDateFavorited = false;
-        /** Whether to replace the default sort options with a slot for customization (default `false`) */
-        this.enableSortOptionsSlot = false;
-        /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */
-        this.suppressDisplayModes = false;
-        /**
-         * The Views sort option that was most recently selected (or the default, if none has been selected yet)
-         */
-        this.lastSelectedViewSort = SortField.weeklyview;
-        /**
-         * The Date sort option that was most recently selected (or the default, if none has been selected yet)
-         */
-        this.lastSelectedDateSort = this.defaultDateSortField;
-        /**
-         * Which of the alphabet bars (title/creator) should be shown, or null if one
-         * should not currently be rendered.
-         */
-        this.alphaSelectorVisible = null;
-        /**
-         * Whether the transparent backdrop to catch clicks outside the dropdown menu
-         * should be rendered.
-         */
-        this.dropdownBackdropVisible = false;
-        /**
-         * The width of the desktop view sort option container, updated upon each resize.
-         * Used for dynamically determining whether to use desktop or mobile view.
-         */
-        this.desktopSortContainerWidth = 0;
-        /**
-         * The width of the full sort bar, updated upon each resize.
-         * Used for dynamically determining whether to use desktop or mobile view.
-         */
-        this.selectorBarContainerWidth = 0;
-        this.boundSortBarSelectorEscapeListener = (e) => {
-            if (e.key === 'Escape') {
-                this.closeDropdowns();
-            }
-        };
-    }
-    render() {
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import '@internetarchive/ia-dropdown';
+import { SORT_OPTIONS, SortField, } from '../models';
+import './alpha-bar';
+import { sortUpIcon } from './img/sort-toggle-up';
+import { sortDownIcon } from './img/sort-toggle-down';
+import { sortDisabledIcon } from './img/sort-toggle-disabled';
+import { tileIcon } from './img/tile';
+import { listIcon } from './img/list';
+import { compactIcon } from './img/compact';
+import { srOnlyStyle } from '../styles/sr-only';
+let SortFilterBar = class SortFilterBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The default sort direction to use if none is set */
+        this.defaultSortDirection = null;
+        /** The default sort field to use if none is set */
+        this.defaultSortField = SortField.relevance;
+        /** The current sort direction (asc/desc), or null if none is set */
+        this.sortDirection = null;
+        /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
+        this.selectedSort = SortField.default;
+        /** The currently selected title letter filter, or null if none is set */
+        this.selectedTitleFilter = null;
+        /** The currently selected creator letter filter, or null if none is set */
+        this.selectedCreatorFilter = null;
+        /** Whether to show the Relevance sort option (default `true`) */
+        this.showRelevance = true;
+        /** Whether to show the Date Favorited sort option instead of Date Published/Archived/Reviewed (default `false`) */
+        this.showDateFavorited = false;
+        /** Whether to replace the default sort options with a slot for customization (default `false`) */
+        this.enableSortOptionsSlot = false;
+        /** Whether to suppress showing the three display mode options on the right of the bar (default `false`) */
+        this.suppressDisplayModes = false;
+        /**
+         * The Views sort option that was most recently selected (or the default, if none has been selected yet)
+         */
+        this.lastSelectedViewSort = SortField.weeklyview;
+        /**
+         * The Date sort option that was most recently selected (or the default, if none has been selected yet)
+         */
+        this.lastSelectedDateSort = this.defaultDateSortField;
+        /**
+         * Which of the alphabet bars (title/creator) should be shown, or null if one
+         * should not currently be rendered.
+         */
+        this.alphaSelectorVisible = null;
+        /**
+         * Whether the transparent backdrop to catch clicks outside the dropdown menu
+         * should be rendered.
+         */
+        this.dropdownBackdropVisible = false;
+        /**
+         * The width of the desktop view sort option container, updated upon each resize.
+         * Used for dynamically determining whether to use desktop or mobile view.
+         */
+        this.desktopSortContainerWidth = 0;
+        /**
+         * The width of the full sort bar, updated upon each resize.
+         * Used for dynamically determining whether to use desktop or mobile view.
+         */
+        this.selectorBarContainerWidth = 0;
+        this.boundSortBarSelectorEscapeListener = (e) => {
+            if (e.key === 'Escape') {
+                this.closeDropdowns();
+            }
+        };
+    }
+    render() {
         return html `
       <div id="container">
         <section id="sort-bar" aria-label="Sorting options">
           <slot name="sort-options-left"></slot>
           <div id="sort-options">
-            ${!this.enableSortOptionsSlot
+            ${!this.enableSortOptionsSlot
             ? html `
                   <div class="sort-direction-container">
                     ${this.sortDirectionSelectorTemplate}
@@ -85,13 +85,13 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                     ${this.mobileSortSelectorTemplate}
                     ${this.desktopSortSelectorTemplate}
                   </div>
-                `
+                `
             : html `<slot name="sort-options"></slot>`}
           </div>
           <slot name="sort-options-right"></slot>
 
-          ${this.suppressDisplayModes
-            ? nothing
+          ${this.suppressDisplayModes
+            ? nothing
             : html `<div id="display-style-selector">
                 ${this.displayOptionTemplate}
               </div>`}
@@ -100,139 +100,139 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
         ${this.alphaBarTemplate}
       </div>
-    `;
-    }
-    willUpdate(changed) {
-        if (changed.has('selectedSort') || changed.has('defaultSortField')) {
-            // If the sort is changed from its default without a direction set,
-            // we adopt the default sort direction for that sort type.
-            if (this.selectedSort &&
-                this.selectedSort !== SortField.default &&
-                this.sortDirection === null) {
-                const sortOption = SORT_OPTIONS[this.finalizedSortField];
-                this.sortDirection = sortOption.defaultSortDirection;
-            }
-            if (this.viewOptionSelected) {
-                this.lastSelectedViewSort = this.finalizedSortField;
-            }
-            else if (this.dateOptionSelected) {
-                this.lastSelectedDateSort = this.finalizedSortField;
-            }
-        }
-        // If we change which dropdown options are available, ensure the correct default becomes selected.
-        // Currently, Date Favorited is the only dropdown option whose presence/absence can change.
-        if (changed.has('showDateFavorited') &&
-            changed.get('showDateFavorited') !== this.showDateFavorited) {
-            this.lastSelectedDateSort = this.defaultDateSortField;
-        }
-    }
-    updated(changed) {
-        if (changed.has('displayMode')) {
-            this.displayModeChanged();
-        }
-        if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
-            this.alphaSelectorVisible = 'title';
-        }
-        if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
-            this.alphaSelectorVisible = 'creator';
-        }
-        if (changed.has('dropdownBackdropVisible')) {
-            this.setupEscapeListeners();
-        }
-        if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
-            const oldObserver = changed.get('resizeObserver');
-            if (oldObserver)
-                this.disconnectResizeObserver(oldObserver);
-            this.setupResizeObserver();
-        }
-    }
-    setupEscapeListeners() {
-        if (this.dropdownBackdropVisible) {
-            document.addEventListener('keydown', this.boundSortBarSelectorEscapeListener);
-        }
-        else {
-            document.removeEventListener('keydown', this.boundSortBarSelectorEscapeListener);
-        }
-    }
-    connectedCallback() {
-        var _a;
-        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.setupResizeObserver();
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.disconnectResizeObserver(this.resizeObserver);
-        }
-    }
-    disconnectResizeObserver(resizeObserver) {
-        if (this.sortSelectorContainer) {
-            resizeObserver.removeObserver({
-                target: this.sortSelectorContainer,
-                handler: this,
-            });
-        }
-        if (this.desktopSortContainer) {
-            resizeObserver.removeObserver({
-                target: this.desktopSortContainer,
-                handler: this,
-            });
-        }
-    }
-    setupResizeObserver() {
-        if (!this.resizeObserver)
-            return;
-        if (this.sortSelectorContainer) {
-            this.resizeObserver.addObserver({
-                target: this.sortSelectorContainer,
-                handler: this,
-            });
-        }
-        if (this.desktopSortContainer) {
-            this.resizeObserver.addObserver({
-                target: this.desktopSortContainer,
-                handler: this,
-            });
-        }
-    }
-    handleResize(entry) {
-        if (entry.target === this.desktopSortContainer) {
-            this.desktopSortContainerWidth = entry.contentRect.width;
-        }
-        else if (entry.target === this.sortSelectorContainer) {
-            this.selectorBarContainerWidth = entry.contentRect.width;
-        }
-    }
-    /**
-     * Whether to show the mobile sort bar because there is not enough space
-     * for the desktop sort bar.
-     */
-    get mobileSelectorVisible() {
-        return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;
-    }
-    /**
-     * Template to render the alphabet bar, or `nothing` if it should not be rendered
-     * for the current sort
-     */
-    get alphaBarTemplate() {
-        if (!['title', 'creator'].includes(this.selectedSort))
-            return nothing;
-        if (this.alphaSelectorVisible === null) {
-            if (this.selectedSort === 'creator')
-                return this.creatorSelectorBar;
-            if (this.selectedSort === 'title')
-                return this.titleSelectorBar;
-        }
-        else {
-            return this.alphaSelectorVisible === 'creator'
-                ? this.creatorSelectorBar
-                : this.titleSelectorBar;
-        }
-        return nothing;
-    }
-    /** Template to render the sort direction toggle button */
-    get sortDirectionSelectorTemplate() {
-        const oppositeSortDirectionReadable = this.sortDirection === 'asc' ? 'descending' : 'ascending';
-        const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;
+    `;
+    }
+    willUpdate(changed) {
+        if (changed.has('selectedSort') || changed.has('defaultSortField')) {
+            // If the sort is changed from its default without a direction set,
+            // we adopt the default sort direction for that sort type.
+            if (this.selectedSort &&
+                this.selectedSort !== SortField.default &&
+                this.sortDirection === null) {
+                const sortOption = SORT_OPTIONS[this.finalizedSortField];
+                this.sortDirection = sortOption.defaultSortDirection;
+            }
+            if (this.viewOptionSelected) {
+                this.lastSelectedViewSort = this.finalizedSortField;
+            }
+            else if (this.dateOptionSelected) {
+                this.lastSelectedDateSort = this.finalizedSortField;
+            }
+        }
+        // If we change which dropdown options are available, ensure the correct default becomes selected.
+        // Currently, Date Favorited is the only dropdown option whose presence/absence can change.
+        if (changed.has('showDateFavorited') &&
+            changed.get('showDateFavorited') !== this.showDateFavorited) {
+            this.lastSelectedDateSort = this.defaultDateSortField;
+        }
+    }
+    updated(changed) {
+        if (changed.has('displayMode')) {
+            this.displayModeChanged();
+        }
+        if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
+            this.alphaSelectorVisible = 'title';
+        }
+        if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
+            this.alphaSelectorVisible = 'creator';
+        }
+        if (changed.has('dropdownBackdropVisible')) {
+            this.setupEscapeListeners();
+        }
+        if (changed.has('resizeObserver') || changed.has('enableSortOptionsSlot')) {
+            const oldObserver = changed.get('resizeObserver');
+            if (oldObserver)
+                this.disconnectResizeObserver(oldObserver);
+            this.setupResizeObserver();
+        }
+    }
+    setupEscapeListeners() {
+        if (this.dropdownBackdropVisible) {
+            document.addEventListener('keydown', this.boundSortBarSelectorEscapeListener);
+        }
+        else {
+            document.removeEventListener('keydown', this.boundSortBarSelectorEscapeListener);
+        }
+    }
+    connectedCallback() {
+        var _a;
+        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.setupResizeObserver();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+    }
+    disconnectResizeObserver(resizeObserver) {
+        if (this.sortSelectorContainer) {
+            resizeObserver.removeObserver({
+                target: this.sortSelectorContainer,
+                handler: this,
+            });
+        }
+        if (this.desktopSortContainer) {
+            resizeObserver.removeObserver({
+                target: this.desktopSortContainer,
+                handler: this,
+            });
+        }
+    }
+    setupResizeObserver() {
+        if (!this.resizeObserver)
+            return;
+        if (this.sortSelectorContainer) {
+            this.resizeObserver.addObserver({
+                target: this.sortSelectorContainer,
+                handler: this,
+            });
+        }
+        if (this.desktopSortContainer) {
+            this.resizeObserver.addObserver({
+                target: this.desktopSortContainer,
+                handler: this,
+            });
+        }
+    }
+    handleResize(entry) {
+        if (entry.target === this.desktopSortContainer) {
+            this.desktopSortContainerWidth = entry.contentRect.width;
+        }
+        else if (entry.target === this.sortSelectorContainer) {
+            this.selectorBarContainerWidth = entry.contentRect.width;
+        }
+    }
+    /**
+     * Whether to show the mobile sort bar because there is not enough space
+     * for the desktop sort bar.
+     */
+    get mobileSelectorVisible() {
+        return this.selectorBarContainerWidth - 10 < this.desktopSortContainerWidth;
+    }
+    /**
+     * Template to render the alphabet bar, or `nothing` if it should not be rendered
+     * for the current sort
+     */
+    get alphaBarTemplate() {
+        if (!['title', 'creator'].includes(this.selectedSort))
+            return nothing;
+        if (this.alphaSelectorVisible === null) {
+            if (this.selectedSort === 'creator')
+                return this.creatorSelectorBar;
+            if (this.selectedSort === 'title')
+                return this.titleSelectorBar;
+        }
+        else {
+            return this.alphaSelectorVisible === 'creator'
+                ? this.creatorSelectorBar
+                : this.titleSelectorBar;
+        }
+        return nothing;
+    }
+    /** Template to render the sort direction toggle button */
+    get sortDirectionSelectorTemplate() {
+        const oppositeSortDirectionReadable = this.sortDirection === 'asc' ? 'descending' : 'ascending';
+        const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;
         return html `
       <button
         class="sort-direction-selector"
@@ -242,148 +242,148 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         <span class="sr-only">${srLabel}</span>
         ${this.sortDirectionIcon}
       </button>
-    `;
-    }
-    /** Template to render the sort direction button's icon in the correct current state */
-    get sortDirectionIcon() {
-        // 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
+    `;
+    }
+    /** Template to render the sort direction button's icon in the correct current state */
+    get sortDirectionIcon() {
+        // 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
         return html `
       <div class="sort-direction-icon">
         ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
       </div>
-    `;
-    }
-    /** The template to render all the sort options in desktop view */
-    get desktopSortSelectorTemplate() {
+    `;
+    }
+    /** The template to render all the sort options in desktop view */
+    get desktopSortSelectorTemplate() {
         return html `
       <div
         id="desktop-sort-container"
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
         <ul id="desktop-sort-selector">
-          ${this.showRelevance
+          ${this.showRelevance
             ? html `<li>
-                ${this.getSortDisplayOption(SortField.relevance, {
-                onClick: () => {
-                    this.dropdownBackdropVisible = false;
-                    if (this.finalizedSortField !== SortField.relevance) {
-                        this.clearAlphaBarFilters();
-                        this.setSelectedSort(SortField.relevance);
-                    }
-                },
+                ${this.getSortDisplayOption(SortField.relevance, {
+                onClick: () => {
+                    this.dropdownBackdropVisible = false;
+                    if (this.finalizedSortField !== SortField.relevance) {
+                        this.clearAlphaBarFilters();
+                        this.setSelectedSort(SortField.relevance);
+                    }
+                },
             })}
-              </li>`
+              </li>`
             : nothing}
           <li>${this.viewsDropdownTemplate}</li>
           <li>
-            ${this.getSortDisplayOption(SortField.title, {
-            onClick: () => {
-                this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.title) {
-                    this.alphaSelectorVisible = 'title';
-                    this.selectedCreatorFilter = null;
-                    this.setSelectedSort(SortField.title);
-                    this.emitCreatorLetterChangedEvent();
-                }
-            },
+            ${this.getSortDisplayOption(SortField.title, {
+            onClick: () => {
+                this.dropdownBackdropVisible = false;
+                if (this.finalizedSortField !== SortField.title) {
+                    this.alphaSelectorVisible = 'title';
+                    this.selectedCreatorFilter = null;
+                    this.setSelectedSort(SortField.title);
+                    this.emitCreatorLetterChangedEvent();
+                }
+            },
         })}
           </li>
           <li>${this.dateDropdownTemplate}</li>
           <li>
-            ${this.getSortDisplayOption(SortField.creator, {
-            onClick: () => {
-                this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.creator) {
-                    this.alphaSelectorVisible = 'creator';
-                    this.selectedTitleFilter = null;
-                    this.setSelectedSort(SortField.creator);
-                    this.emitTitleLetterChangedEvent();
-                }
-            },
+            ${this.getSortDisplayOption(SortField.creator, {
+            onClick: () => {
+                this.dropdownBackdropVisible = false;
+                if (this.finalizedSortField !== SortField.creator) {
+                    this.alphaSelectorVisible = 'creator';
+                    this.selectedTitleFilter = null;
+                    this.setSelectedSort(SortField.creator);
+                    this.emitTitleLetterChangedEvent();
+                }
+            },
         })}
           </li>
         </ul>
       </div>
-    `;
-    }
-    /** The template to render all the sort options in mobile view */
-    get mobileSortSelectorTemplate() {
-        const displayedOptions = Object.values(SORT_OPTIONS)
-            .filter(opt => opt.shownInSortBar)
-            .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
-            .filter(opt => this.showDateFavorited || opt.field !== SortField.datefavorited);
+    `;
+    }
+    /** The template to render all the sort options in mobile view */
+    get mobileSortSelectorTemplate() {
+        const displayedOptions = Object.values(SORT_OPTIONS)
+            .filter(opt => opt.shownInSortBar)
+            .filter(opt => this.showRelevance || opt.field !== SortField.relevance)
+            .filter(opt => this.showDateFavorited || opt.field !== SortField.datefavorited);
         return html `
       <div
         id="mobile-sort-container"
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
-        ${this.getSortDropdown({
-            displayName: html `${SORT_OPTIONS[this.finalizedSortField]
-                .displayName}`,
-            id: 'mobile-dropdown',
-            selected: true,
-            dropdownOptions: displayedOptions.map(opt => this.getDropdownOption(opt.field)),
-            selectedOption: this.finalizedSortField,
-            onOptionSelected: this.mobileSortChanged,
-            onDropdownClick: () => {
-                this.dropdownBackdropVisible = this.mobileDropdown.open;
-                this.mobileDropdown.classList.toggle('open', this.mobileDropdown.open);
-            },
+        ${this.getSortDropdown({
+            displayName: html `${SORT_OPTIONS[this.finalizedSortField]
+                .displayName}`,
+            id: 'mobile-dropdown',
+            selected: true,
+            dropdownOptions: displayedOptions.map(opt => this.getDropdownOption(opt.field)),
+            selectedOption: this.finalizedSortField,
+            onOptionSelected: this.mobileSortChanged,
+            onDropdownClick: () => {
+                this.dropdownBackdropVisible = this.mobileDropdown.open;
+                this.mobileDropdown.classList.toggle('open', this.mobileDropdown.open);
+            },
         })}
       </div>
-    `;
-    }
-    /**
-     * This generates each of the non-dropdown sort option links.
-     *
-     * It manages the display value and the selected state of the option.
-     *
-     * @param sortField
-     * @param options {
-     *    onClick?: (e: Event) => void; If this is provided, it will also be called when the option is clicked.
-     *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.
-     *    selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.
-     * }
-     * @returns
-     */
-    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 : SORT_OPTIONS[sortField].displayName;
+    `;
+    }
+    /**
+     * This generates each of the non-dropdown sort option links.
+     *
+     * It manages the display value and the selected state of the option.
+     *
+     * @param sortField
+     * @param options {
+     *    onClick?: (e: Event) => void; If this is provided, it will also be called when the option is clicked.
+     *    displayName?: TemplateResult; The name to display for the option. Defaults to the sortField display name.
+     *    selected?: boolean; true if the option is selected. Defaults to the selectedSort === sortField.
+     * }
+     * @returns
+     */
+    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 : SORT_OPTIONS[sortField].displayName;
         return html `
       <button
         class=${isSelected ? 'selected' : nothing}
         data-title="${displayName}"
-        @click=${(e) => {
-            var _a;
-            e.preventDefault();
-            (_a = options === null || options === void 0 ? void 0 : options.onClick) === null || _a === void 0 ? void 0 : _a.call(options, e);
+        @click=${(e) => {
+            var _a;
+            e.preventDefault();
+            (_a = options === null || options === void 0 ? void 0 : options.onClick) === null || _a === void 0 ? void 0 : _a.call(options, e);
         }}
       >
         ${displayName}
       </button>
-    `;
-    }
-    /**
-     * Generates a dropdown component containing multiple grouped sort options.
-     *
-     * @param options.displayName The name to use for the dropdown's visible label
-     * @param options.id The id to apply to the dropdown element
-     * @param options.dropdownOptions An array of option objects used to populate the dropdown
-     * @param options.selectedOption The id of the option that should be initially selected
-     * @param options.selected A boolean indicating whether this dropdown should use its
-     *  selected appearance
-     * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown
-     * @param options.onDropdownClick A handler for click events on the dropdown
-     * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events
-     *  on the dropdown's label
-     */
-    getSortDropdown(options) {
-        var _a, _b, _c, _d, _e;
+    `;
+    }
+    /**
+     * Generates a dropdown component containing multiple grouped sort options.
+     *
+     * @param options.displayName The name to use for the dropdown's visible label
+     * @param options.id The id to apply to the dropdown element
+     * @param options.dropdownOptions An array of option objects used to populate the dropdown
+     * @param options.selectedOption The id of the option that should be initially selected
+     * @param options.selected A boolean indicating whether this dropdown should use its
+     *  selected appearance
+     * @param options.onOptionSelected A handler for optionSelected events coming from the dropdown
+     * @param options.onDropdownClick A handler for click events on the dropdown
+     * @param options.onLabelInteraction A handler for click events and Enter/Space keydown events
+     *  on the dropdown's label
+     */
+    getSortDropdown(options) {
+        var _a, _b, _c, _d, _e;
         return html `
       <ia-dropdown
         id=${(_a = options.id) !== null && _a !== void 0 ? _a : nothing}
@@ -402,131 +402,132 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           slot="dropdown-label"
           data-title="${options.displayName.values}"
           @click=${(_e = options.onLabelInteraction) !== null && _e !== void 0 ? _e : nothing}
-          @keydown=${options.onLabelInteraction
-            ? (e) => {
-                var _a;
-                if (e.key === 'Enter' || e.key === ' ') {
-                    (_a = options.onLabelInteraction) === null || _a === void 0 ? void 0 : _a.call(options, e);
-                }
-            }
+          @keydown=${options.onLabelInteraction
+            ? (e) => {
+                var _a;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    (_a = options.onLabelInteraction) === null || _a === void 0 ? void 0 : _a.call(options, e);
+                }
+            }
             : nothing}
         >
           ${options.displayName}
         </span>
       </ia-dropdown>
-    `;
-    }
-    /** Generates a single dropdown option object for the given sort field */
-    getDropdownOption(sortField) {
-        return {
-            id: sortField,
-            selectedHandler: () => {
-                this.selectDropdownSortField(sortField);
-            },
+    `;
+    }
+    /** Generates a single dropdown option object for the given sort field */
+    getDropdownOption(sortField) {
+        return {
+            id: sortField,
+            selectedHandler: () => {
+                this.selectDropdownSortField(sortField);
+            },
             label: html `
         <span class="dropdown-option-label">
           ${SORT_OPTIONS[sortField].displayName}
         </span>
-      `,
-        };
-    }
-    /** Handler for when any sort dropdown option is selected */
-    dropdownOptionSelected(e) {
-        this.dropdownBackdropVisible = false;
-        this.clearAlphaBarFilters();
-        const sortField = e.detail.option.id;
-        this.setSelectedSort(sortField);
-        if (this.viewOptionSelected) {
-            this.lastSelectedViewSort = sortField;
-        }
-        else if (this.dateOptionSelected) {
-            this.lastSelectedDateSort = sortField;
-        }
-    }
-    /** The template to render for the views dropdown */
-    get viewsDropdownTemplate() {
-        return this.getSortDropdown({
-            displayName: html `${this.viewSortDisplayName}`,
-            id: 'views-dropdown',
-            selected: this.viewOptionSelected,
-            dropdownOptions: [
-                this.getDropdownOption(SortField.weeklyview),
-                this.getDropdownOption(SortField.alltimeview),
-            ],
-            selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',
-            onOptionSelected: this.dropdownOptionSelected,
-            onDropdownClick: () => {
-                this.dateDropdown.open = false;
-                this.dropdownBackdropVisible = this.viewsDropdown.open;
-                this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);
-            },
-            onLabelInteraction: (e) => {
-                if (!this.viewsDropdown.open && !this.viewOptionSelected) {
-                    e.stopPropagation();
-                    this.clearAlphaBarFilters();
-                    this.setSelectedSort(this.lastSelectedViewSort);
-                }
-            },
-        });
-    }
-    /** The template to render for the date dropdown */
-    get dateDropdownTemplate() {
-        return this.getSortDropdown({
-            displayName: html `${this.dateSortDisplayName}`,
-            id: 'date-dropdown',
-            selected: this.dateOptionSelected,
-            dropdownOptions: [
-                ...(this.showDateFavorited
-                    ? [this.getDropdownOption(SortField.datefavorited)]
-                    : []),
-                this.getDropdownOption(SortField.date),
-                this.getDropdownOption(SortField.datearchived),
-                this.getDropdownOption(SortField.datereviewed),
-                this.getDropdownOption(SortField.dateadded),
-            ],
-            selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',
-            onOptionSelected: this.dropdownOptionSelected,
-            onDropdownClick: () => {
-                this.viewsDropdown.open = false;
-                this.dropdownBackdropVisible = this.dateDropdown.open;
-                this.dateDropdown.classList.toggle('open', this.dateDropdown.open);
-            },
-            onLabelInteraction: (e) => {
-                if (!this.dateDropdown.open && !this.dateOptionSelected) {
-                    e.stopPropagation();
-                    this.clearAlphaBarFilters();
-                    this.setSelectedSort(this.lastSelectedDateSort);
-                }
-            },
-        });
-    }
-    /** Handler for when a new mobile sort dropdown option is selected */
-    mobileSortChanged(e) {
-        this.dropdownBackdropVisible = false;
-        const sortField = e.detail.option.id;
-        this.setSelectedSort(sortField);
-        this.alphaSelectorVisible = null;
-        if (sortField !== 'title' && this.selectedTitleFilter) {
-            this.selectedTitleFilter = null;
-            this.emitTitleLetterChangedEvent();
-        }
-        if (sortField !== 'creator' && this.selectedCreatorFilter) {
-            this.selectedCreatorFilter = null;
-            this.emitCreatorLetterChangedEvent();
-        }
-    }
-    /** Template for rendering the three display mode options */
-    get displayOptionTemplate() {
+      `,
+        };
+    }
+    /** Handler for when any sort dropdown option is selected */
+    dropdownOptionSelected(e) {
+        this.dropdownBackdropVisible = false;
+        this.clearAlphaBarFilters();
+        const sortField = e.detail.option.id;
+        this.setSelectedSort(sortField);
+        if (this.viewOptionSelected) {
+            this.lastSelectedViewSort = sortField;
+        }
+        else if (this.dateOptionSelected) {
+            this.lastSelectedDateSort = sortField;
+        }
+    }
+    /** The template to render for the views dropdown */
+    get viewsDropdownTemplate() {
+        return this.getSortDropdown({
+            displayName: html `${this.viewSortDisplayName}`,
+            id: 'views-dropdown',
+            selected: this.viewOptionSelected,
+            dropdownOptions: [
+                this.getDropdownOption(SortField.weeklyview),
+                this.getDropdownOption(SortField.alltimeview),
+            ],
+            selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',
+            onOptionSelected: this.dropdownOptionSelected,
+            onDropdownClick: () => {
+                this.dateDropdown.open = false;
+                this.dropdownBackdropVisible = this.viewsDropdown.open;
+                this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);
+            },
+            onLabelInteraction: (e) => {
+                if (!this.viewsDropdown.open && !this.viewOptionSelected) {
+                    e.stopPropagation();
+                    this.clearAlphaBarFilters();
+                    this.setSelectedSort(this.lastSelectedViewSort);
+                }
+            },
+        });
+    }
+    /** The template to render for the date dropdown */
+    get dateDropdownTemplate() {
+        return this.getSortDropdown({
+            displayName: html `${this.dateSortDisplayName}`,
+            id: 'date-dropdown',
+            selected: this.dateOptionSelected,
+            dropdownOptions: [
+                ...(this.showDateFavorited
+                    ? [this.getDropdownOption(SortField.datefavorited)]
+                    : []),
+                this.getDropdownOption(SortField.date),
+                this.getDropdownOption(SortField.datearchived),
+                this.getDropdownOption(SortField.datereviewed),
+                this.getDropdownOption(SortField.dateadded),
+            ],
+            selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',
+            onOptionSelected: this.dropdownOptionSelected,
+            onDropdownClick: () => {
+                this.viewsDropdown.open = false;
+                this.dropdownBackdropVisible = this.dateDropdown.open;
+                this.dateDropdown.classList.toggle('open', this.dateDropdown.open);
+            },
+            onLabelInteraction: (e) => {
+                if (!this.dateDropdown.open && !this.dateOptionSelected) {
+                    e.stopPropagation();
+                    this.clearAlphaBarFilters();
+                    this.setSelectedSort(this.lastSelectedDateSort);
+                }
+            },
+        });
+    }
+    /** Handler for when a new mobile sort dropdown option is selected */
+    mobileSortChanged(e) {
+        this.dropdownBackdropVisible = false;
+        const sortField = e.detail.option.id;
+        this.setSelectedSort(sortField);
+        this.alphaSelectorVisible = null;
+        if (sortField !== 'title' && this.selectedTitleFilter) {
+            this.selectedTitleFilter = null;
+            this.emitTitleLetterChangedEvent();
+        }
+        if (sortField !== 'creator' && this.selectedCreatorFilter) {
+            this.selectedCreatorFilter = null;
+            this.emitCreatorLetterChangedEvent();
+        }
+    }
+    /** Template for rendering the three display mode options */
+    get displayOptionTemplate() {
         return html `
       <ul>
         <li>
           <button
             id="grid-button"
-            @click=${() => {
-            this.displayMode = 'grid';
+            @click=${() => {
+            this.displayMode = 'grid';
         }}
             class=${this.displayMode === 'grid' ? 'active' : ''}
             title="Tile view"
+            data-testid="grid-button"
           >
             ${tileIcon}
           </button>
@@ -534,11 +535,12 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         <li>
           <button
             id="list-detail-button"
-            @click=${() => {
-            this.displayMode = 'list-detail';
+            @click=${() => {
+            this.displayMode = 'list-detail';
         }}
             class=${this.displayMode === 'list-detail' ? 'active' : ''}
             title="List view"
+            data-testid="list-detail-button"
           >
             ${listIcon}
           </button>
@@ -546,223 +548,224 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         <li>
           <button
             id="list-compact-button"
-            @click=${() => {
-            this.displayMode = 'list-compact';
+            @click=${() => {
+            this.displayMode = 'list-compact';
         }}
             class=${this.displayMode === 'list-compact' ? 'active' : ''}
             title="Compact list view"
+            data-testid="list-compact-button"
           >
             ${compactIcon}
           </button>
         </li>
       </ul>
-    `;
-    }
-    /**
-     * Template for rendering the transparent backdrop to capture clicks outside the
-     * dropdown menu while it is open.
-     */
-    get dropdownBackdrop() {
+    `;
+    }
+    /**
+     * Template for rendering the transparent backdrop to capture clicks outside the
+     * dropdown menu while it is open.
+     */
+    get dropdownBackdrop() {
         return html `
       <div
         id="sort-selector-backdrop"
         @keyup=${this.closeDropdowns}
         @click=${this.closeDropdowns}
       ></div>
-    `;
-    }
-    /** Closes all of the sorting dropdown components' menus */
-    closeDropdowns() {
-        this.dropdownBackdropVisible = false;
-        const allDropdowns = [
-            this.viewsDropdown,
-            this.dateDropdown,
-            this.mobileDropdown,
-        ];
-        for (const dropdown of allDropdowns) {
-            dropdown.open = false;
-            dropdown.classList.remove('open');
-        }
-    }
-    selectDropdownSortField(sortField) {
-        // When a dropdown sort option is selected, we additionally need to clear the backdrop
-        this.dropdownBackdropVisible = false;
-        this.setSelectedSort(sortField);
-    }
-    clearAlphaBarFilters() {
-        this.alphaSelectorVisible = null;
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = null;
-        this.emitTitleLetterChangedEvent();
-        this.emitCreatorLetterChangedEvent();
-    }
-    setSortDirection(sortDirection) {
-        this.sortDirection = sortDirection;
-        this.emitSortChangedEvent();
-    }
-    /** Toggles the current sort direction between 'asc' and 'desc' */
-    toggleSortDirection() {
-        this.setSortDirection(this.finalizedSortDirection === 'desc' ? 'asc' : 'desc');
-    }
-    handleSortDirectionClicked() {
-        if (!this.sortDirection &&
-            this.defaultSortField &&
-            this.defaultSortDirection) {
-            // When the sort direction is merely defaulted (not set by the user), clicking
-            // the toggled button should "promote" the default sort to an explicitly-set one
-            // and then toggle it as usual.
-            this.selectedSort = this.defaultSortField;
-            this.sortDirection = this.defaultSortDirection;
-        }
-        this.toggleSortDirection();
-    }
-    setSelectedSort(sort) {
-        this.selectedSort = sort;
-        // Apply this field's default sort direction
-        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 */
-    get finalizedSortField() {
-        return this.selectedSort === SortField.default
-            ? this.defaultSortField
-            : this.selectedSort;
-    }
-    /** The current sort direction, or the default one if no explicit direction is set */
-    get finalizedSortDirection() {
-        return this.sortDirection === null
-            ? 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.
-     *
-     * This checks to see if the current sort is one of them.
-     *
-     * @readonly
-     * @private
-     * @type {boolean}
-     * @memberof SortFilterBar
-     */
-    get dateOptionSelected() {
-        const dateSortFields = [
-            SortField.datefavorited,
-            SortField.datearchived,
-            SortField.date,
-            SortField.datereviewed,
-            SortField.dateadded,
-        ];
-        return dateSortFields.includes(this.finalizedSortField);
-    }
-    /**
-     * There are two view sort options.
-     *
-     * This checks to see if the current sort is one of them.
-     *
-     * @readonly
-     * @private
-     * @type {boolean}
-     * @memberof SortFilterBar
-     */
-    get viewOptionSelected() {
-        const viewSortFields = [
-            SortField.alltimeview,
-            SortField.weeklyview,
-        ];
-        return viewSortFields.includes(this.finalizedSortField);
-    }
-    /**
-     * The default field for the date sort dropdown.
-     * This is Date Favorited when that option is available, or Date Published otherwise.
-     */
-    get defaultDateSortField() {
-        return this.showDateFavorited ? SortField.datefavorited : SortField.date;
-    }
-    /**
-     * The display name of the last selected date field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    get dateSortDisplayName() {
-        return SORT_OPTIONS[this.lastSelectedDateSort].displayName;
-    }
-    /**
-     * The display name of the last selected view field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    get viewSortDisplayName() {
-        return SORT_OPTIONS[this.lastSelectedViewSort].displayName;
-    }
-    get titleSelectorBar() {
-        var _a;
+    `;
+    }
+    /** Closes all of the sorting dropdown components' menus */
+    closeDropdowns() {
+        this.dropdownBackdropVisible = false;
+        const allDropdowns = [
+            this.viewsDropdown,
+            this.dateDropdown,
+            this.mobileDropdown,
+        ];
+        for (const dropdown of allDropdowns) {
+            dropdown.open = false;
+            dropdown.classList.remove('open');
+        }
+    }
+    selectDropdownSortField(sortField) {
+        // When a dropdown sort option is selected, we additionally need to clear the backdrop
+        this.dropdownBackdropVisible = false;
+        this.setSelectedSort(sortField);
+    }
+    clearAlphaBarFilters() {
+        this.alphaSelectorVisible = null;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.emitTitleLetterChangedEvent();
+        this.emitCreatorLetterChangedEvent();
+    }
+    setSortDirection(sortDirection) {
+        this.sortDirection = sortDirection;
+        this.emitSortChangedEvent();
+    }
+    /** Toggles the current sort direction between 'asc' and 'desc' */
+    toggleSortDirection() {
+        this.setSortDirection(this.finalizedSortDirection === 'desc' ? 'asc' : 'desc');
+    }
+    handleSortDirectionClicked() {
+        if (!this.sortDirection &&
+            this.defaultSortField &&
+            this.defaultSortDirection) {
+            // When the sort direction is merely defaulted (not set by the user), clicking
+            // the toggled button should "promote" the default sort to an explicitly-set one
+            // and then toggle it as usual.
+            this.selectedSort = this.defaultSortField;
+            this.sortDirection = this.defaultSortDirection;
+        }
+        this.toggleSortDirection();
+    }
+    setSelectedSort(sort) {
+        this.selectedSort = sort;
+        // Apply this field's default sort direction
+        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 */
+    get finalizedSortField() {
+        return this.selectedSort === SortField.default
+            ? this.defaultSortField
+            : this.selectedSort;
+    }
+    /** The current sort direction, or the default one if no explicit direction is set */
+    get finalizedSortDirection() {
+        return this.sortDirection === null
+            ? 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.
+     *
+     * This checks to see if the current sort is one of them.
+     *
+     * @readonly
+     * @private
+     * @type {boolean}
+     * @memberof SortFilterBar
+     */
+    get dateOptionSelected() {
+        const dateSortFields = [
+            SortField.datefavorited,
+            SortField.datearchived,
+            SortField.date,
+            SortField.datereviewed,
+            SortField.dateadded,
+        ];
+        return dateSortFields.includes(this.finalizedSortField);
+    }
+    /**
+     * There are two view sort options.
+     *
+     * This checks to see if the current sort is one of them.
+     *
+     * @readonly
+     * @private
+     * @type {boolean}
+     * @memberof SortFilterBar
+     */
+    get viewOptionSelected() {
+        const viewSortFields = [
+            SortField.alltimeview,
+            SortField.weeklyview,
+        ];
+        return viewSortFields.includes(this.finalizedSortField);
+    }
+    /**
+     * The default field for the date sort dropdown.
+     * This is Date Favorited when that option is available, or Date Published otherwise.
+     */
+    get defaultDateSortField() {
+        return this.showDateFavorited ? SortField.datefavorited : SortField.date;
+    }
+    /**
+     * The display name of the last selected date field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    get dateSortDisplayName() {
+        return SORT_OPTIONS[this.lastSelectedDateSort].displayName;
+    }
+    /**
+     * The display name of the last selected view field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    get viewSortDisplayName() {
+        return SORT_OPTIONS[this.lastSelectedViewSort].displayName;
+    }
+    get titleSelectorBar() {
+        var _a;
         return html ` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
       .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.title}
       ariaLandmarkLabel="Filter by title letter"
       @letterChanged=${this.titleLetterChanged}
-    ></alpha-bar>`;
-    }
-    get creatorSelectorBar() {
-        var _a;
+    ></alpha-bar>`;
+    }
+    get creatorSelectorBar() {
+        var _a;
         return html ` <alpha-bar
       .selectedLetter=${this.selectedCreatorFilter}
       .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.creator}
       ariaLandmarkLabel="Filter by creator letter"
       @letterChanged=${this.creatorLetterChanged}
-    ></alpha-bar>`;
-    }
-    titleLetterChanged(e) {
-        var _a;
-        this.selectedTitleFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
-        this.emitTitleLetterChangedEvent();
-    }
-    creatorLetterChanged(e) {
-        var _a;
-        this.selectedCreatorFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
-        this.emitCreatorLetterChangedEvent();
-    }
-    emitTitleLetterChangedEvent() {
-        const event = new CustomEvent('titleLetterChanged', {
-            detail: { selectedLetter: this.selectedTitleFilter },
-        });
-        this.dispatchEvent(event);
-    }
-    emitCreatorLetterChangedEvent() {
-        const event = new CustomEvent('creatorLetterChanged', {
-            detail: { selectedLetter: this.selectedCreatorFilter },
-        });
-        this.dispatchEvent(event);
-    }
-    displayModeChanged() {
-        const event = new CustomEvent('displayModeChanged', {
-            detail: { displayMode: this.displayMode },
-        });
-        this.dispatchEvent(event);
-    }
-    emitSortChangedEvent() {
-        const event = new CustomEvent('sortChanged', {
-            detail: {
-                selectedSort: this.selectedSort,
-                sortDirection: this.sortDirection,
-            },
-        });
-        this.dispatchEvent(event);
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
+    ></alpha-bar>`;
+    }
+    titleLetterChanged(e) {
+        var _a;
+        this.selectedTitleFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
+        this.emitTitleLetterChangedEvent();
+    }
+    creatorLetterChanged(e) {
+        var _a;
+        this.selectedCreatorFilter = (_a = e.detail.selectedLetter) !== null && _a !== void 0 ? _a : null;
+        this.emitCreatorLetterChangedEvent();
+    }
+    emitTitleLetterChangedEvent() {
+        const event = new CustomEvent('titleLetterChanged', {
+            detail: { selectedLetter: this.selectedTitleFilter },
+        });
+        this.dispatchEvent(event);
+    }
+    emitCreatorLetterChangedEvent() {
+        const event = new CustomEvent('creatorLetterChanged', {
+            detail: { selectedLetter: this.selectedCreatorFilter },
+        });
+        this.dispatchEvent(event);
+    }
+    displayModeChanged() {
+        const event = new CustomEvent('displayModeChanged', {
+            detail: { displayMode: this.displayMode },
+        });
+        this.dispatchEvent(event);
+    }
+    emitSortChangedEvent() {
+        const event = new CustomEvent('sortChanged', {
+            detail: {
+                selectedSort: this.selectedSort,
+                sortDirection: this.sortDirection,
+            },
+        });
+        this.dispatchEvent(event);
+    }
+    static get styles() {
+        return [
+            srOnlyStyle,
             css `
         #container {
           position: relative;
@@ -993,84 +996,84 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           white-space: nowrap;
           user-select: none;
         }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "displayMode", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "defaultSortDirection", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "defaultSortField", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "sortDirection", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "selectedSort", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "selectedTitleFilter", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "selectedCreatorFilter", void 0);
-__decorate([
-    property({ type: Boolean })
-], SortFilterBar.prototype, "showRelevance", void 0);
-__decorate([
-    property({ type: Boolean })
-], SortFilterBar.prototype, "showDateFavorited", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SortFilterBar.prototype, "enableSortOptionsSlot", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SortFilterBar.prototype, "suppressDisplayModes", void 0);
-__decorate([
-    property({ type: Object })
-], SortFilterBar.prototype, "prefixFilterCountMap", void 0);
-__decorate([
-    property({ type: Object })
-], SortFilterBar.prototype, "resizeObserver", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "lastSelectedViewSort", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "lastSelectedDateSort", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "alphaSelectorVisible", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "dropdownBackdropVisible", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "desktopSortContainerWidth", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "selectorBarContainerWidth", void 0);
-__decorate([
-    query('#desktop-sort-container')
-], SortFilterBar.prototype, "desktopSortContainer", void 0);
-__decorate([
-    query('#sort-selector-container')
-], SortFilterBar.prototype, "sortSelectorContainer", void 0);
-__decorate([
-    query('#views-dropdown')
-], SortFilterBar.prototype, "viewsDropdown", void 0);
-__decorate([
-    query('#date-dropdown')
-], SortFilterBar.prototype, "dateDropdown", void 0);
-__decorate([
-    query('#mobile-dropdown')
-], SortFilterBar.prototype, "mobileDropdown", void 0);
-SortFilterBar = __decorate([
-    customElement('sort-filter-bar')
-], SortFilterBar);
-export { SortFilterBar };
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "displayMode", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "defaultSortDirection", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "defaultSortField", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "sortDirection", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "selectedSort", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "selectedTitleFilter", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "selectedCreatorFilter", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortFilterBar.prototype, "showRelevance", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortFilterBar.prototype, "showDateFavorited", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SortFilterBar.prototype, "enableSortOptionsSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SortFilterBar.prototype, "suppressDisplayModes", void 0);
+__decorate([
+    property({ type: Object })
+], SortFilterBar.prototype, "prefixFilterCountMap", void 0);
+__decorate([
+    property({ type: Object })
+], SortFilterBar.prototype, "resizeObserver", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "lastSelectedViewSort", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "lastSelectedDateSort", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "alphaSelectorVisible", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "dropdownBackdropVisible", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "desktopSortContainerWidth", void 0);
+__decorate([
+    state()
+], SortFilterBar.prototype, "selectorBarContainerWidth", void 0);
+__decorate([
+    query('#desktop-sort-container')
+], SortFilterBar.prototype, "desktopSortContainer", void 0);
+__decorate([
+    query('#sort-selector-container')
+], SortFilterBar.prototype, "sortSelectorContainer", void 0);
+__decorate([
+    query('#views-dropdown')
+], SortFilterBar.prototype, "viewsDropdown", void 0);
+__decorate([
+    query('#date-dropdown')
+], SortFilterBar.prototype, "dateDropdown", void 0);
+__decorate([
+    query('#mobile-dropdown')
+], SortFilterBar.prototype, "mobileDropdown", void 0);
+SortFilterBar = __decorate([
+    customElement('sort-filter-bar')
+], SortFilterBar);
+export { SortFilterBar };
 //# sourceMappingURL=sort-filter-bar.js.map