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

package/dist/src/sort-filter-bar/sort-filter-bar.d.ts

@@ -1,108 +1,189 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
-import { CollectionDisplayMode, PrefixFilterCounts, PrefixFilterType, SortField } from '../models';
-import './alpha-bar';
-declare type AlphaSelector = 'creator' | 'title';
-export declare class SortFilterBar extends LitElement implements SharedResizeObserverResizeHandlerInterface {
-    displayMode?: CollectionDisplayMode;
-    sortDirection: 'asc' | 'desc' | null;
-    selectedSort: SortField;
-    selectedTitleFilter: string | null;
-    selectedCreatorFilter: string | null;
-    showRelevance: boolean;
-    prefixFilterCountMap?: Record<PrefixFilterType, PrefixFilterCounts>;
-    resizeObserver?: SharedResizeObserverInterface;
-    alphaSelectorVisible: AlphaSelector | null;
-    dateSortSelectorVisible: boolean;
-    viewSortSelectorVisible: boolean;
-    desktopSelectorBarWidth: number;
-    selectorBarContainerWidth: number;
-    hoveringOverDateSortOptions: boolean;
-    private desktopSortSelector;
-    private sortSelectorContainer;
-    render(): TemplateResult<1>;
-    updated(changed: PropertyValues): void;
-    private setupEscapeListeners;
-    private boundSortBarSelectorEscapeListener;
-    disconnectedCallback(): void;
-    private disconnectResizeObserver;
-    private setupResizeObserver;
-    private get mobileSelectorVisible();
-    private get alphaBarTemplate();
-    handleResize(entry: ResizeObserverEntry): void;
-    private get sortDirectionSelectorTemplate();
-    private get desktopSortSelectorTemplate();
-    /**
-     * 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
-     */
-    private getSortDisplayOption;
-    private get mobileSortSelectorTemplate();
-    private mobileSortChanged;
-    private get displayOptionTemplate();
-    private get dateSortSelector();
-    private get viewSortSelector();
-    private getDateSortButton;
-    private selectDateSort;
-    private setSortDirections;
-    private setSelectedSort;
-    /**
-     * There are four date sort options.
-     *
-     * This checks to see if the current sort is one of them.
-     *
-     * @readonly
-     * @private
-     * @type {boolean}
-     * @memberof SortFilterBar
-     */
-    private get dateOptionSelected();
-    /**
-     * There are two view sort options.
-     *
-     * This checks to see if the current sort is one of them.
-     *
-     * @readonly
-     * @private
-     * @type {boolean}
-     * @memberof SortFilterBar
-     */
-    private get viewOptionSelected();
-    /**
-     * The display name of the current date field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    private get dateSortField();
-    /**
-     * The display name of the current view field
-     *
-     * @readonly
-     * @private
-     * @type {string}
-     * @memberof SortFilterBar
-     */
-    private get viewSortField();
-    private get titleSelectorBar();
-    private get creatorSelectorBar();
-    private titleLetterChanged;
-    private creatorLetterChanged;
-    private emitTitleLetterChangedEvent;
-    private emitCreatorLetterChangedEvent;
-    private displayModeChanged;
-    private emitSortChangedEvent;
-    static styles: import("lit").CSSResult;
-}
-export {};
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
+import '@internetarchive/ia-dropdown';
+import { CollectionDisplayMode, PrefixFilterCounts, PrefixFilterType, SortField } from '../models';
+import './alpha-bar';
+declare type AlphaSelector = 'creator' | 'title';
+export declare class SortFilterBar extends LitElement implements SharedResizeObserverResizeHandlerInterface {
+    /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */
+    displayMode?: CollectionDisplayMode;
+    /** The current sort direction (asc/desc), or null if none is set */
+    sortDirection: 'asc' | 'desc' | null;
+    /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
+    selectedSort: SortField;
+    /** The currently selected title letter filter, or null if none is set */
+    selectedTitleFilter: string | null;
+    /** The currently selected creator letter filter, or null if none is set */
+    selectedCreatorFilter: string | null;
+    /** Whether to show the Relevance sort option (default `true`) */
+    showRelevance: boolean;
+    /** Maps of result counts for letters on the alphabet bar, for each letter filter type */
+    prefixFilterCountMap?: Record<PrefixFilterType, PrefixFilterCounts>;
+    resizeObserver?: SharedResizeObserverInterface;
+    /**
+     * Which of the alphabet bars (title/creator) should be shown, or null if one
+     * should not currently be rendered.
+     */
+    alphaSelectorVisible: AlphaSelector | null;
+    /**
+     * Whether the transparent backdrop to catch clicks outside the dropdown menu
+     * should be rendered.
+     */
+    dropdownBackdropVisible: boolean;
+    /**
+     * The width of the desktop view sort option container, updated upon each resize.
+     * Used for dynamically determining whether to use desktop or mobile view.
+     */
+    desktopSortContainerWidth: number;
+    /**
+     * The width of the full sort bar, updated upon each resize.
+     * Used for dynamically determining whether to use desktop or mobile view.
+     */
+    selectorBarContainerWidth: number;
+    /**
+     * The container for all the desktop view's sort options.
+     * Used for dynamically determining whether to use desktop or mobile view.
+     */
+    private desktopSortContainer;
+    /**
+     * The container for the full sort bar.
+     * Used for dynamically determining whether to use desktop or mobile view.
+     */
+    private sortSelectorContainer;
+    /** The dropdown component containing options for weekly and all-time views */
+    private viewsDropdown;
+    /** The dropdown component containing the four date options */
+    private dateDropdown;
+    /** The single, consolidated dropdown component shown in mobile view */
+    private mobileDropdown;
+    render(): TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    private setupEscapeListeners;
+    private boundSortBarSelectorEscapeListener;
+    disconnectedCallback(): void;
+    private disconnectResizeObserver;
+    private setupResizeObserver;
+    handleResize(entry: ResizeObserverEntry): void;
+    /**
+     * Whether to show the mobile sort bar because there is not enough space
+     * for the desktop sort bar.
+     */
+    private get mobileSelectorVisible();
+    /**
+     * Template to render the alphabet bar, or `nothing` if it should not be rendered
+     * for the current sort
+     */
+    private get alphaBarTemplate();
+    /** Template to render the sort direction toggle button */
+    private get sortDirectionSelectorTemplate();
+    /** Template to render the sort direction button's icon in the correct current state */
+    private get sortDirectionIcon();
+    /** The template to render all the sort options in desktop view */
+    private get desktopSortSelectorTemplate();
+    /** The template to render all the sort options in mobile view */
+    private get mobileSortSelectorTemplate();
+    /**
+     * 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
+     */
+    private getSortDisplayOption;
+    /**
+     * 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
+     */
+    private getSortDropdown;
+    /** Generates a single dropdown option object for the given sort field */
+    private getDropdownOption;
+    /** Handler for when any sort dropdown option is selected */
+    private dropdownOptionSelected;
+    /** The template to render for the views dropdown */
+    private get viewsDropdownTemplate();
+    /** The template to render for the date dropdown */
+    private get dateDropdownTemplate();
+    /** Handler for when a new mobile sort dropdown option is selected */
+    private mobileSortChanged;
+    /** Template for rendering the three display mode options */
+    private get displayOptionTemplate();
+    /**
+     * Template for rendering the transparent backdrop to capture clicks outside the
+     * dropdown menu while it is open.
+     */
+    private get dropdownBackdrop();
+    /** Closes all of the sorting dropdown components' menus */
+    private closeDropdowns;
+    private selectDropdownSortField;
+    private clearAlphaBarFilters;
+    private setSortDirection;
+    /** Toggles the current sort direction between 'asc' and 'desc' */
+    private toggleSortDirection;
+    private setSelectedSort;
+    /**
+     * There are four date sort options.
+     *
+     * This checks to see if the current sort is one of them.
+     *
+     * @readonly
+     * @private
+     * @type {boolean}
+     * @memberof SortFilterBar
+     */
+    private get dateOptionSelected();
+    /**
+     * There are two view sort options.
+     *
+     * This checks to see if the current sort is one of them.
+     *
+     * @readonly
+     * @private
+     * @type {boolean}
+     * @memberof SortFilterBar
+     */
+    private get viewOptionSelected();
+    /**
+     * The display name of the current date field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    private get dateSortField();
+    /**
+     * The display name of the current view field
+     *
+     * @readonly
+     * @private
+     * @type {string}
+     * @memberof SortFilterBar
+     */
+    private get viewSortField();
+    private get titleSelectorBar();
+    private get creatorSelectorBar();
+    private titleLetterChanged;
+    private creatorLetterChanged;
+    private emitTitleLetterChangedEvent;
+    private emitCreatorLetterChangedEvent;
+    private displayModeChanged;
+    private emitSortChangedEvent;
+    static styles: import("lit").CSSResult;
+}
+export {};