@internetarchive/collection-browser 3.3.2 → 3.3.4-alpha-webdev7761.0

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

@@ -0,0 +1,1161 @@
+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 { 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;
+        /** 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. */
+        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;
+        /**
+         * Map defining which sortable fields should be included on the sort bar.
+         *
+         * E.g.,
+         * ```
+         * {
+         *   [SortField.relevance]: true,
+         *   [SortField.date]: false,
+         *   [SortField.title]: true,
+         *   ...
+         * }
+         * ```
+         */
+        this.sortFieldAvailability = defaultSortAvailability;
+        /** 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 = 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.
+         */
+        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
+            ? html `
+                  <div class="sort-direction-container">
+                    ${this.sortDirectionSelectorTemplate}
+                  </div>
+                  <span class="sort-by-text">${msg('Sort by:')}</span>
+                  <div id="sort-selector-container">
+                    ${this.mobileSortSelectorTemplate}
+                    ${this.desktopSortSelectorTemplate}
+                  </div>
+                `
+            : html `<slot name="sort-options"></slot>`}
+          </div>
+          <slot name="sort-options-right"></slot>
+
+          ${this.suppressDisplayModes
+            ? nothing
+            : html `<div id="display-style-selector">
+                ${this.displayOptionTemplate}
+              </div>`}
+        </section>
+
+        ${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 defaulted, update the default selections
+        if (changed.has('defaultViewSort')) {
+            this.lastSelectedViewSort = this.defaultViewSort;
+        }
+        if (changed.has('defaultDateSort')) {
+            this.lastSelectedDateSort = this.defaultDateSort;
+        }
+    }
+    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"
+        ?disabled=${!this.canChangeSortDirection}
+        @click=${this.handleSortDirectionClicked}
+      >
+        <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
+        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() {
+        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() {
+        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'}
+      >
+        ${this.getSortDropdown({
+            displayName: 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 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) {
+        var _a;
+        const isSelected = this.finalizedSortField === sortField;
+        const displayName = SORT_OPTIONS[sortField].displayName;
+        const onSelected = (_a = options === null || options === void 0 ? void 0 : options.onSelected) !== null && _a !== void 0 ? _a : (() => this.clearAlphaBarFilters());
+        return html `
+      <button
+        class=${isSelected ? 'selected' : ''}
+        data-title=${displayName}
+        @click=${(e) => {
+            e.preventDefault();
+            this.dropdownBackdropVisible = false;
+            if (this.finalizedSortField !== sortField) {
+                onSelected === null || onSelected === void 0 ? void 0 : onSelected(e);
+                this.setSelectedSort(sortField);
+            }
+        }}
+      >
+        ${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;
+        return html `
+      <ia-dropdown
+        id=${options.id}
+        class=${options.selected ? 'selected' : ''}
+        displayCaret
+        closeOnSelect
+        includeSelectedOption
+        .openViaButton=${options.selected}
+        .options=${options.dropdownOptions}
+        .selectedOption=${(_a = options.selectedOption) !== null && _a !== void 0 ? _a : ''}
+        @optionSelected=${(_b = options.onOptionSelected) !== null && _b !== void 0 ? _b : nothing}
+        @click=${(_c = options.onDropdownClick) !== null && _c !== void 0 ? _c : nothing}
+      >
+        <span
+          class="dropdown-label"
+          slot="dropdown-label"
+          data-title=${options.displayName}
+          @click=${(_d = options.onLabelInteraction) !== null && _d !== void 0 ? _d : 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);
+                }
+            }
+            : 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">
+          ${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;
+        }
+    }
+    //
+    // 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) => {
+                var _a;
+                if (!((_a = this.viewsDropdown) === null || _a === void 0 ? void 0 : _a.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) => {
+                var _a;
+                if (!((_a = this.dateDropdown) === null || _a === void 0 ? void 0 : _a.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) {
+        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 */
+    /** Added data-testid for Playwright testing * */
+    get displayOptionTemplate() {
+        return html `
+      <ul>
+        <li>
+          <button
+            id="grid-button"
+            @click=${() => {
+            this.displayMode = 'grid';
+        }}
+            class=${this.displayMode === 'grid' ? 'active' : ''}
+            title="Tile view"
+            data-testid="grid-button"
+          >
+            ${tileIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-detail-button"
+            @click=${() => {
+            this.displayMode = 'list-detail';
+        }}
+            class=${this.displayMode === 'list-detail' ? 'active' : ''}
+            title="List view"
+            data-testid="list-detail-button"
+          >
+            ${listIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-compact-button"
+            @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() {
+        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) {
+            if (!dropdown)
+                continue;
+            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 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() {
+        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;
+        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,
+            css `
+        #container {
+          position: relative;
+        }
+
+        #sort-bar {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          border-bottom: 1px solid #2c2c2c;
+          font-size: 1.4rem;
+        }
+
+        #sort-options {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        ul {
+          list-style: none;
+          display: flex;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+        }
+
+        li {
+          padding: 0;
+        }
+
+        .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;
+        }
+
+        .sort-direction-selector:disabled {
+          cursor: default;
+        }
+
+        .sort-direction-icon {
+          display: flex;
+          align-items: center;
+          background: none;
+          color: inherit;
+          border: none;
+          padding: 0;
+          outline: inherit;
+          width: 14px;
+          height: 14px;
+        }
+
+        .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;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        #desktop-sort-container,
+        #mobile-sort-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;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 1;
+          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;
+        }
+
+        #display-style-selector button {
+          background: none;
+          color: inherit;
+          border: none;
+          appearance: none;
+          cursor: pointer;
+          -webkit-appearance: none;
+          fill: #bbbbbb;
+        }
+
+        #display-style-selector button.active {
+          fill: var(--ia-theme-primary-text-color, #2c2c2c);
+        }
+
+        #display-style-selector button svg {
+          width: 24px;
+          height: 24px;
+        }
+
+        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;
+          font-family: var(--ia-theme-base-font-family);
+          line-height: 2;
+          color: var(--ia-theme-primary-text-color, #2c2c2c);
+          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, "defaultViewSort", void 0);
+__decorate([
+    property({ type: String })
+], SortFilterBar.prototype, "defaultDateSort", 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: Object })
+], SortFilterBar.prototype, "sortFieldAvailability", 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