@internetarchive/collection-browser 4.0.2 → 4.1.0-alpha-webdev8186.0

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

@@ -2,9 +2,7 @@ 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 { ALL_DATE_SORT_FIELDS, ALL_VIEWS_SORT_FIELDS, defaultSortAvailability, SORT_OPTIONS, SortField, } from '../models';
-import './alpha-bar';
+import { defaultSortAvailability, SORT_OPTIONS, SortField, } from '../models';
 import { sortUpIcon } from './img/sort-toggle-up';
 import { sortDownIcon } from './img/sort-toggle-down';
 import { sortDisabledIcon } from './img/sort-toggle-disabled';
@@ -12,6 +10,8 @@ import { tileIcon } from './img/tile';
 import { listIcon } from './img/list';
 import { compactIcon } from './img/compact';
 import { srOnlyStyle } from '../styles/sr-only';
+import '@internetarchive/ia-dropdown';
+import './alpha-bar';
 let SortFilterBar = class SortFilterBar extends LitElement {
     constructor() {
         super(...arguments);
@@ -19,10 +19,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         this.defaultSortDirection = null;
         /** The default sort field to use if none is set */
         this.defaultSortField = SortField.relevance;
-        /** Which view sort option to expose by default. */
-        this.defaultViewSort = SortField.weeklyview;
-        /** Which date sort option to expose by default */
-        this.defaultDateSort = SortField.date;
         /** 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. */
@@ -49,14 +45,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         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 = this.defaultViewSort;
-        /**
-         * The Date sort option that was most recently selected (or the default, if none has been selected yet)
-         */
-        this.lastSelectedDateSort = this.defaultDateSort;
         /**
          * Which of the alphabet bars (title/creator) should be shown, or null if one
          * should not currently be rendered.
@@ -67,19 +55,9 @@ let SortFilterBar = class SortFilterBar extends LitElement {
          * 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();
+                this.closeDropdown();
             }
         };
     }
@@ -96,8 +74,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                   </div>
                   <span class="sort-by-text">${msg('Sort by:')}</span>
                   <div id="sort-selector-container">
-                    ${this.mobileSortSelectorTemplate}
-                    ${this.desktopSortSelectorTemplate}
+                    ${this.sortSelectorTemplate}
                   </div>
                 `
             : html `<slot name="sort-options"></slot>`}
@@ -126,19 +103,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                 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 defaulted, update the default selections
-        if (changed.has('defaultViewSort')) {
-            this.lastSelectedViewSort = this.defaultViewSort;
-        }
-        if (changed.has('defaultDateSort')) {
-            this.lastSelectedDateSort = this.defaultDateSort;
         }
     }
     updated(changed) {
@@ -154,12 +118,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         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) {
@@ -169,60 +127,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             document.removeEventListener('keydown', this.boundSortBarSelectorEscapeListener);
         }
     }
-    connectedCallback() {
-        super.connectedCallback?.();
-        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
@@ -271,77 +175,26 @@ let SortFilterBar = class SortFilterBar extends LitElement {
       </div>
     `;
     }
-    /** 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">
-          <li>${this.relevanceSortSelectorTemplate}</li>
-          <li>${this.allViewsSortOptionsTemplate}</li>
-          <li>${this.titleSortSelectorTemplate}</li>
-          <li>${this.allDateSortOptionsTemplate}</li>
-          <li>${this.creatorSortSelectorTemplate}</li>
-        </ul>
-      </div>
-    `;
-    }
-    /** The template to render all the sort options in mobile view */
-    get mobileSortSelectorTemplate() {
+    /** The template to render all the sort options in a single dropdown */
+    get sortSelectorTemplate() {
         const displayedOptions = Object.values(SORT_OPTIONS).filter(opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field]);
         return html `
-      <div
-        id="mobile-sort-container"
-        class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
-      >
+      <div id="sort-dropdown-container">
         ${this.getSortDropdown({
             displayName: SORT_OPTIONS[this.finalizedSortField].displayName,
-            id: 'mobile-dropdown',
+            id: 'sort-dropdown',
             selected: true,
             dropdownOptions: displayedOptions.map(opt => this.getDropdownOption(opt.field)),
             selectedOption: this.finalizedSortField,
-            onOptionSelected: this.mobileSortChanged,
+            onOptionSelected: this.sortOptionSelected,
             onDropdownClick: () => {
-                this.dropdownBackdropVisible = this.mobileDropdown.open;
-                this.mobileDropdown.classList.toggle('open', this.mobileDropdown.open);
+                this.dropdownBackdropVisible = this.sortOptionsDropdown.open;
+                this.sortOptionsDropdown.classList.toggle('open', this.sortOptionsDropdown.open);
             },
         })}
       </div>
     `;
     }
-    /**
-     * This generates each of the non-dropdown sort option buttons.
-     *
-     * It manages the display value and the selected state of the option.
-     *
-     * @param sortField Which sort field the button represents
-     * @param options Additional options:
-     *   - `onSelected?: (e: Event) => void;` If this is provided, it will also be called when the option is selected.
-     *     Default is to clear any selected alphabetical filters.
-     */
-    getSortSelectorButton(sortField, options) {
-        const isSelected = this.finalizedSortField === sortField;
-        const displayName = SORT_OPTIONS[sortField].displayName;
-        const onSelected = options?.onSelected ?? (() => this.clearAlphaBarFilters());
-        return html `
-      <button
-        class=${isSelected ? 'selected' : ''}
-        data-title=${displayName}
-        @click=${(e) => {
-            e.preventDefault();
-            this.dropdownBackdropVisible = false;
-            if (this.finalizedSortField !== sortField) {
-                onSelected?.(e);
-                this.setSelectedSort(sortField);
-            }
-        }}
-      >
-        ${displayName}
-      </button>
-    `;
-    }
     /**
      * Generates a dropdown component containing multiple grouped sort options.
      *
@@ -353,8 +206,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      *  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) {
         return html `
@@ -374,14 +225,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           class="dropdown-label"
           slot="dropdown-label"
           data-title=${options.displayName}
-          @click=${options.onLabelInteraction ?? nothing}
-          @keydown=${options.onLabelInteraction
-            ? (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    options.onLabelInteraction?.(e);
-                }
-            }
-            : nothing}
         >
           ${options.displayName}
         </span>
@@ -402,171 +245,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
       `,
         };
     }
-    /** 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;
-        }
-    }
-    //
-    // SORT OPTION TEMPLATES
-    //
-    /**
-     * Template for the Relevance sort selector button, or `nothing` if the relevance
-     * field is not available for display.
-     */
-    get relevanceSortSelectorTemplate() {
-        if (!this.sortFieldAvailability.relevance)
-            return nothing;
-        return this.getSortSelectorButton(SortField.relevance);
-    }
-    /**
-     * Template for the Views sort selector button.
-     * This is shown instead of the views dropdown when only a single views sort field
-     * is available.
-     */
-    get viewsSortSelectorTemplate() {
-        const { availableViewsFields } = this;
-        if (availableViewsFields.length < 1)
-            return nothing;
-        return this.getSortSelectorButton(availableViewsFields[0]);
-    }
-    /**
-     * Template for the Title sort selector button, or `nothing` if the title field is
-     * not available for display.
-     */
-    get titleSortSelectorTemplate() {
-        if (!this.sortFieldAvailability.title)
-            return nothing;
-        return this.getSortSelectorButton(SortField.title, {
-            onSelected: () => {
-                this.alphaSelectorVisible = 'title';
-                this.selectedCreatorFilter = null;
-                this.emitCreatorLetterChangedEvent();
-            },
-        });
-    }
-    /**
-     * Template for the Date sort selector button.
-     * This is shown instead of the dates dropdown when only a single date sort field
-     * is available.
-     */
-    get dateSortSelectorTemplate() {
-        const { availableDateFields } = this;
-        if (availableDateFields.length < 1)
-            return nothing;
-        return this.getSortSelectorButton(availableDateFields[0]);
-    }
-    /**
-     * Template for the Creator sort selector button, or `nothing` if the creator field
-     * is not available for display.
-     */
-    get creatorSortSelectorTemplate() {
-        if (!this.sortFieldAvailability.creator)
-            return nothing;
-        return this.getSortSelectorButton(SortField.creator, {
-            onSelected: () => {
-                this.alphaSelectorVisible = 'creator';
-                this.selectedTitleFilter = null;
-                this.emitTitleLetterChangedEvent();
-            },
-        });
-    }
-    /**
-     * Template for the Views dropdown, shown when 2+ views sort fields are available.
-     */
-    get viewsDropdownTemplate() {
-        const displayedOptions = ALL_VIEWS_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]).map(field => this.getDropdownOption(field));
-        return this.getSortDropdown({
-            displayName: this.viewSortDisplayName,
-            id: 'views-dropdown',
-            selected: this.viewOptionSelected,
-            dropdownOptions: displayedOptions,
-            selectedOption: this.viewOptionSelected ? this.finalizedSortField : '',
-            onOptionSelected: this.dropdownOptionSelected,
-            onDropdownClick: () => {
-                if (this.dateDropdown)
-                    this.dateDropdown.open = false;
-                const viewsDropdown = this.viewsDropdown;
-                this.dropdownBackdropVisible = viewsDropdown.open;
-                viewsDropdown.classList.toggle('open', viewsDropdown.open);
-            },
-            onLabelInteraction: (e) => {
-                if (!this.viewsDropdown?.open && !this.viewOptionSelected) {
-                    e.stopPropagation();
-                    this.clearAlphaBarFilters();
-                    this.setSelectedSort(this.lastSelectedViewSort);
-                }
-            },
-        });
-    }
-    /**
-     * Template for the Date dropdown, shown when 2+ date sort fields are available.
-     */
-    get dateDropdownTemplate() {
-        const displayedOptions = ALL_DATE_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]).map(field => this.getDropdownOption(field));
-        return this.getSortDropdown({
-            displayName: this.dateSortDisplayName,
-            id: 'date-dropdown',
-            selected: this.dateOptionSelected,
-            dropdownOptions: displayedOptions,
-            selectedOption: this.dateOptionSelected ? this.finalizedSortField : '',
-            onOptionSelected: this.dropdownOptionSelected,
-            onDropdownClick: () => {
-                if (this.viewsDropdown)
-                    this.viewsDropdown.open = false;
-                const dateDropdown = this.dateDropdown;
-                this.dropdownBackdropVisible = dateDropdown.open;
-                dateDropdown.classList.toggle('open', dateDropdown.open);
-            },
-            onLabelInteraction: (e) => {
-                if (!this.dateDropdown?.open && !this.dateOptionSelected) {
-                    e.stopPropagation();
-                    this.clearAlphaBarFilters();
-                    this.setSelectedSort(this.lastSelectedDateSort);
-                }
-            },
-        });
-    }
-    /**
-     * Provides the appropriate template to use for Views sorting, depending on how many
-     * views sort fields are available.
-     */
-    get allViewsSortOptionsTemplate() {
-        const numViewsSortOptions = this.availableViewsFields.length;
-        switch (numViewsSortOptions) {
-            case 0:
-                return nothing;
-            case 1:
-                return this.viewsSortSelectorTemplate;
-            default:
-                return this.viewsDropdownTemplate;
-        }
-    }
-    /**
-     * Provides the appropriate template to use for Date sorting, depending on how many
-     * date sort fields are available.
-     */
-    get allDateSortOptionsTemplate() {
-        const numDateSortOptions = this.availableDateFields.length;
-        switch (numDateSortOptions) {
-            case 0:
-                return nothing;
-            case 1:
-                return this.dateSortSelectorTemplate;
-            default:
-                return this.dateDropdownTemplate;
-        }
-    }
-    /** Handler for when a new mobile sort dropdown option is selected */
-    mobileSortChanged(e) {
+    /** Handler for when a new sort dropdown option is selected */
+    sortOptionSelected(e) {
         this.dropdownBackdropVisible = false;
         const sortField = e.detail.option.id;
         this.setSelectedSort(sortField);
@@ -635,38 +315,24 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         return html `
       <div
         id="sort-selector-backdrop"
-        @keyup=${this.closeDropdowns}
-        @click=${this.closeDropdowns}
+        @keyup=${this.closeDropdown}
+        @click=${this.closeDropdown}
       ></div>
     `;
     }
-    /** Closes all of the sorting dropdown components' menus */
-    closeDropdowns() {
+    /** Closes the sorting dropdown component's menus */
+    closeDropdown() {
         this.dropdownBackdropVisible = false;
-        const allDropdowns = [
-            this.viewsDropdown,
-            this.dateDropdown,
-            this.mobileDropdown,
-        ];
-        for (const dropdown of allDropdowns) {
-            if (!dropdown)
-                continue;
-            dropdown.open = false;
-            dropdown.classList.remove('open');
-        }
+        if (!this.sortOptionsDropdown)
+            return;
+        this.sortOptionsDropdown.open = false;
+        this.sortOptionsDropdown.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();
@@ -710,77 +376,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     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 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;
-    }
-    /**
-     * Array of all the views sorts that should be shown
-     */
-    get availableViewsFields() {
-        return ALL_VIEWS_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]);
-    }
-    /**
-     * Array of all the date sorts that should be shown
-     */
-    get availableDateFields() {
-        return ALL_DATE_SORT_FIELDS.filter(field => this.sortFieldAvailability[field]);
-    }
     get titleSelectorBar() {
         return html ` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
@@ -844,6 +439,7 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           display: flex;
           justify-content: flex-start;
           align-items: center;
+          padding-bottom: 1px;
           border-bottom: 1px solid #2c2c2c;
           font-size: 1.4rem;
         }
@@ -880,10 +476,16 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         }
 
         .sort-direction-selector {
-          padding: 0;
-          border: none;
+          display: flex;
+          justify-content: center;
+          width: 30px;
+          margin: 0 5px 0 3px;
+          padding: 7px 8px;
+          max-height: fit-content;
+          border-radius: 5px;
+          background: white;
+          border: 1px solid rgb(25, 72, 128);
           appearance: none;
-          background: transparent;
           cursor: pointer;
         }
 
@@ -899,27 +501,14 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           border: none;
           padding: 0;
           outline: inherit;
-          width: 14px;
-          height: 14px;
+          width: 12px;
+          height: 12px;
         }
 
         .sort-direction-icon > svg {
           flex: 1;
         }
 
-        #date-sort-selector,
-        #view-sort-selector {
-          position: absolute;
-          left: 150px;
-          top: 45px;
-
-          z-index: 1;
-          padding: 1rem;
-          background-color: white;
-          border-radius: 2.5rem;
-          border: 1px solid #404142;
-        }
-
         #sort-selector-container {
           flex: 1;
           display: flex;
@@ -927,30 +516,12 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           align-items: center;
         }
 
-        #desktop-sort-container,
-        #mobile-sort-container {
+        #sort-dropdown-container {
           display: flex;
           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 display: none,
-          the width becomes 0
-        */
-        #desktop-sort-container.hidden {
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-          visibility: hidden;
-        }
-
-        #mobile-sort-container.hidden {
-          display: none;
-        }
-
         #sort-selector-backdrop {
           position: fixed;
           top: 0;
@@ -961,53 +532,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
           background-color: transparent;
         }
 
-        #desktop-sort-selector {
-          display: inline-flex;
-        }
-
-        #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;
-          color: #333;
-          line-height: 2;
-        }
-
-        #desktop-sort-selector li button {
-          padding: 0px 5px;
-          border: none;
-          background: none;
-          font-family: inherit;
-          font-size: inherit;
-          color: #333;
-          line-height: 2;
-          cursor: pointer;
-          appearance: none;
-        }
-
-        #desktop-sort-selector li button.selected {
-          font-weight: bold;
-        }
-
-        /**
-         * Fix to not shift the sort-bar options when get selected
-         */
-        #desktop-sort-selector li button::before,
-        #desktop-sort-selector .dropdown-label::before {
-          display: block;
-          content: attr(data-title);
-          font-weight: bold;
-          height: 0;
-          overflow: hidden;
-          visibility: hidden;
-        }
-
         #display-style-selector {
           flex: 0;
         }
@@ -1078,12 +602,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "defaultSortField", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "defaultViewSort", void 0);
-__decorate([
-    property({ type: String })
-], SortFilterBar.prototype, "defaultDateSort", void 0);
 __decorate([
     property({ type: String })
 ], SortFilterBar.prototype, "sortDirection", void 0);
@@ -1108,15 +626,6 @@ __decorate([
 __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);
@@ -1124,26 +633,8 @@ __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);
+    query('#sort-dropdown')
+], SortFilterBar.prototype, "sortOptionsDropdown", void 0);
 SortFilterBar = __decorate([
     customElement('sort-filter-bar')
 ], SortFilterBar);