@internetarchive/collection-browser 4.2.0-alpha-webdev8164.2 → 4.2.0

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

@@ -1,27 +1,17 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { SearchType, AggregationSortType, } from '@internetarchive/search-service';
 import { msg } from '@lit/localize';
 import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, tvMoreFacetSort, } from '../models';
 import '@internetarchive/elements/ia-status-indicator/ia-status-indicator';
+import './more-facets-pagination';
 import './facets-template';
 import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
 import './toggle-switch';
-import './more-facets-pagination';
-import '@internetarchive/ia-clearable-text-input';
-import arrowLeftIcon from '../assets/img/icons/arrow-left';
-import arrowRightIcon from '../assets/img/icons/arrow-right';
 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';
-/**
- * Threshold for switching from horizontal scroll to pagination.
- * If facet count >= this value, use pagination. Otherwise use horizontal scroll.
- */
-const PAGINATION_THRESHOLD = 1000;
 let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     constructor() {
         super(...arguments);
@@ -44,36 +34,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
          */
         this.unappliedFacetChanges = getDefaultSelectedFacets();
         /**
-         * Text entered by the user to filter facet buckets.
-         * Applied to bucket.key for case-insensitive matching.
-         */
-        this.filterText = '';
-        /**
-         * Current page number for pagination (when facet count >= PAGINATION_THRESHOLD).
+         * Which page of facets we are showing.
          */
         this.pageNumber = 1;
-        /**
-         * Whether the component is narrow enough to warrant compact pagination.
-         * Updated via a ResizeObserver-based container query approach.
-         */
-        this.isCompactView = false;
-        /**
-         * Whether the horizontal scroll is at the leftmost position.
-         */
-        this.atScrollStart = true;
-        /**
-         * Whether the horizontal scroll is at the rightmost position.
-         */
-        this.atScrollEnd = true;
-        this.scrollHandler = () => this.updateScrollState();
-        this.scrollListenerAttached = false;
-        /**
-         * Close more facets modal on Escape click
-         */
-        this.escapeHandler = (e) => {
-            if (e.key === 'Escape')
-                this.modalManager?.closeModal();
-        };
     }
     willUpdate(changed) {
         if (changed.has('aggregations') ||
@@ -85,12 +48,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             // store it for reuse across pages.
             this.facetGroup = this.mergedFacets;
         }
-        // Reset to page 1 when filter text changes (only matters for pagination mode)
-        if (changed.has('filterText')) {
-            this.pageNumber = 1;
-        }
-    }
-    updated(changed) {
         // If any of the search properties change, it triggers a facet fetch
         if (changed.has('facetKey') ||
             changed.has('query') ||
@@ -104,177 +61,23 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
                     : defaultFacetSort[this.facetKey];
             this.updateSpecificFacets();
         }
-        // Reset horizontal scroll when filter text changes (e.g., switching from
-        // horizontal-scroll mode back to pagination mode)
-        if (changed.has('filterText')) {
-            const facetsContent = this.shadowRoot?.querySelector('.facets-content');
-            if (facetsContent) {
-                facetsContent.scrollLeft = 0;
-            }
-        }
-        // Manage scroll listener for horizontal scroll mode arrows.
-        // Only re-evaluate when properties that affect the displayed content change.
-        if (changed.has('filterText') ||
-            changed.has('aggregations') ||
-            changed.has('facetKey') ||
-            changed.has('sortedBy') ||
-            changed.has('selectedFacets') ||
-            changed.has('unappliedFacetChanges')) {
-            if (!this.usePagination) {
-                this.attachScrollListener();
-                // Refresh scroll state whenever content may have changed (e.g., filtering)
-                requestAnimationFrame(() => this.updateScrollState());
-            }
-            else {
-                this.removeScrollListener();
-            }
-        }
     }
     firstUpdated() {
         this.setupEscapeListeners();
-        this.setupCompactViewObserver();
-        this.constrainToScrollContainer();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.resizeObserver?.disconnect();
-        this.removeScrollListener();
-        document.removeEventListener('keydown', this.escapeHandler);
-    }
-    /**
-     * Attaches a scroll event listener to the facets content element
-     * to track horizontal scroll position for arrow button states.
-     */
-    attachScrollListener() {
-        if (this.scrollListenerAttached || !this.facetsContentEl)
-            return;
-        this.scrollListenerTarget = this.facetsContentEl;
-        this.scrollListenerTarget.addEventListener('scroll', this.scrollHandler, {
-            passive: true,
-        });
-        this.scrollListenerAttached = true;
-        // Defer initial state check until after browser layout, so scrollWidth
-        // reflects the actual content dimensions.
-        requestAnimationFrame(() => this.updateScrollState());
-    }
-    removeScrollListener() {
-        if (!this.scrollListenerAttached || !this.scrollListenerTarget)
-            return;
-        this.scrollListenerTarget.removeEventListener('scroll', this.scrollHandler);
-        this.scrollListenerTarget = undefined;
-        this.scrollListenerAttached = false;
     }
     /**
-     * Updates the scroll arrow disabled states based on current scroll position.
+     * Close more facets modal on Escape click
      */
-    updateScrollState() {
-        const el = this.facetsContentEl;
-        if (!el)
-            return;
-        this.atScrollStart = el.scrollLeft <= 0;
-        this.atScrollEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
-    }
-    /**
-     * Calculates the width of one column step (column width + gap) based on
-     * the CSS multi-column layout of the scroll container.
-     */
-    getColumnStep() {
-        const el = this.facetsContentEl;
-        if (!el)
-            return 0;
-        const facetRows = el.querySelector('.facet-rows');
-        const styles = facetRows
-            ? getComputedStyle(facetRows)
-            : getComputedStyle(el);
-        const columnCount = parseInt(styles.columnCount, 10) || 3;
-        const columnGap = parseInt(styles.columnGap, 10) || 15;
-        // Column width = (visible width - total gaps) / column count
-        // Column step = column width + gap = (visible width + gap) / column count
-        return (el.clientWidth + columnGap) / columnCount;
-    }
-    /**
-     * Snaps a scroll target to the nearest column boundary.
-     */
-    snapToColumn(target) {
-        const step = this.getColumnStep();
-        if (step <= 0)
-            return target;
-        return Math.round(target / step) * step;
-    }
-    /**
-     * Scrolls the facet content left by approximately one page, snapping to
-     * the nearest column boundary.
-     */
-    onScrollLeft() {
-        const el = this.facetsContentEl;
-        if (!el)
-            return;
-        const rawTarget = el.scrollLeft - el.clientWidth;
-        const snapped = Math.max(0, this.snapToColumn(rawTarget));
-        el.scrollTo({ left: snapped, behavior: 'smooth' });
-    }
-    /**
-     * Scrolls the facet content right by approximately one page, snapping to
-     * the nearest column boundary.
-     */
-    onScrollRight() {
-        const el = this.facetsContentEl;
-        if (!el)
-            return;
-        const maxScroll = el.scrollWidth - el.clientWidth;
-        const rawTarget = el.scrollLeft + el.clientWidth;
-        const snapped = Math.min(maxScroll, this.snapToColumn(rawTarget));
-        el.scrollTo({ left: snapped, behavior: 'smooth' });
-    }
-    /**
-     * Sets up a ResizeObserver to toggle compact pagination based on component width.
-     */
-    setupCompactViewObserver() {
-        this.resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                const compact = entry.contentRect.width <= 560;
-                if (this.isCompactView !== compact)
-                    this.isCompactView = compact;
-            }
-        });
-        this.resizeObserver.observe(this);
-    }
-    /**
-     * Constrains the section's max-height to fit within the nearest
-     * scroll-container ancestor (e.g., the modal's content area).
-     * This is a safety net for cases where the CSS max-height calculation
-     * doesn't perfectly match the container's available space.
-     */
-    constrainToScrollContainer() {
-        requestAnimationFrame(() => {
-            const section = this.shadowRoot?.querySelector('section#more-facets');
-            if (!section)
-                return;
-            // Walk up from the assigned slot to find the nearest overflow container
-            let el = this.assignedSlot?.parentElement;
-            while (el) {
-                const cs = getComputedStyle(el);
-                if (cs.overflowY === 'auto' ||
-                    cs.overflowY === 'scroll' ||
-                    cs.overflowY === 'hidden') {
-                    const containerBottom = el.getBoundingClientRect().bottom;
-                    const sectionTop = section.getBoundingClientRect().top;
-                    const available = containerBottom - sectionTop;
-                    // Compare against the CSS max-height rather than actual height,
-                    // since content may not have loaded yet at firstUpdated time
-                    const computedMax = parseFloat(getComputedStyle(section).maxHeight);
-                    if (available > 0 && available < computedMax) {
-                        section.style.maxHeight = `${available}px`;
-                    }
-                    return;
-                }
-                el = el.parentElement;
-            }
-        });
-    }
     setupEscapeListeners() {
         if (this.modalManager) {
-            document.addEventListener('keydown', this.escapeHandler);
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') {
+                    this.modalManager?.closeModal();
+                }
+            });
+        }
+        else {
+            document.removeEventListener('keydown', () => { });
         }
     }
     /**
@@ -309,19 +112,29 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             aggregationsSize,
             rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
         };
-        try {
-            const results = await this.searchService?.search(params, this.searchType);
-            this.aggregations = results?.success?.response.aggregations;
-            const collectionTitles = results?.success?.response?.collectionTitles;
-            if (collectionTitles) {
-                for (const [id, title] of Object.entries(collectionTitles)) {
-                    this.collectionTitles?.set(id, title);
-                }
+        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);
             }
         }
-        finally {
-            this.facetsLoading = false;
+    }
+    /**
+     * Handler for page number changes from the pagination widget.
+     */
+    pageNumberClicked(e) {
+        const page = e?.detail?.page;
+        if (page) {
+            this.pageNumber = Number(page);
         }
+        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
@@ -389,9 +202,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             return undefined;
         const facetGroupTitle = facetTitles[this.facetKey];
         const buckets = Object.entries(selectedFacetsForKey).map(([value, data]) => {
-            const displayText = (this.facetKey === 'collection'
-                ? this.collectionTitles?.get(value)
-                : undefined) ?? value;
+            const displayText = value;
             return {
                 displayText,
                 key: value,
@@ -425,26 +236,16 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
                 return (!suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-'));
             });
         }
-        // Construct the array of facet buckets from the aggregation buckets,
-        // using collection display titles where available.
+        // Construct the array of facet buckets from the aggregation buckets
         const facetBuckets = sortedBuckets.map(bucket => {
             const bucketKeyStr = `${bucket.key}`;
-            const displayText = (this.facetKey === 'collection'
-                ? this.collectionTitles?.get(bucketKeyStr)
-                : undefined) ?? bucketKeyStr;
             return {
-                displayText,
+                displayText: `${bucketKeyStr}`,
                 key: `${bucketKeyStr}`,
                 count: bucket.doc_count,
                 state: 'none',
             };
         });
-        // For collection facets sorted alphabetically, re-sort by display title
-        // instead of the raw identifier used by getSortedBuckets.
-        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,
@@ -452,70 +253,24 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         };
     }
     /**
-     * Returns the facet group with buckets filtered by the current filter text.
-     * Filters are applied to the full bucket list before pagination.
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
      */
-    get filteredFacetGroup() {
-        const { facetGroup, filterText } = this;
+    get facetGroupForCurrentPage() {
+        const { facetGroup } = this;
         if (!facetGroup)
             return undefined;
-        // If no filter text, return the full group
-        if (!filterText.trim()) {
-            return facetGroup;
-        }
-        // Filter buckets by the text the user actually sees.
-        // For collections, match against the displayed collection title (not the identifier).
-        // For other facet types, match against the bucket key (which is also the display text).
-        const lowerFilter = filterText.toLowerCase().trim();
-        const filteredBuckets = facetGroup.buckets.filter(bucket => {
-            const displayText = this.collectionTitles?.get(bucket.key) ?? bucket.key;
-            return displayText.toLowerCase().includes(lowerFilter);
-        });
+        // 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: filteredBuckets,
-        };
-    }
-    /**
-     * Determines whether to use pagination based on the number of filtered facets.
-     * Returns true if facet count >= PAGINATION_THRESHOLD, false otherwise.
-     */
-    get usePagination() {
-        const facetCount = this.filteredFacetGroup?.buckets.length ?? 0;
-        return facetCount >= PAGINATION_THRESHOLD;
-    }
-    /**
-     * Returns the facet group for the current page.
-     * If using pagination (>= 1000 facets), slices to show only the current page.
-     * Otherwise, returns all facets for horizontal scrolling.
-     */
-    get facetGroupForCurrentPage() {
-        const filteredGroup = this.filteredFacetGroup;
-        if (!filteredGroup)
-            return undefined;
-        // If facet count is below threshold, show all facets with horizontal scroll
-        if (!this.usePagination) {
-            return filteredGroup;
-        }
-        // Otherwise, use pagination - slice to current page
-        const startIndex = (this.pageNumber - 1) * this.facetsPerPage;
-        const endIndex = startIndex + this.facetsPerPage;
-        const slicedBuckets = filteredGroup.buckets.slice(startIndex, endIndex);
-        return {
-            ...filteredGroup,
-            buckets: slicedBuckets,
+            buckets: truncatedBuckets,
         };
     }
     get moreFacetsTemplate() {
-        const facetGroup = this.facetGroupForCurrentPage;
-        // Show empty state if filtering returned no results
-        if (this.filterText.trim() &&
-            (!facetGroup || facetGroup.buckets.length === 0)) {
-            return this.emptyFilterResultsTemplate;
-        }
         return html `
       <facets-template
-        .facetGroup=${facetGroup}
+        .facetGroup=${this.facetGroupForCurrentPage}
         .selectedFacets=${this.selectedFacets}
         .collectionTitles=${this.collectionTitles}
         @facetClick=${(e) => {
@@ -534,171 +289,83 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
       ></ia-status-indicator>
     `;
     }
-    get emptyFilterResultsTemplate() {
-        return html `
-      <div class="empty-results">
-        <p>${msg('No matching values found.')}</p>
-        <p class="hint">${msg('Try a different search term.')}</p>
-      </div>
-    `;
-    }
     /**
-     * Number of pages for pagination (only used when facet count >= PAGINATION_THRESHOLD).
+     * How many pages of facets to show in the modal pagination widget
      */
     get paginationSize() {
-        const filteredBuckets = this.filteredFacetGroup?.buckets ?? [];
-        return Math.ceil(filteredBuckets.length / this.facetsPerPage);
+        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);
     }
-    /**
-     * Template for pagination component.
-     */
+    // render pagination if more then 1 page
     get facetsPaginationTemplate() {
-        return html `<more-facets-pagination
-      .size=${this.paginationSize}
-      .currentPage=${this.pageNumber}
-      .compact=${this.isCompactView}
-      @pageNumberClicked=${this.pageNumberClicked}
-    ></more-facets-pagination>`;
+        return this.paginationSize > 1
+            ? html `<more-facets-pagination
+          .size=${this.paginationSize}
+          .currentPage=${1}
+          @pageNumberClicked=${this.pageNumberClicked}
+        ></more-facets-pagination>`
+            : nothing;
     }
     get footerTemplate() {
-        return html `
-      ${when(this.usePagination, () => 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>
-    `;
+        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;
     }
     sortFacetAggregation(facetSortType) {
         this.sortedBy = facetSortType;
         this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
     }
-    /**
-     * Handler for filter input changes. Updates the filter text and triggers re-render.
-     */
-    handleFilterInput(e) {
-        const input = e.target;
-        this.filterText = input.value;
-    }
-    /**
-     * Handler for when the filter input is cleared via the clear button.
-     */
-    handleFilterClear() {
-        this.filterText = '';
-    }
-    /**
-     * Handler for pagination page number clicks.
-     * Only used when facet count >= PAGINATION_THRESHOLD.
-     */
-    pageNumberClicked(e) {
-        this.pageNumber = e.detail.page;
-        // Track page navigation in analytics
-        this.analyticsHandler?.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.moreFacetsPageChange,
-            label: `${this.pageNumber}`,
-        });
-        this.dispatchEvent(new CustomEvent('pageChanged', {
-            detail: this.pageNumber,
-            bubbles: true,
-            composed: true,
-        }));
-    }
     get modalHeaderTemplate() {
         const facetSort = this.sortedBy ?? defaultFacetSort[this.facetKey];
         const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
         return html `<span class="sr-only">${msg('More facets for:')}</span>
-      <span class="title"> ${this.facetGroup?.title} </span>
-      <span class="header-controls">
-        <span class="sort-controls">
-          <label class="sort-label">${msg('Sort by:')}</label>
-          ${this.facetKey
+      <span class="title">
+        ${this.facetGroup?.title}
+
+        <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=${this.facetGroup?.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('Search...')}
-            .screenReaderLabel=${msg('Filter facets')}
-            .clearButtonScreenReaderLabel=${msg('Clear filter')}
-            @input=${this.handleFilterInput}
-            @clear=${this.handleFilterClear}
-          ></ia-clearable-text-input>
-        </span>
       </span>`;
     }
-    get horizontalScrollTemplate() {
-        const contentClasses = classMap({
-            'facets-content': true,
-            'horizontal-scroll-mode': true,
-        });
-        const showArrows = !this.atScrollStart || !this.atScrollEnd;
-        return html `<div class="scroll-nav-container">
-      ${when(showArrows, () => html `<button
-            class="scroll-arrow scroll-left"
-            @click=${this.onScrollLeft}
-            ?disabled=${this.atScrollStart}
-            aria-label="Scroll facets left"
-          >
-            ${arrowLeftIcon}
-          </button>`)}
-      <div class=${contentClasses}>
-        <div class="facets-horizontal-container">
-          ${this.moreFacetsTemplate}
-        </div>
-      </div>
-      ${when(showArrows, () => html `<button
-            class="scroll-arrow scroll-right"
-            @click=${this.onScrollRight}
-            ?disabled=${this.atScrollEnd}
-            aria-label="Scroll facets right"
-          >
-            ${arrowRightIcon}
-          </button>`)}
-    </div>`;
-    }
     render() {
-        const sectionClasses = classMap({
-            'pagination-mode': this.usePagination,
-            'horizontal-scroll-mode': !this.usePagination,
-        });
-        const contentClasses = classMap({
-            'facets-content': true,
-            'pagination-mode': this.usePagination,
-        });
         return html `
       ${this.facetsLoading
             ? this.loaderTemplate
             : html `
-            <section id="more-facets" class=${sectionClasses}>
+            <section id="more-facets">
               <div class="header-content">${this.modalHeaderTemplate}</div>
-              ${this.usePagination
-                ? html `<div class=${contentClasses}>
-                    ${this.moreFacetsTemplate}
-                  </div>`
-                : this.horizontalScrollTemplate}
+              <div class="facets-content">${this.moreFacetsTemplate}</div>
               ${this.footerTemplate}
             </section>
           `}
@@ -714,8 +381,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         this.dispatchEvent(event);
         // Reset the unapplied changes back to default, now that they have been applied
         this.unappliedFacetChanges = getDefaultSelectedFacets();
-        // Reset filter text
-        this.filterText = '';
         this.modalManager?.closeModal();
         this.analyticsHandler?.sendEvent({
             category: analyticsCategories.default,
@@ -726,8 +391,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     cancelClick() {
         // Reset the unapplied changes back to default
         this.unappliedFacetChanges = getDefaultSelectedFacets();
-        // Reset filter text
-        this.filterText = '';
         this.modalManager?.closeModal();
         this.analyticsHandler?.sendEvent({
             category: analyticsCategories.default,
@@ -741,26 +404,10 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             srOnlyStyle,
             css `
         section#more-facets {
-          display: flex;
-          flex-direction: column;
-          max-height: calc(100vh - 16.5rem - var(--modalBottomMargin, 2.5rem));
-          padding: 10px;
-          box-sizing: border-box;
+          overflow: auto;
+          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
           --facetsColumnCount: 3;
         }
-
-        /* Both modes need a height constraint for proper column flow */
-        section#more-facets.horizontal-scroll-mode,
-        section#more-facets.pagination-mode {
-          --facetsMaxHeight: 280px;
-        }
-        .header-content {
-          flex-shrink: 0;
-          position: relative;
-          z-index: 1;
-          background: #fff;
-        }
-
         .header-content .title {
           display: block;
           text-align: left;
@@ -769,22 +416,8 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           font-weight: bold;
         }
 
-        .header-controls {
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          gap: 8px 20px;
-          padding: 0 10px 8px;
-        }
-
-        .sort-controls {
-          display: inline-flex;
-          align-items: center;
-          white-space: nowrap;
-          gap: 5px;
-        }
-
         .sort-label {
+          margin-left: 20px;
           font-size: 1.3rem;
         }
 
@@ -792,115 +425,11 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           font-weight: normal;
         }
 
-        .filter-controls {
-          display: inline-flex;
-          align-items: center;
-          white-space: nowrap;
-        }
-
-        .filter-label {
-          font-size: 1.3rem;
-        }
-
-        .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: 150px;
-          margin-left: 5px;
-        }
-
-        .empty-results {
-          text-align: center;
-          padding: 40px 20px;
-          color: #666;
-        }
-
-        .empty-results .hint {
-          margin-top: 10px;
-        }
-
         .facets-content {
           font-size: 1.2rem;
-          flex: 1 1 auto;
-          min-height: 0;
-          overflow-y: auto;
-          overflow-x: hidden;
+          max-height: 300px;
+          overflow: auto;
           padding: 10px;
-          /* Force scrollbar to always be visible */
-          scrollbar-width: thin; /* Firefox */
-          scrollbar-color: #888 #f1f1f1; /* Firefox - thumb and track colors */
-        }
-
-        /* Horizontal scroll mode: horizontal scrolling only */
-        .facets-content.horizontal-scroll-mode {
-          overflow-x: auto;
-          overflow-y: hidden;
-        }
-
-        /* Webkit browsers scrollbar styling - always visible */
-        .facets-content::-webkit-scrollbar {
-          width: 12px; /* Vertical scrollbar width */
-          height: 12px; /* Horizontal scrollbar height */
-        }
-
-        .facets-content::-webkit-scrollbar-track {
-          background: #f1f1f1;
-          border-radius: 6px;
-        }
-
-        .facets-content::-webkit-scrollbar-thumb {
-          background: #888;
-          border-radius: 6px;
-          min-height: 30px; /* Ensure thumb is always visible when scrolling is possible */
-        }
-
-        .facets-content::-webkit-scrollbar-thumb:hover {
-          background: #555;
-        }
-
-        /* Force corner to match track color */
-        .facets-content::-webkit-scrollbar-corner {
-          background: #f1f1f1;
-        }
-
-        .facets-horizontal-container {
-          display: inline-block;
-          min-width: 100%;
-          /* Allow natural width expansion based on content */
-          width: fit-content;
-        }
-
-        .scroll-nav-container {
-          display: flex;
-          align-items: center;
-          flex: 1 1 auto;
-          min-height: 0;
-        }
-
-        .scroll-nav-container .facets-content {
-          flex: 1 1 auto;
-          min-width: 0;
-        }
-
-        .scroll-arrow {
-          background: none;
-          border: none;
-          cursor: pointer;
-          padding: 5px;
-          flex-shrink: 0;
-        }
-
-        .scroll-arrow svg {
-          height: 14px;
-          fill: #2c2c2c;
-        }
-
-        .scroll-arrow:disabled {
-          opacity: 0.3;
-          cursor: default;
         }
         .facets-loader {
           --icon-width: 70px;
@@ -916,7 +445,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           width: auto;
           border-radius: 4px;
           cursor: pointer;
-          font-family: inherit;
         }
         .btn-cancel {
           background-color: #2c2c2c;
@@ -926,37 +454,19 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           background-color: ${modalSubmitButton};
           color: white;
         }
-        more-facets-pagination {
-          flex-shrink: 0;
-        }
-
         .footer {
           text-align: center;
           margin-top: 10px;
-          flex-shrink: 0;
         }
 
         @media (max-width: 560px) {
-          section#more-facets.horizontal-scroll-mode,
-          section#more-facets.pagination-mode {
-            --facetsColumnCount: 1; /* Single column on mobile */
-            --facetsMaxHeight: none; /* Remove fixed height for vertical scrolling */
+          section#more-facets {
+            max-height: 450px;
+            --facetsColumnCount: 1;
           }
-          /* On mobile, always use vertical scrolling regardless of mode */
-          .facets-content,
-          .facets-content.horizontal-scroll-mode {
+          .facets-content {
             overflow-y: auto;
-            overflow-x: hidden;
-          }
-          .scroll-nav-container {
-            display: contents; /* Remove wrapper from layout so section flex-column works */
-          }
-          .scroll-arrow {
-            display: none;
-          }
-          .filter-input {
-            width: 120px;
-            --input-font-size: 1.2rem;
+            height: 300px;
           }
         }
       `,
@@ -1020,27 +530,9 @@ __decorate([
 __decorate([
     state()
 ], MoreFacetsContent.prototype, "unappliedFacetChanges", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "filterText", void 0);
 __decorate([
     state()
 ], MoreFacetsContent.prototype, "pageNumber", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "isCompactView", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "atScrollStart", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "atScrollEnd", void 0);
-__decorate([
-    query('ia-clearable-text-input')
-], MoreFacetsContent.prototype, "filterInput", void 0);
-__decorate([
-    query('.facets-content')
-], MoreFacetsContent.prototype, "facetsContentEl", void 0);
 MoreFacetsContent = __decorate([
     customElement('more-facets-content')
 ], MoreFacetsContent);