@internetarchive/collection-browser 4.7.0 → 4.8.0

package/dist/src/collection-facets/more-facets-content.js

@@ -1,24 +1,28 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { when } from 'lit/directives/when.js';
 import { SearchType, AggregationSortType, } from '@internetarchive/search-service';
-import { msg } from '@lit/localize';
-import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, tvMoreFacetSort, } from '../models';
+import { msg, str } from '@lit/localize';
+import { facetTitles, facetPluralTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, tvMoreFacetSort, } from '../models';
 import '@internetarchive/elements/ia-status-indicator/ia-status-indicator';
-import './more-facets-pagination';
-import './facets-template';
+import '@internetarchive/ia-clearable-text-input';
+import './more-facets-scroller';
 import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
 import './toggle-switch';
 import { srOnlyStyle } from '../styles/sr-only';
-import { mergeSelectedFacets, sortBucketsBySelectionState, updateSelectedFacetBucket, } from '../utils/facet-utils';
-import { MORE_FACETS__DEFAULT_PAGE_SIZE, MORE_FACETS__MAX_AGGREGATIONS, } from './models';
+import checkIcon from '../assets/img/icons/check';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import closeCircleDark from '../assets/img/icons/close-circle-dark';
+import { mergeSelectedFacets, updateSelectedFacetBucket, } from '../utils/facet-utils';
+import { filterTextIncludes, normalizeFilterText, } from '../utils/normalize-filter-text';
+import { log } from '../utils/log';
+import { MORE_FACETS__MAX_AGGREGATIONS } from './models';
 let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     constructor() {
         super(...arguments);
-        /**
-         * Maximum number of facets to show per page within the modal.
-         */
-        this.facetsPerPage = MORE_FACETS__DEFAULT_PAGE_SIZE;
         /**
          * Whether we are waiting for facet data to load.
          * We begin with this set to true so that we show an initial loading indicator.
@@ -34,19 +38,53 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
          */
         this.unappliedFacetChanges = getDefaultSelectedFacets();
         /**
-         * Which page of facets we are showing.
+         * Text the patron has entered to narrow down the facet values shown.
+         */
+        this.filterText = '';
+        /**
+         * Whether the search for this facet's values failed, either with an error
+         * result or by throwing.
+         */
+        this.loadFailed = false;
+        /**
+         * The buckets from `facetGroup` that match `filterText`, in display order.
+         * Derived in `willUpdate`.
+         */
+        this.filteredBuckets = [];
+        /**
+         * Each bucket's display text in the normalized form that filtering compares
+         * against, keyed by bucket key. Filled lazily so that each value is only
+         * normalized once, however many times the filter text changes.
+         */
+        this.filterKeys = new Map();
+        /**
+         * The values currently selected or hidden, in the order they were selected.
+         * Shown as chiclets above the list. Derived in `willUpdate`.
+         */
+        this.chosenBuckets = [];
+        /**
+         * Close more facets modal on Escape click
          */
-        this.pageNumber = 1;
+        this.escapeHandler = (e) => {
+            if (e.key === 'Escape')
+                this.modalManager?.closeModal();
+        };
     }
     willUpdate(changed) {
-        if (changed.has('aggregations') ||
-            changed.has('facetsPerPage') ||
+        if (changed.has('aggregations')) {
+            this.filterKeys.clear();
+        }
+        const facetGroupChanged = changed.has('aggregations') ||
             changed.has('sortedBy') ||
             changed.has('selectedFacets') ||
-            changed.has('unappliedFacetChanges')) {
-            // Convert the merged selected facets & aggregations into a facet group, and
-            // store it for reuse across pages.
+            changed.has('unappliedFacetChanges');
+        if (facetGroupChanged) {
+            // Convert the merged selected facets & aggregations into a facet group
             this.facetGroup = this.mergedFacets;
+            this.chosenBuckets = this.listChosenBuckets();
+        }
+        if (facetGroupChanged || changed.has('filterText')) {
+            this.filteredBuckets = this.filterBuckets();
         }
         // If any of the search properties change, it triggers a facet fetch
         if (changed.has('facetKey') ||
@@ -54,7 +92,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             changed.has('searchType') ||
             changed.has('filterMap')) {
             this.facetsLoading = true;
-            this.pageNumber = 1;
+            this.loadFailed = false;
             this.sortedBy =
                 this.searchType === SearchType.TV
                     ? tvMoreFacetSort[this.facetKey]
@@ -62,22 +100,31 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             this.updateSpecificFacets();
         }
     }
+    updated(changed) {
+        // A new filter or sort order shows different values, so start over from
+        // the first page rather than somewhere in the middle of them.
+        if (changed.has('filterText') || changed.has('sortedBy')) {
+            this.scroller?.scrollToPage(0);
+        }
+        // A removed chiclet took its focused button with it; move focus to the
+        // chiclet that took its place, or back to the filter field if none are left.
+        if (this.chicletFocusIndex !== undefined) {
+            const buttons = this.shadowRoot?.querySelectorAll('.chiclet-remove') ?? [];
+            const index = Math.min(this.chicletFocusIndex, buttons.length - 1);
+            this.chicletFocusIndex = undefined;
+            (buttons[index] ?? this.filterInput)?.focus();
+        }
+    }
     firstUpdated() {
         this.setupEscapeListeners();
     }
-    /**
-     * Close more facets modal on Escape click
-     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.escapeHandler);
+    }
     setupEscapeListeners() {
         if (this.modalManager) {
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    this.modalManager?.closeModal();
-                }
-            });
-        }
-        else {
-            document.removeEventListener('keydown', () => { });
+            document.addEventListener('keydown', this.escapeHandler);
         }
     }
     /**
@@ -112,74 +159,72 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             aggregationsSize,
             rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
         };
-        const results = await this.searchService?.search(params, this.searchType);
-        this.aggregations = results?.success?.response.aggregations;
-        this.facetsLoading = false;
-        const collectionTitles = results?.success?.response?.collectionTitles;
-        if (collectionTitles) {
-            for (const [id, title] of Object.entries(collectionTitles)) {
-                this.collectionTitles?.set(id, title);
+        try {
+            const results = await this.searchService?.search(params, this.searchType);
+            const response = results?.success?.response;
+            if (!response) {
+                log('More facets search failed', results?.error);
+                this.loadFailed = true;
+                this.aggregations = undefined;
+                return;
+            }
+            // Record collection titles before the aggregations, so that they're
+            // available for sorting & filtering once the facet group is built.
+            const { collectionTitles } = response;
+            if (collectionTitles) {
+                for (const [id, title] of Object.entries(collectionTitles)) {
+                    this.collectionTitles?.set(id, title);
+                }
             }
+            this.aggregations = response.aggregations;
         }
-    }
-    /**
-     * Handler for page number changes from the pagination widget.
-     */
-    pageNumberClicked(e) {
-        const page = e?.detail?.page;
-        if (page) {
-            this.pageNumber = Number(page);
+        catch (err) {
+            log('More facets search threw', err);
+            this.loadFailed = true;
+            this.aggregations = undefined;
+        }
+        finally {
+            this.facetsLoading = false;
         }
-        this.analyticsHandler?.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.moreFacetsPageChange,
-            label: `${this.pageNumber}`,
-        });
     }
     /**
-     * Combines the selected facets with the aggregations to create a single list of facets
+     * Combines the selected facets with the aggregations into the single list of
+     * values the dialog shows. Selected and hidden values keep their place in the
+     * current sort order rather than moving to the front; the chiclets above the
+     * list are what call them out.
      */
     get mergedFacets() {
         if (!this.facetKey || !this.selectedFacets)
             return undefined;
-        const { selectedFacetGroup, aggregationFacetGroup } = this;
+        const { aggregationFacetGroup } = this;
         // If we don't have any aggregations, then there is nothing to show yet
         if (!aggregationFacetGroup)
             return undefined;
-        // Start with either the selected group if we have one, or the aggregate group otherwise
-        const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };
-        // Attach the counts to the selected buckets
-        const bucketsWithCount = selectedFacetGroup?.buckets.map(bucket => {
-            const selectedBucket = aggregationFacetGroup.buckets.find(b => b.key === bucket.key);
-            return selectedBucket
-                ? {
-                    ...bucket,
-                    count: selectedBucket.count,
-                }
-                : bucket;
-        }) ?? [];
-        // Sort the buckets by selection state
-        // We do this *prior* to considering unapplied selections, because we want the facets
-        // to remain in position when they are selected/unselected, rather than re-sort themselves.
-        sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);
-        // Append any additional buckets that were not selected
-        aggregationFacetGroup.buckets.forEach(bucket => {
-            const existingBucket = selectedFacetGroup?.buckets.find(b => b.key === bucket.key);
-            if (existingBucket)
-                return;
-            bucketsWithCount.push(bucket);
+        const selections = this.currentSelections;
+        // Mark each aggregated value with its selection state, if it has one
+        const buckets = aggregationFacetGroup.buckets.map(bucket => {
+            const selection = selections[bucket.key];
+            return selection ? { ...bucket, state: selection.state } : bucket;
         });
-        // Apply any unapplied selections that appear on this page
-        const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];
-        for (const [index, bucket] of bucketsWithCount.entries()) {
-            const unappliedBucket = unappliedBuckets?.[bucket.key];
-            if (unappliedBucket) {
-                bucketsWithCount[index] = { ...unappliedBucket };
-            }
+        // Values selected before the dialog opened can be missing from the
+        // aggregations (a hidden value is excluded from the results it would be
+        // counted in). Slot them in where the current sort puts them, so they can
+        // still be changed from the list.
+        const aggregatedKeys = new Set(buckets.map(b => b.key));
+        const preexisting = this.selectedFacets[this.facetKey] ?? {};
+        for (const [key, data] of Object.entries(preexisting)) {
+            if (aggregatedKeys.has(key))
+                continue;
+            this.insertInSortOrder(buckets, {
+                displayText: this.displayTextFor(key),
+                key,
+                count: data.count,
+                state: selections[key]?.state ?? data.state,
+            });
         }
         // For TV creator facets, uppercase the display text
         if (this.facetKey === 'creator' && this.isTvSearch) {
-            bucketsWithCount.forEach(b => {
+            buckets.forEach(b => {
                 b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
                 const channelLabel = this.tvChannelAliases?.get(b.displayText);
                 if (channelLabel && channelLabel !== b.displayText) {
@@ -187,35 +232,68 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
                 }
             });
         }
-        facetGroup.buckets = bucketsWithCount;
-        return facetGroup;
+        return { ...aggregationFacetGroup, buckets };
     }
     /**
-     * Converts the selected facets for the current facet key to a `FacetGroup`,
-     * which is easier to work with.
+     * This facet type's selections: the ones made before the dialog opened,
+     * overridden by any unapplied changes made in it. Values stay in the order
+     * they were first selected, and cleared ones remain with state `'none'`.
      */
-    get selectedFacetGroup() {
-        if (!this.selectedFacets || !this.facetKey)
-            return undefined;
-        const selectedFacetsForKey = this.selectedFacets[this.facetKey];
-        if (!selectedFacetsForKey)
-            return undefined;
-        const facetGroupTitle = facetTitles[this.facetKey];
-        const buckets = Object.entries(selectedFacetsForKey).map(([value, data]) => {
-            const displayText = value;
-            return {
-                displayText,
-                key: value,
-                count: data?.count,
-                state: data?.state,
-            };
-        });
+    get currentSelections() {
+        if (!this.facetKey)
+            return {};
         return {
-            title: facetGroupTitle,
-            key: this.facetKey,
-            buckets,
+            ...this.selectedFacets?.[this.facetKey],
+            ...this.unappliedFacetChanges[this.facetKey],
         };
     }
+    /**
+     * The values that are currently selected or hidden, in the order they were
+     * selected, as they appear in `facetGroup`.
+     */
+    listChosenBuckets() {
+        const byKey = new Map(this.facetGroup?.buckets.map(b => [b.key, b]));
+        // Without a list (e.g. the search failed), fall back on the selections
+        // themselves, so they can still be seen and cleared.
+        return Object.entries(this.currentSelections)
+            .map(([key, selection]) => byKey.get(key) ?? {
+            ...selection,
+            displayText: this.displayTextFor(key),
+        })
+            .filter(bucket => bucket.state !== 'none');
+    }
+    /**
+     * Inserts `bucket` ahead of the first bucket that the current sort would put
+     * after it.
+     */
+    insertInSortOrder(buckets, bucket) {
+        const index = buckets.findIndex(b => this.compareForSort(bucket, b) < 0);
+        buckets.splice(index === -1 ? buckets.length : index, 0, bucket);
+    }
+    /**
+     * Orders two buckets the way the aggregations are ordered for the current
+     * sort (see `getSortedBuckets` in search-service).
+     */
+    compareForSort(a, b) {
+        switch (this.sortedBy) {
+            case AggregationSortType.ALPHABETICAL:
+                return (a.displayText ?? a.key).localeCompare(b.displayText ?? b.key);
+            case AggregationSortType.NUMERIC:
+                return Number(b.key) - Number(a.key);
+            default:
+                return b.count - a.count;
+        }
+    }
+    /**
+     * The text patrons see for a bucket: the collection title for collections,
+     * and the bucket key for everything else.
+     */
+    displayTextFor(key) {
+        const collectionTitle = this.facetKey === 'collection'
+            ? this.collectionTitles?.get(key)
+            : undefined;
+        return collectionTitle ?? key;
+    }
     /**
      * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
      * which is easier to work with.
@@ -240,12 +318,18 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         const facetBuckets = sortedBuckets.map(bucket => {
             const bucketKeyStr = `${bucket.key}`;
             return {
-                displayText: `${bucketKeyStr}`,
-                key: `${bucketKeyStr}`,
+                displayText: this.displayTextFor(bucketKeyStr),
+                key: bucketKeyStr,
                 count: bucket.doc_count,
                 state: 'none',
             };
         });
+        // Collections sorted alphabetically should be in order of the titles
+        // patrons see, not of the identifiers that getSortedBuckets used.
+        if (this.facetKey === 'collection' &&
+            this.sortedBy === AggregationSortType.ALPHABETICAL) {
+            facetBuckets.sort((a, b) => (a.displayText ?? a.key).localeCompare(b.displayText ?? b.key));
+        }
         return {
             title: facetGroupTitle,
             key: this.facetKey,
@@ -253,34 +337,100 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         };
     }
     /**
-     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     * The buckets whose visible text contains the filter text, ignoring case,
+     * accents and punctuation.
      */
-    get facetGroupForCurrentPage() {
-        const { facetGroup } = this;
-        if (!facetGroup)
-            return undefined;
-        // Slice out only the current page of facet buckets
-        const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
-        const truncatedBuckets = facetGroup.buckets.slice(firstBucketIndexOnPage, firstBucketIndexOnPage + this.facetsPerPage);
-        return {
-            ...facetGroup,
-            buckets: truncatedBuckets,
-        };
+    filterBuckets() {
+        const buckets = this.facetGroup?.buckets ?? [];
+        const needle = normalizeFilterText(this.filterText);
+        if (!needle.spaced)
+            return buckets;
+        return buckets.filter(bucket => filterTextIncludes(this.filterKeyFor(bucket), needle));
+    }
+    filterKeyFor(bucket) {
+        let filterKey = this.filterKeys.get(bucket.key);
+        if (filterKey === undefined) {
+            const visibleText = [bucket.displayText ?? bucket.key, bucket.extraNote]
+                .filter(Boolean)
+                .join(' ');
+            filterKey = normalizeFilterText(visibleText);
+            this.filterKeys.set(bucket.key, filterKey);
+        }
+        return filterKey;
+    }
+    /**
+     * Whether the patron's filter text has ruled out every value
+     */
+    get noValuesMatch() {
+        const isFiltering = normalizeFilterText(this.filterText).spaced !== '';
+        return isFiltering && this.filteredBuckets.length === 0;
     }
     get moreFacetsTemplate() {
+        const valuesLabel = this.facetKey
+            ? msg(str `${facetTitles[this.facetKey]} values`)
+            : undefined;
         return html `
-      <facets-template
-        .facetGroup=${this.facetGroupForCurrentPage}
-        .selectedFacets=${this.selectedFacets}
+      <more-facets-scroller
+        .facetType=${this.facetKey}
+        .buckets=${this.filteredBuckets}
         .collectionTitles=${this.collectionTitles}
-        @facetClick=${(e) => {
-            if (this.facetKey) {
-                this.unappliedFacetChanges = updateSelectedFacetBucket(this.unappliedFacetChanges, this.facetKey, e.detail.bucket);
-            }
-        }}
-      ></facets-template>
+        ?omitHideButtons=${this.facetGroup?.buckets.length === 1}
+        label=${ifDefined(valuesLabel)}
+        @facetClick=${this.facetClicked}
+        @pageChanged=${this.pageChanged}
+      ></more-facets-scroller>
+      ${when(this.loadFailed, () => this.loadErrorTemplate, () => when(this.noValuesMatch, () => this.noMatchesTemplate))}
+    `;
+    }
+    /**
+     * A chiclet for each selected or hidden value, each with a button to clear it
+     */
+    get chicletsTemplate() {
+        const valuesName = this.facetKey ? facetPluralTitles[this.facetKey] : '';
+        return html `
+      <ul class="chiclets" aria-label=${msg(str `Selected ${valuesName}`)}>
+        ${repeat(this.chosenBuckets, bucket => bucket.key, (bucket, index) => this.chicletTemplate(bucket, index))}
+      </ul>
+    `;
+    }
+    chicletTemplate(bucket, index) {
+        const isHidden = bucket.state === 'hidden';
+        const text = [bucket.displayText ?? bucket.key, bucket.extraNote]
+            .filter(Boolean)
+            .join(' ');
+        const removeLabel = isHidden
+            ? msg(str `Unhide ${text}`)
+            : msg(str `Deselect ${text}`);
+        return html `
+      <li class="chiclet" title=${text}>
+        <span class="chiclet-icon" aria-hidden="true"
+          >${isHidden ? eyeClosedIcon : checkIcon}</span
+        >
+        <span class="sr-only"
+          >${isHidden ? msg('Hidden:') : msg('Selected:')}</span
+        >
+        <span class="chiclet-text">${text}</span>
+        <button
+          type="button"
+          class="chiclet-remove"
+          aria-label=${removeLabel}
+          @click=${() => this.chicletRemoved(bucket, index)}
+        >
+          ${closeCircleDark}
+        </button>
+      </li>
     `;
     }
+    get noMatchesTemplate() {
+        return html `<p class="facets-message no-matches" role="status">
+      ${msg('No matching values found.')}
+    </p>`;
+    }
+    get loadErrorTemplate() {
+        return html `<p class="facets-message load-error" role="alert">
+      ${msg('Sorry, these values couldn’t be loaded. Please try again later.')}
+    </p>`;
+    }
     get loaderTemplate() {
         return html `
       <ia-status-indicator
@@ -289,47 +439,21 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
       ></ia-status-indicator>
     `;
     }
-    /**
-     * How many pages of facets to show in the modal pagination widget
-     */
-    get paginationSize() {
-        if (!this.aggregations || !this.facetKey)
-            return 0;
-        // Calculate the appropriate number of pages to show in the modal pagination widget
-        const length = this.aggregations[this.facetKey]?.buckets.length;
-        return Math.ceil(length / this.facetsPerPage);
-    }
-    // render pagination if more then 1 page
-    get facetsPaginationTemplate() {
-        return this.paginationSize > 1
-            ? html `<more-facets-pagination
-          .size=${this.paginationSize}
-          .currentPage=${1}
-          @pageNumberClicked=${this.pageNumberClicked}
-        ></more-facets-pagination>`
-            : nothing;
-    }
     get footerTemplate() {
-        if (this.paginationSize > 0) {
-            return html `${this.facetsPaginationTemplate}
-        <div class="footer">
-          <button
-            class="btn btn-cancel"
-            type="button"
-            @click=${this.cancelClick}
-          >
-            Cancel
-          </button>
-          <button
-            class="btn btn-submit"
-            type="button"
-            @click=${this.applySearchFacetsClicked}
-          >
-            Apply filters
-          </button>
-        </div> `;
-        }
-        return nothing;
+        return html `
+      <div class="footer">
+        <button class="btn btn-cancel" type="button" @click=${this.cancelClick}>
+          Cancel
+        </button>
+        <button
+          class="btn btn-submit"
+          type="button"
+          @click=${this.applySearchFacetsClicked}
+        >
+          Apply filters
+        </button>
+      </div>
+    `;
     }
     sortFacetAggregation(facetSortType) {
         this.sortedBy = facetSortType;
@@ -338,24 +462,40 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     get modalHeaderTemplate() {
         const facetSort = this.sortedBy ?? defaultFacetSort[this.facetKey];
         const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
+        const valuesName = this.facetKey ? facetPluralTitles[this.facetKey] : '';
+        // From the facet key rather than the facet group, which is missing
+        // until the values load (or if they fail to)
+        const title = this.facetKey ? facetTitles[this.facetKey] : '';
         return html `<span class="sr-only">${msg('More facets for:')}</span>
-      <span class="title">
-        ${this.facetGroup?.title}
-
-        <label class="sort-label">${msg('Sort by:')}</label>
-        ${this.facetKey
+      <span class="title">${title}</span>
+      <span class="header-controls">
+        <span class="sort-controls">
+          <label class="sort-label">${msg('Sort by:')}</label>
+          ${this.facetKey
             ? html `<toggle-switch
-              class="sort-toggle"
-              leftValue=${AggregationSortType.COUNT}
-              leftLabel="Count"
-              rightValue=${valueFacetSort[this.facetKey]}
-              .rightLabel=${this.facetGroup?.title}
-              side=${defaultSwitchSide}
-              @change=${(e) => {
+                class="sort-toggle"
+                leftValue=${AggregationSortType.COUNT}
+                leftLabel="Count"
+                rightValue=${valueFacetSort[this.facetKey]}
+                .rightLabel=${title}
+                side=${defaultSwitchSide}
+                @change=${(e) => {
                 this.sortFacetAggregation(Number(e.detail));
             }}
-            ></toggle-switch>`
+              ></toggle-switch>`
             : nothing}
+        </span>
+        <span class="filter-controls">
+          <label class="filter-label">${msg('Filter by:')}</label>
+          <ia-clearable-text-input
+            class="filter-input"
+            .value=${this.filterText}
+            .placeholder=${msg(str `Search ${valuesName}…`)}
+            .screenReaderLabel=${msg(str `Filter ${valuesName}`)}
+            .clearButtonScreenReaderLabel=${msg('Clear filter')}
+            @input=${this.filterTextChanged}
+          ></ia-clearable-text-input>
+        </span>
       </span>`;
     }
     render() {
@@ -365,12 +505,42 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             : html `
             <section id="more-facets">
               <div class="header-content">${this.modalHeaderTemplate}</div>
+              ${when(this.chosenBuckets.length, () => this.chicletsTemplate)}
               <div class="facets-content">${this.moreFacetsTemplate}</div>
               ${this.footerTemplate}
             </section>
           `}
     `;
     }
+    /**
+     * Handler for typing in (or clearing) the filter text field
+     */
+    filterTextChanged(e) {
+        const input = e.target;
+        this.filterText = input.value;
+    }
+    facetClicked(e) {
+        if (!this.facetKey)
+            return;
+        this.unappliedFacetChanges = updateSelectedFacetBucket(this.unappliedFacetChanges, this.facetKey, e.detail.bucket);
+    }
+    /**
+     * Clears the selection a chiclet stands for, which removes the chiclet and
+     * unchecks the value in the list.
+     */
+    chicletRemoved(bucket, index) {
+        if (!this.facetKey)
+            return;
+        this.unappliedFacetChanges = updateSelectedFacetBucket(this.unappliedFacetChanges, this.facetKey, { ...bucket, state: 'none' });
+        this.chicletFocusIndex = index;
+    }
+    pageChanged(e) {
+        this.analyticsHandler?.sendEvent({
+            category: analyticsCategories.default,
+            action: analyticsActions.moreFacetsPageChange,
+            label: `${e.detail + 1}`,
+        });
+    }
     applySearchFacetsClicked() {
         const mergedSelections = mergeSelectedFacets(this.selectedFacets, this.unappliedFacetChanges);
         const event = new CustomEvent('facetsChanged', {
@@ -404,10 +574,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             srOnlyStyle,
             css `
         section#more-facets {
-          overflow: auto;
-          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
-          --facetsColumnCount: 3;
+          padding: 10px;
         }
+
         .header-content .title {
           display: block;
           text-align: left;
@@ -416,8 +585,25 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           font-weight: bold;
         }
 
-        .sort-label {
-          margin-left: 20px;
+        .header-controls {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 8px 20px;
+          padding: 5px 10px 0;
+        }
+
+        /* Each label stays on the same line as its control when these wrap */
+        .sort-controls,
+        .filter-controls {
+          display: inline-flex;
+          align-items: center;
+          gap: 5px;
+          white-space: nowrap;
+        }
+
+        .sort-label,
+        .filter-label {
           font-size: 1.3rem;
         }
 
@@ -425,12 +611,95 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           font-weight: normal;
         }
 
+        .filter-input {
+          --input-height: 2.5rem;
+          --input-font-size: 1.3rem;
+          --input-border-radius: 4px;
+          --input-padding: 4px 8px;
+          --input-focused-border-color: ${modalSubmitButton};
+          width: 16rem;
+        }
+
+        .chiclets {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+          margin: 0;
+          padding: 10px 10px 0;
+          list-style: none;
+          /* About three rows; any more scroll, so the values stay in view */
+          max-height: 7.8rem;
+          overflow-y: auto;
+        }
+
+        .chiclet {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          max-width: 24rem;
+          padding: 2px 3px 2px 6px;
+          border: 1px solid ${modalSubmitButton};
+          border-radius: 5px;
+          background: #fff;
+          color: #2c2c2c;
+          font-size: 1.2rem;
+          line-height: normal;
+        }
+
+        .chiclet-icon {
+          display: flex;
+          flex: none;
+        }
+
+        .chiclet-icon svg {
+          width: 12px;
+          height: 12px;
+        }
+
+        .chiclet-text {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .chiclet-remove {
+          display: flex;
+          flex: none;
+          padding: 2px;
+          border: none;
+          border-radius: 50%;
+          background: none;
+          cursor: pointer;
+        }
+
+        .chiclet-remove svg {
+          width: 10px;
+          height: 10px;
+          opacity: 0.55;
+        }
+
+        .chiclet-remove:hover svg,
+        .chiclet-remove:focus-visible svg {
+          opacity: 1;
+        }
+
         .facets-content {
+          position: relative;
           font-size: 1.2rem;
-          max-height: 300px;
-          overflow: auto;
-          padding: 10px;
+          padding: 10px 0;
         }
+
+        .facets-message {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0;
+          font-size: 1.4rem;
+          color: #666;
+        }
+
         .facets-loader {
           --icon-width: 70px;
           margin-bottom: 20px;
@@ -445,6 +714,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           width: auto;
           border-radius: 4px;
           cursor: pointer;
+          font-family: inherit;
         }
         .btn-cancel {
           background-color: #2c2c2c;
@@ -456,17 +726,18 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         }
         .footer {
           text-align: center;
-          margin-top: 10px;
         }
 
         @media (max-width: 560px) {
-          section#more-facets {
-            max-height: 450px;
-            --facetsColumnCount: 1;
+          /* The filter gets a line of its own here, so let it fill that line */
+          .filter-controls {
+            flex: 1 1 auto;
           }
-          .facets-content {
-            overflow-y: auto;
-            height: 300px;
+          .filter-input {
+            flex: 1 1 auto;
+            width: auto;
+            min-width: 12rem;
+            --input-font-size: 1.2rem;
           }
         }
       `,
@@ -497,9 +768,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], MoreFacetsContent.prototype, "tvChannelAliases", void 0);
-__decorate([
-    property({ type: Number })
-], MoreFacetsContent.prototype, "facetsPerPage", void 0);
 __decorate([
     property({ type: Boolean })
 ], MoreFacetsContent.prototype, "facetsLoading", void 0);
@@ -532,7 +800,16 @@ __decorate([
 ], MoreFacetsContent.prototype, "unappliedFacetChanges", void 0);
 __decorate([
     state()
-], MoreFacetsContent.prototype, "pageNumber", void 0);
+], MoreFacetsContent.prototype, "filterText", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "loadFailed", void 0);
+__decorate([
+    query('more-facets-scroller')
+], MoreFacetsContent.prototype, "scroller", void 0);
+__decorate([
+    query('ia-clearable-text-input')
+], MoreFacetsContent.prototype, "filterInput", void 0);
 MoreFacetsContent = __decorate([
     customElement('more-facets-content')
 ], MoreFacetsContent);