@internetarchive/collection-browser 0.4.11 → 0.4.13-alpha.1

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

@@ -1,40 +1,62 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { SortField, SortFieldDisplayName, } from '../models';
-import './alpha-bar';
-import { sortIcon } from './img/sort-triangle';
-import { tileIcon } from './img/tile';
-import { listIcon } from './img/list';
-import { compactIcon } from './img/compact';
-let SortFilterBar = class SortFilterBar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.sortDirection = null;
-        this.selectedSort = SortField.relevance;
-        this.selectedTitleFilter = null;
-        this.selectedCreatorFilter = null;
-        this.showRelevance = true;
-        this.alphaSelectorVisible = null;
-        this.dateSortSelectorVisible = false;
-        this.viewSortSelectorVisible = false;
-        this.desktopSelectorBarWidth = 0;
-        this.selectorBarContainerWidth = 0;
-        this.hoveringOverDateSortOptions = false;
-        this.boundSortBarSelectorEscapeListener = (e) => {
-            if (e.key === 'Escape') {
-                this.viewSortSelectorVisible = false;
-                this.dateSortSelectorVisible = false;
-            }
-        };
-    }
-    render() {
+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 './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';
+let SortFilterBar = class SortFilterBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 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.relevance;
+        /** 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;
+        /**
+         * 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">
         <div id="sort-bar">
-          <div id="sort-direction-container">
+          <div class="sort-direction-container">
             ${this.sortDirectionSelectorTemplate}
           </div>
+          <span class="sort-by-text">Sort by:</span>
 
           <div id="sort-selector-container">
             ${this.mobileSortSelectorTemplate}
@@ -44,280 +66,375 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </div>
 
-        ${this.viewSortSelectorVisible && !this.mobileSelectorVisible
-            ? this.viewSortSelector
-            : nothing}
-        ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
-            ? this.dateSortSelector
-            : nothing}
+        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
         ${this.alphaBarTemplate}
-
-        <div id="bottom-shadow"></div>
       </div>
-    `;
-    }
-    updated(changed) {
-        if (changed.has('displayMode')) {
-            this.displayModeChanged();
-        }
-        if (changed.has('selectedSort') && this.sortDirection === null) {
-            this.sortDirection = 'desc';
-        }
-        if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
-            this.alphaSelectorVisible = 'title';
-        }
-        if (changed.has('selectedCreatorFilter') && this.selectedCreatorFilter) {
-            this.alphaSelectorVisible = 'creator';
-        }
-        if (changed.has('dateSortSelectorVisible') ||
-            changed.has('viewSortSelectorVisible')) {
-            this.setupEscapeListeners();
-        }
-        if (changed.has('resizeObserver')) {
-            const oldObserver = changed.get('resizeObserver');
-            if (oldObserver)
-                this.disconnectResizeObserver(oldObserver);
-            this.setupResizeObserver();
-        }
-    }
-    setupEscapeListeners() {
-        if (this.dateSortSelectorVisible || this.viewSortSelectorVisible) {
-            document.addEventListener('keydown', this.boundSortBarSelectorEscapeListener);
-        }
-        else {
-            document.removeEventListener('keydown', this.boundSortBarSelectorEscapeListener);
-        }
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.disconnectResizeObserver(this.resizeObserver);
-        }
-    }
-    disconnectResizeObserver(resizeObserver) {
-        resizeObserver.removeObserver({
-            target: this.sortSelectorContainer,
-            handler: this,
-        });
-        resizeObserver.removeObserver({
-            target: this.desktopSortSelector,
-            handler: this,
-        });
-    }
-    setupResizeObserver() {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.addObserver({
-            target: this.sortSelectorContainer,
-            handler: this,
-        });
-        this.resizeObserver.addObserver({
-            target: this.desktopSortSelector,
-            handler: this,
-        });
-    }
-    get mobileSelectorVisible() {
-        return this.selectorBarContainerWidth - 10 < this.desktopSelectorBarWidth;
-    }
-    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;
-    }
-    handleResize(entry) {
-        if (entry.target === this.desktopSortSelector) {
-            this.desktopSelectorBarWidth = entry.contentRect.width;
-        }
-        else if (entry.target === this.sortSelectorContainer) {
-            this.selectorBarContainerWidth = entry.contentRect.width;
-        }
-    }
-    get sortDirectionSelectorTemplate() {
+    `;
+    }
+    updated(changed) {
+        if (changed.has('displayMode')) {
+            this.displayModeChanged();
+        }
+        if (changed.has('selectedSort') && this.sortDirection === null) {
+            this.sortDirection = DefaultSortDirection[this.selectedSort];
+        }
+        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')) {
+            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);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+    }
+    disconnectResizeObserver(resizeObserver) {
+        resizeObserver.removeObserver({
+            target: this.sortSelectorContainer,
+            handler: this,
+        });
+        resizeObserver.removeObserver({
+            target: this.desktopSortContainer,
+            handler: this,
+        });
+    }
+    setupResizeObserver() {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.addObserver({
+            target: this.sortSelectorContainer,
+            handler: this,
+        });
+        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() {
         return html `
-      <div id="sort-direction-selector">
-        <button
-          id="sort-ascending-btn"
-          class="sort-button ${this.sortDirection === 'asc' ? 'selected' : ''}"
-          ?disabled=${this.selectedSort === 'relevance'}
-          @click=${() => {
-            this.setSortDirections('asc');
-        }}
-        >
-          ${sortIcon}
-        </button>
-        <button
-          id="sort-descending-btn"
-          class="sort-button ${this.sortDirection === 'desc' ? 'selected' : ''}"
-          ?disabled=${this.selectedSort === 'relevance'}
-          @click=${() => {
-            this.setSortDirections('desc');
-        }}
-        >
-          ${sortIcon}
-        </button>
+      <button
+        class="sort-direction-selector"
+        ?disabled=${this.selectedSort === 'relevance'}
+        @click=${this.toggleSortDirection}
+      >
+        ${this.sortDirectionIcon}
+      </button>
+    `;
+    }
+    /** 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.selectedSort === 'relevance') {
+            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.sortDirection === 'asc' ? sortUpIcon : sortDownIcon}
       </div>
-    `;
-    }
-    get desktopSortSelectorTemplate() {
+    `;
+    }
+    /** The template to render all the sort options in desktop view */
+    get desktopSortSelectorTemplate() {
         return html `
-      <ul
-        id="desktop-sort-selector"
+      <div
+        id="desktop-sort-container"
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
-        <li id="sort-by-text">Sort By</li>
-        <li>
-          ${this.showRelevance
-            ? this.getSortDisplayOption(SortField.relevance)
+        <ul id="desktop-sort-selector">
+          <li>
+            ${this.showRelevance
+            ? this.getSortDisplayOption(SortField.relevance, {
+                onClick: () => {
+                    this.clearAlphaBarFilters();
+                    this.dropdownBackdropVisible = false;
+                    this.setSelectedSort(SortField.relevance);
+                    this.emitTitleLetterChangedEvent();
+                    this.emitCreatorLetterChangedEvent();
+                },
+            })
             : nothing}
-        </li>
-        <li>
-          ${this.getSortDisplayOption(SortField.weeklyview, {
-            clickEvent: () => {
-                if (!this.viewOptionSelected)
-                    this.setSelectedSort(SortField.weeklyview);
-                this.viewSortSelectorVisible = !this.viewSortSelectorVisible;
-                this.dateSortSelectorVisible = false;
-                this.alphaSelectorVisible = null;
-                this.selectedTitleFilter = null;
-                this.selectedCreatorFilter = null;
-                this.emitTitleLetterChangedEvent();
-                this.emitCreatorLetterChangedEvent();
-            },
-            displayName: html `${this.viewSortField}`,
-            isSelected: () => this.viewOptionSelected,
+          </li>
+          <li>${this.viewsDropdownTemplate}</li>
+          <li>
+            ${this.getSortDisplayOption(SortField.title, {
+            onClick: () => {
+                this.alphaSelectorVisible = 'title';
+                this.selectedCreatorFilter = null;
+                this.dropdownBackdropVisible = false;
+                this.setSelectedSort(SortField.title);
+                this.emitCreatorLetterChangedEvent();
+            },
         })}
-        </li>
-        <li>
-          ${this.getSortDisplayOption(SortField.title, {
-            clickEvent: () => {
-                this.alphaSelectorVisible = 'title';
-                this.selectedCreatorFilter = null;
-                this.dateSortSelectorVisible = false;
-                this.viewSortSelectorVisible = false;
-                this.setSelectedSort(SortField.title);
-                this.emitCreatorLetterChangedEvent();
-            },
+          </li>
+          <li>${this.dateDropdownTemplate}</li>
+          <li>
+            ${this.getSortDisplayOption(SortField.creator, {
+            onClick: () => {
+                this.alphaSelectorVisible = 'creator';
+                this.selectedTitleFilter = null;
+                this.dropdownBackdropVisible = false;
+                this.setSelectedSort(SortField.creator);
+                this.emitTitleLetterChangedEvent();
+            },
         })}
-        </li>
-        <li>
-          ${this.getSortDisplayOption(SortField.date, {
-            clickEvent: () => {
-                if (!this.dateOptionSelected)
-                    this.setSelectedSort(SortField.date);
-                this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
-                this.viewSortSelectorVisible = false;
-                this.alphaSelectorVisible = null;
-                this.selectedTitleFilter = null;
-                this.selectedCreatorFilter = null;
-                this.emitTitleLetterChangedEvent();
-                this.emitCreatorLetterChangedEvent();
-            },
-            displayName: html `${this.dateSortField}`,
-            isSelected: () => this.dateOptionSelected,
-        })}
-        </li>
-        <li>
-          ${this.getSortDisplayOption(SortField.creator, {
-            clickEvent: () => {
-                this.alphaSelectorVisible = 'creator';
-                this.selectedTitleFilter = null;
-                this.dateSortSelectorVisible = false;
-                this.setSelectedSort(SortField.creator);
-                this.emitTitleLetterChangedEvent();
-            },
+          </li>
+        </ul>
+      </div>
+    `;
+    }
+    /** The template to render all the sort options in mobile view */
+    get mobileSortSelectorTemplate() {
+        var _a, _b;
+        return html `
+      <div
+        id="mobile-sort-container"
+        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
+      >
+        ${this.getSortDropdown({
+            displayName: html `${(_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : ''}`,
+            id: 'mobile-dropdown',
+            isSelected: () => true,
+            dropdownOptions: Object.keys(SortField).map(field => this.getDropdownOption(field)),
+            selectedOption: (_b = this.selectedSort) !== null && _b !== void 0 ? _b : SortField.relevance,
+            onOptionSelected: this.mobileSortChanged,
+            onDropdownClick: () => {
+                this.dropdownBackdropVisible = this.mobileDropdown.open;
+                this.mobileDropdown.classList.toggle('open', this.mobileDropdown.open);
+            },
         })}
-        </li>
-      </ul>
-    `;
-    }
-    /**
-     * This generates each of the sort option links.
-     *
-     * It manages the display value and the selected state of the option.
-     *
-     * @param sortField
-     * @param options {
-     *    additionalClickEvent?: () => 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.
-     *    isSelected?: () => boolean; A function that returns 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.isSelected) !== null && _a !== void 0 ? _a : (() => this.selectedSort === sortField);
-        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SortFieldDisplayName[sortField];
+      </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.
+     *    isSelected?: () => boolean; A function that returns 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.isSelected) !== null && _a !== void 0 ? _a : (() => this.selectedSort === sortField);
+        const displayName = (_b = options === null || options === void 0 ? void 0 : options.displayName) !== null && _b !== void 0 ? _b : SortFieldDisplayName[sortField];
         return html `
       <a
         href="#"
-        @click=${(e) => {
-            e.preventDefault();
-            if (options === null || options === void 0 ? void 0 : options.clickEvent) {
-                options.clickEvent(e);
-            }
-            else {
-                this.alphaSelectorVisible = null;
-                this.dateSortSelectorVisible = false;
-                this.selectedTitleFilter = null;
-                this.selectedCreatorFilter = null;
-                this.setSelectedSort(sortField);
-                this.emitTitleLetterChangedEvent();
-                this.emitCreatorLetterChangedEvent();
-            }
+        @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);
         }}
-        class=${isSelected() ? 'selected' : ''}
+        class=${isSelected() ? 'selected' : nothing}
       >
         ${displayName}
       </a>
-    `;
-    }
-    get mobileSortSelectorTemplate() {
+    `;
+    }
+    /**
+     * 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.isSelected A function returning 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, _f;
         return html `
-      <select
-        id="mobile-sort-selector"
-        @change=${this.mobileSortChanged}
-        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
+      <ia-dropdown
+        id=${(_a = options.id) !== null && _a !== void 0 ? _a : nothing}
+        class=${((_b = options.isSelected) === null || _b === void 0 ? void 0 : _b.call(options)) ? 'selected' : nothing}
+        displayCaret
+        closeOnSelect
+        includeSelectedOption
+        .openViaButton=${false}
+        .options=${options.dropdownOptions}
+        .selectedOption=${(_c = options.selectedOption) !== null && _c !== void 0 ? _c : ''}
+        @optionSelected=${(_d = options.onOptionSelected) !== null && _d !== void 0 ? _d : nothing}
+        @click=${(_e = options.onDropdownClick) !== null && _e !== void 0 ? _e : nothing}
       >
-        ${Object.keys(SortField).map(field => html `
-            <option value="${field}" ?selected=${this.selectedSort === field}>
-              ${SortFieldDisplayName[field]}
-            </option>
-          `)}
-      </select>
-    `;
-    }
-    mobileSortChanged(e) {
-        const target = e.target;
-        const sortField = target.value;
-        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();
-        }
-    }
-    get displayOptionTemplate() {
+        <span
+          class="dropdown-label"
+          slot="dropdown-label"
+          @click=${(_f = options.onLabelInteraction) !== null && _f !== void 0 ? _f : 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);
+                }
+            }
+            : 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);
+            },
+            label: html `
+        <span class="dropdown-option-label">
+          ${SortFieldDisplayName[sortField]}
+        </span>
+      `,
+        };
+    }
+    /** Handler for when any sort dropdown option is selected */
+    dropdownOptionSelected(e) {
+        this.dropdownBackdropVisible = false;
+        this.clearAlphaBarFilters();
+        this.setSelectedSort(e.detail.option.id);
+        this.emitTitleLetterChangedEvent();
+        this.emitCreatorLetterChangedEvent();
+    }
+    /** The template to render for the views dropdown */
+    get viewsDropdownTemplate() {
+        return this.getSortDropdown({
+            displayName: html `${this.viewSortField}`,
+            id: 'views-dropdown',
+            isSelected: () => this.viewOptionSelected,
+            dropdownOptions: [
+                this.getDropdownOption(SortField.weeklyview),
+                this.getDropdownOption(SortField.alltimeview),
+            ],
+            selectedOption: this.viewOptionSelected ? this.selectedSort : '',
+            onOptionSelected: this.dropdownOptionSelected,
+            onDropdownClick: () => {
+                this.dateDropdown.open = false;
+                this.dropdownBackdropVisible = this.viewsDropdown.open;
+                this.viewsDropdown.classList.toggle('open', this.viewsDropdown.open);
+            },
+            onLabelInteraction: () => {
+                if (!this.viewsDropdown.open && !this.viewOptionSelected) {
+                    this.setSelectedSort(SortField.weeklyview);
+                }
+            },
+        });
+    }
+    /** The template to render for the date dropdown */
+    get dateDropdownTemplate() {
+        return this.getSortDropdown({
+            displayName: html `${this.dateSortField}`,
+            id: 'date-dropdown',
+            isSelected: () => this.dateOptionSelected,
+            dropdownOptions: [
+                this.getDropdownOption(SortField.date),
+                this.getDropdownOption(SortField.datearchived),
+                this.getDropdownOption(SortField.datereviewed),
+                this.getDropdownOption(SortField.dateadded),
+            ],
+            selectedOption: this.dateOptionSelected ? this.selectedSort : '',
+            onOptionSelected: this.dropdownOptionSelected,
+            onDropdownClick: () => {
+                this.viewsDropdown.open = false;
+                this.dropdownBackdropVisible = this.dateDropdown.open;
+                this.dateDropdown.classList.toggle('open', this.dateDropdown.open);
+            },
+            onLabelInteraction: () => {
+                if (!this.dateDropdown.open && !this.dateOptionSelected) {
+                    this.setSelectedSort(SortField.date);
+                }
+            },
+        });
+    }
+    /** 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"
@@ -328,8 +445,8 @@ 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"
@@ -340,8 +457,8 @@ 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"
@@ -350,195 +467,180 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           </button>
         </li>
       </ul>
-    `;
-    }
-    get dateSortSelector() {
-        return html `
-      <div
-        id="date-sort-selector-backdrop"
-        @keyup=${() => {
-            this.dateSortSelectorVisible = false;
-        }}
-        @click=${() => {
-            this.dateSortSelectorVisible = false;
-        }}
-      ></div>
-      <div id="date-sort-selector">
-        <ul>
-          <li>${this.getDateSortButton(SortField.datearchived)}</li>
-          <li>${this.getDateSortButton(SortField.date)}</li>
-          <li>${this.getDateSortButton(SortField.datereviewed)}</li>
-          <li>${this.getDateSortButton(SortField.dateadded)}</li>
-        </ul>
-      </div>
-    `;
-    }
-    get viewSortSelector() {
+    `;
+    }
+    /**
+     * Template for rendering the transparent backdrop to capture clicks outside the
+     * dropdown menu while it is open.
+     */
+    get dropdownBackdrop() {
         return html `
       <div
-        id="view-sort-selector-backdrop"
-        @keyup=${() => {
-            this.viewSortSelectorVisible = false;
-        }}
-        @click=${() => {
-            this.viewSortSelectorVisible = false;
-        }}
+        id="sort-selector-backdrop"
+        @keyup=${this.closeDropdowns}
+        @click=${this.closeDropdowns}
       ></div>
-      <div id="view-sort-selector">
-        <ul>
-          <li>${this.getDateSortButton(SortField.alltimeview)}</li>
-          <li>${this.getDateSortButton(SortField.weeklyview)}</li>
-        </ul>
-      </div>
-    `;
-    }
-    getDateSortButton(sortField) {
-        return html `
-      <button
-        @click=${() => {
-            this.selectDateSort(sortField);
-        }}
-        class=${this.selectedSort === sortField ? 'selected' : ''}
-      >
-        ${SortFieldDisplayName[sortField]}
-      </button>
-    `;
-    }
-    selectDateSort(sortField) {
-        this.dateSortSelectorVisible = false;
-        this.viewSortSelectorVisible = false;
-        this.setSelectedSort(sortField);
-    }
-    setSortDirections(sortDirection) {
-        this.sortDirection = sortDirection;
-        this.emitSortChangedEvent();
-    }
-    setSelectedSort(sort) {
-        this.selectedSort = sort;
-        this.emitSortChangedEvent();
-    }
-    /**
-     * 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.datearchived,
-            SortField.date,
-            SortField.datereviewed,
-            SortField.dateadded,
-        ];
-        return dateSortFields.includes(this.selectedSort);
-    }
-    /**
-     * 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.selectedSort);
-    }
-    /**
-     * The display name of the current date field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    get dateSortField() {
-        var _a;
-        const defaultSort = SortFieldDisplayName[SortField.date];
-        const name = this.dateOptionSelected
-            ? (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : defaultSort
-            : defaultSort;
-        return name;
-    }
-    /**
-     * The display name of the current view field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    get viewSortField() {
-        var _a;
-        const defaultSort = SortFieldDisplayName[SortField.weeklyview];
-        const name = this.viewOptionSelected
-            ? (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : defaultSort
-            : defaultSort;
-        return name;
-    }
-    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;
+    }
+    setSortDirection(sortDirection) {
+        this.sortDirection = sortDirection;
+        this.emitSortChangedEvent();
+    }
+    /** Toggles the current sort direction between 'asc' and 'desc' */
+    toggleSortDirection() {
+        this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');
+    }
+    setSelectedSort(sort) {
+        this.selectedSort = sort;
+        // Apply this field's default sort direction
+        this.sortDirection = DefaultSortDirection[this.selectedSort];
+        this.emitSortChangedEvent();
+    }
+    /**
+     * 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.datearchived,
+            SortField.date,
+            SortField.datereviewed,
+            SortField.dateadded,
+        ];
+        return dateSortFields.includes(this.selectedSort);
+    }
+    /**
+     * 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.selectedSort);
+    }
+    /**
+     * The display name of the current date field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    get dateSortField() {
+        var _a;
+        const defaultSort = SortFieldDisplayName[SortField.date];
+        const name = this.dateOptionSelected
+            ? (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : defaultSort
+            : defaultSort;
+        return name;
+    }
+    /**
+     * The display name of the current view field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    get viewSortField() {
+        var _a;
+        const defaultSort = SortFieldDisplayName[SortField.weeklyview];
+        const name = this.viewOptionSelected
+            ? (_a = SortFieldDisplayName[this.selectedSort]) !== null && _a !== void 0 ? _a : defaultSort
+            : defaultSort;
+        return name;
+    }
+    get titleSelectorBar() {
+        var _a;
         return html ` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
       .letterCounts=${(_a = this.prefixFilterCountMap) === null || _a === void 0 ? void 0 : _a.title}
       @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}
       @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);
-    }
-};
+    ></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);
+    }
+};
 SortFilterBar.styles = css `
     #container {
       position: relative;
@@ -547,57 +649,58 @@ SortFilterBar.styles = css `
     #sort-bar {
       display: flex;
       justify-content: space-between;
-      border: 1px solid rgb(232, 232, 232);
       align-items: center;
-      padding: 0.5rem 1.5rem;
-    }
-
-    #sort-direction-container {
-      flex: 0;
-    }
-
-    #sort-by-text {
-      text-transform: uppercase;
-    }
-
-    #bottom-shadow {
-      height: 1px;
-      width: 100%;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-      background-color: #bbb;
+      border-bottom: 1px solid #2c2c2c;
+      font-size: 1.4rem;
     }
 
     ul {
       list-style: none;
       display: flex;
+      align-items: center;
       margin: 0;
       padding: 0;
-      align-items: center;
     }
 
     li {
       padding: 0;
     }
 
-    .sort-button {
-      background: none;
-      color: inherit;
-      border: none;
+    .sort-by-text {
+      margin-right: 5px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    .sort-direction-container {
+      display: flex;
+      align-self: stretch;
+      flex: 0;
+      margin: 0 5px;
+    }
+
+    .sort-direction-selector {
       padding: 0;
+      border: none;
+      appearance: none;
+      background: transparent;
       cursor: pointer;
-      outline: inherit;
-      width: 12px;
-      height: 12px;
-      opacity: 0.5;
     }
 
-    .sort-button.selected {
-      opacity: 1;
+    .sort-direction-selector:disabled {
+      cursor: default;
     }
 
-    .sort-button:disabled {
-      opacity: 0.25;
-      cursor: default;
+    .sort-direction-icon {
+      display: flex;
+      align-items: center;
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      outline: inherit;
+      width: 14px;
+      height: 14px;
     }
 
     #date-sort-selector,
@@ -613,77 +716,45 @@ SortFilterBar.styles = css `
       border: 1px solid #404142;
     }
 
-    #date-sort-selector button,
-    #view-sort-selector button {
-      background: none;
-      border-radius: 15px;
-      color: #404142;
-      border: none;
-      appearance: none;
-      cursor: pointer;
-      -webkit-appearance: none;
-      font-size: 1.4rem;
-      font-weight: 400;
-      padding: 0.5rem 1.2rem;
-    }
-
-    #date-sort-selector button.selected,
-    #view-sort-selector button.selected {
-      background-color: #404142;
-      color: white;
-    }
-
-    #show-details {
-      text-transform: uppercase;
-      cursor: pointer;
+    #sort-selector-container {
+      flex: 1;
       display: flex;
+      justify-content: flex-start;
+      align-items: center;
     }
 
-    #show-details input {
-      margin-right: 0.5rem;
-      flex: 0 0 12px;
-    }
-
-    #sort-descending-btn {
-      transform: rotate(180deg);
-    }
-
-    #sort-direction-selector {
+    #desktop-sort-container,
+    #mobile-sort-container {
       display: flex;
-      flex-direction: column;
-      gap: 3px;
-      margin-right: 1rem;
-    }
-
-    #sort-selector-container {
-      flex: 1;
+      justify-content: flex-start;
+      align-items: center;
     }
 
     /*
       we move the desktop sort selector offscreen instead of display: none
       because we need to observe the width of it vs its container to determine
-      if it's wide enough to display the desktop version and if you displY: none,
+      if it's wide enough to display the desktop version and if you display: none,
       the width becomes 0
     */
-    #desktop-sort-selector.hidden {
+    #desktop-sort-container.hidden {
       position: absolute;
       top: -9999px;
       left: -9999px;
+      visibility: hidden;
     }
 
-    #mobile-sort-selector.hidden {
+    #mobile-sort-container.hidden {
       display: none;
     }
 
-    #date-sort-selector-backdrop,
-    #view-sort-selector-backdrop {
+    #sort-selector-backdrop {
       position: fixed;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
+      width: 100vw;
+      height: 100vh;
       z-index: 1;
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: transparent;
     }
 
     #desktop-sort-selector {
@@ -693,34 +764,21 @@ SortFilterBar.styles = css `
     #desktop-sort-selector li {
       display: flex;
       align-items: center;
+      padding-left: 5px;
+      padding-right: 5px;
     }
 
     #desktop-sort-selector li a {
+      padding: 0 5px;
       text-decoration: none;
-      text-transform: uppercase;
-      font-size: 1.4rem;
       color: #333;
-      line-height: 2.5;
+      line-height: 2;
     }
 
     #desktop-sort-selector li a.selected {
       font-weight: bold;
     }
 
-    #desktop-sort-selector li::after {
-      content: '•';
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    #desktop-sort-selector li:first-child::after {
-      content: '';
-    }
-
-    #desktop-sort-selector li:last-child::after {
-      content: '';
-    }
-
     #display-style-selector {
       flex: 0;
     }
@@ -732,68 +790,104 @@ SortFilterBar.styles = css `
       appearance: none;
       cursor: pointer;
       -webkit-appearance: none;
-      opacity: 0.5;
+      fill: #bbbbbb;
     }
 
     #display-style-selector button.active {
-      opacity: 1;
+      fill: var(--ia-theme-primary-text-color, #2c2c2c);
     }
 
     #display-style-selector button svg {
       width: 24px;
       height: 24px;
     }
-  `;
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "displayMode", 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: Object })
-], SortFilterBar.prototype, "prefixFilterCountMap", void 0);
-__decorate([
-    property({ type: Object })
-], SortFilterBar.prototype, "resizeObserver", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "alphaSelectorVisible", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "dateSortSelectorVisible", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "viewSortSelectorVisible", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "desktopSelectorBarWidth", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "selectorBarContainerWidth", void 0);
-__decorate([
-    state()
-], SortFilterBar.prototype, "hoveringOverDateSortOptions", void 0);
-__decorate([
-    query('#desktop-sort-selector')
-], SortFilterBar.prototype, "desktopSortSelector", void 0);
-__decorate([
-    query('#sort-selector-container')
-], SortFilterBar.prototype, "sortSelectorContainer", void 0);
-SortFilterBar = __decorate([
-    customElement('sort-filter-bar')
-], SortFilterBar);
-export { SortFilterBar };
+
+    ia-dropdown {
+      --dropdownTextColor: white;
+      --dropdownOffsetTop: 0;
+      --dropdownBorderTopWidth: 0;
+      --dropdownBorderTopLeftRadius: 0;
+      --dropdownBorderTopRightRadius: 0;
+      --dropdownWhiteSpace: nowrap;
+      --dropdownListZIndex: 2;
+      --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
+      --dropdownSelectedTextColor: white;
+      --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
+      --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
+      --caretHeight: 9px;
+      --caretWidth: 12px;
+      --caretPadding: 0 5px 0 0;
+    }
+    ia-dropdown.selected .dropdown-label {
+      font-weight: bold;
+    }
+    ia-dropdown.open {
+      z-index: 2;
+    }
+
+    .dropdown-label {
+      display: inline-block;
+      height: 100%;
+      padding-left: 5px;
+      font-size: 1.4rem;
+      line-height: 2;
+      color: var(--ia-theme-primary-text-color, #2c2c2c);
+      white-space: nowrap;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "displayMode", 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: Object })
+], SortFilterBar.prototype, "prefixFilterCountMap", void 0);
+__decorate([
+    property({ type: Object })
+], SortFilterBar.prototype, "resizeObserver", 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