@internetarchive/collection-browser 3.5.2-alpha-webdev8164.0 → 3.5.2-alpha-webdev8093.0

package/dist/src/collection-facets/facets-template.js

@@ -38,15 +38,10 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
     static get styles() {
         const columnCount = css `var(--facetsColumnCount, 1)`;
         const columnGap = css `var(--facetsColumnGap, 15px)`;
-        const columnWidth = css `var(--facetsColumnWidth, auto)`;
-        const maxHeight = css `var(--facetsMaxHeight, none)`;
         return css `
       .facet-rows {
         column-count: ${columnCount};
         column-gap: ${columnGap};
-        column-width: ${columnWidth};
-        max-height: ${maxHeight};
-        column-fill: auto;
       }
 
       a:link,

package/dist/src/collection-facets/facets-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QAEzD,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;4BAC3B,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QACpD,MAAM,WAAW,GAAG,GAAG,CAAA,gCAAgC,CAAC;QACxD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;wBACP,WAAW;sBACb,SAAS;;;;;;;;;;;;KAY1B,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAwE1B","sourcesContent":["import {\r\n  css,\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  nothing,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './facet-row';\r\n\r\n@customElement('facets-template')\r\nexport class FacetsTemplate extends LitElement {\r\n  @property({ type: Object }) facetGroup?: FacetGroup;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\r\n    this.dispatchFacetClickEvent(e.detail);\r\n  }\r\n\r\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\r\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\r\n      detail,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private get facetsTemplate(): TemplateResult | typeof nothing {\r\n    const { facetGroup } = this;\r\n    if (!facetGroup) return nothing;\r\n\r\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\r\n\r\n    // Added data-testid for Playwright testing\r\n    // Using className and aria-labels is not ideal for Playwright locator\r\n    return html`\r\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\r\n        ${repeat(\r\n          facetBuckets,\r\n          bucket => `${facetGroup.key}:${bucket.key}`,\r\n          bucket =>\r\n            html`<facet-row\r\n              .facetType=${facetGroup.key}\r\n              .bucket=${bucket}\r\n              .collectionTitles=${this.collectionTitles}\r\n              @facetClick=${this.facetClicked}\r\n            ></facet-row>`,\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`${this.facetsTemplate}`;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const columnCount = css`var(--facetsColumnCount, 1)`;\r\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\r\n    const columnWidth = css`var(--facetsColumnWidth, auto)`;\r\n    const maxHeight = css`var(--facetsMaxHeight, none)`;\r\n\r\n    return css`\r\n      .facet-rows {\r\n        column-count: ${columnCount};\r\n        column-gap: ${columnGap};\r\n        column-width: ${columnWidth};\r\n        max-height: ${maxHeight};\r\n        column-fill: auto;\r\n      }\r\n\r\n      a:link,\r\n      a:visited {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QAEzD,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;4BAC3B,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;;;;;;;;;;;KAW1B,CAAC;IACJ,CAAC;CACF,CAAA;AAlE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAmE1B","sourcesContent":["import {\r\n  css,\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  nothing,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './facet-row';\r\n\r\n@customElement('facets-template')\r\nexport class FacetsTemplate extends LitElement {\r\n  @property({ type: Object }) facetGroup?: FacetGroup;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\r\n    this.dispatchFacetClickEvent(e.detail);\r\n  }\r\n\r\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\r\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\r\n      detail,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private get facetsTemplate(): TemplateResult | typeof nothing {\r\n    const { facetGroup } = this;\r\n    if (!facetGroup) return nothing;\r\n\r\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\r\n\r\n    // Added data-testid for Playwright testing\r\n    // Using className and aria-labels is not ideal for Playwright locator\r\n    return html`\r\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\r\n        ${repeat(\r\n          facetBuckets,\r\n          bucket => `${facetGroup.key}:${bucket.key}`,\r\n          bucket =>\r\n            html`<facet-row\r\n              .facetType=${facetGroup.key}\r\n              .bucket=${bucket}\r\n              .collectionTitles=${this.collectionTitles}\r\n              @facetClick=${this.facetClicked}\r\n            ></facet-row>`,\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`${this.facetsTemplate}`;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const columnCount = css`var(--facetsColumnCount, 1)`;\r\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\r\n\r\n    return css`\r\n      .facet-rows {\r\n        column-count: ${columnCount};\r\n        column-gap: ${columnGap};\r\n      }\r\n\r\n      a:link,\r\n      a:visited {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}

package/dist/src/collection-facets/more-facets-content.d.ts

@@ -5,9 +5,9 @@ import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manag
 import { SelectedFacets, FacetOption } from '../models';
 import type { CollectionTitles, PageSpecifierParams, TVChannelAliases } from '../data-source/models';
 import '@internetarchive/elements/ia-status-indicator/ia-status-indicator';
+import './more-facets-pagination';
 import './facets-template';
 import './toggle-switch';
-import './more-facets-pagination';
 export declare class MoreFacetsContent extends LitElement {
     facetKey?: FacetOption;
     query?: string;
@@ -51,12 +51,7 @@ export declare class MoreFacetsContent extends LitElement {
      */
     private unappliedFacetChanges;
     /**
-     * Text entered by the user to filter facet buckets.
-     * Applied to bucket.key for case-insensitive matching.
-     */
-    private filterText;
-    /**
-     * Current page number for pagination (when facet count >= PAGINATION_THRESHOLD).
+     * Which page of facets we are showing.
      */
     private pageNumber;
     willUpdate(changed: PropertyValues): void;
@@ -75,6 +70,10 @@ export declare class MoreFacetsContent extends LitElement {
      * - this.aggregations - hold result of search service and being used for further processing.
      */
     updateSpecificFacets(): Promise<void>;
+    /**
+     * Handler for page number changes from the pagination widget.
+     */
+    private pageNumberClicked;
     /**
      * Combines the selected facets with the aggregations to create a single list of facets
      */
@@ -90,43 +89,18 @@ export declare class MoreFacetsContent extends LitElement {
      */
     private get aggregationFacetGroup();
     /**
-     * Returns the facet group with buckets filtered by the current filter text.
-     * Filters are applied to the full bucket list before pagination.
-     */
-    private get filteredFacetGroup();
-    /**
-     * Determines whether to use pagination based on the number of filtered facets.
-     * Returns true if facet count >= PAGINATION_THRESHOLD, false otherwise.
-     */
-    private get usePagination();
-    /**
-     * 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.
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
      */
     private get facetGroupForCurrentPage();
     private get moreFacetsTemplate();
     private get loaderTemplate();
-    private get emptyFilterResultsTemplate();
     /**
-     * Number of pages for pagination (only used when facet count >= PAGINATION_THRESHOLD).
+     * How many pages of facets to show in the modal pagination widget
      */
     private get paginationSize();
-    /**
-     * Template for pagination component (only shown when facet count >= PAGINATION_THRESHOLD).
-     */
     private get facetsPaginationTemplate();
     private get footerTemplate();
     private sortFacetAggregation;
-    /**
-     * Handler for filter input changes. Updates the filter text and triggers re-render.
-     */
-    private handleFilterInput;
-    /**
-     * Handler for pagination page number clicks.
-     * Only used when facet count >= PAGINATION_THRESHOLD.
-     */
-    private pageNumberClicked;
     private get modalHeaderTemplate();
     render(): TemplateResult<1>;
     private applySearchFacetsClicked;

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

@@ -5,18 +5,13 @@ import { AggregationSortType, } from '@internetarchive/search-service';
 import { msg } from '@lit/localize';
 import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, } 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 { 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);
@@ -39,12 +34,7 @@ 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;
     }
@@ -58,10 +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
@@ -70,7 +56,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             changed.has('searchType') ||
             changed.has('filterMap')) {
             this.facetsLoading = true;
-            this.pageNumber = 1; // Reset to page 1 on new search
+            this.pageNumber = 1;
             this.sortedBy = defaultFacetSort[this.facetKey];
             this.updateSpecificFacets();
         }
@@ -135,6 +121,20 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             }
         }
     }
+    /**
+     * 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
      */
@@ -252,65 +252,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 case-insensitively by bucket key
-        const lowerFilter = filterText.toLowerCase().trim();
-        const filteredBuckets = facetGroup.buckets.filter(bucket => bucket.key.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) => {
@@ -329,75 +288,52 @@ 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 (only shown when facet count >= PAGINATION_THRESHOLD).
-     */
+    // render pagination if more then 1 page
     get facetsPaginationTemplate() {
-        if (!this.usePagination)
-            return nothing;
-        return html `<more-facets-pagination
-      .size=${this.paginationSize}
-      .currentPage=${this.pageNumber}
-      @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 `
-      ${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 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 }));
-    }
     get modalHeaderTemplate() {
         const facetSort = this.sortedBy ?? defaultFacetSort[this.facetKey];
         const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
@@ -419,41 +355,16 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             }}
             ></toggle-switch>`
             : nothing}
-
-        <label class="filter-label" for="facet-filter"
-          >${msg('Filter by:')}</label
-        >
-        <input
-          id="facet-filter"
-          type="text"
-          class="filter-input"
-          .value=${this.filterText}
-          @input=${this.handleFilterInput}
-          placeholder=${msg('Search...')}
-          aria-label=${msg('Filter facets')}
-        />
       </span>`;
     }
     render() {
-        const contentClass = this.usePagination
-            ? 'facets-content pagination-mode'
-            : 'facets-content horizontal-scroll-mode';
-        const sectionClass = this.usePagination
-            ? 'pagination-mode'
-            : 'horizontal-scroll-mode';
         return html `
       ${this.facetsLoading
             ? this.loaderTemplate
             : html `
-            <section id="more-facets" class="${sectionClass}">
+            <section id="more-facets">
               <div class="header-content">${this.modalHeaderTemplate}</div>
-              <div class="${contentClass}">
-                ${this.usePagination
-                ? this.moreFacetsTemplate
-                : html `<div class="facets-horizontal-container">
-                      ${this.moreFacetsTemplate}
-                    </div>`}
-              </div>
+              <div class="facets-content">${this.moreFacetsTemplate}</div>
               ${this.footerTemplate}
             </section>
           `}
@@ -469,8 +380,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,
@@ -481,8 +390,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,
@@ -500,18 +407,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
           --facetsColumnCount: 3;
         }
-
-        /* Horizontal scroll mode: fixed column height for horizontal overflow */
-        section#more-facets.horizontal-scroll-mode {
-          --facetsColumnCount: 3;
-          --facetsMaxHeight: 280px;
-        }
-
-        /* Pagination mode: set height for proper column layout with vertical scroll */
-        section#more-facets.pagination-mode {
-          --facetsColumnCount: 3;
-          --facetsMaxHeight: 280px; /* Columns need height constraint to flow properly */
-        }
         .header-content .title {
           display: block;
           text-align: left;
@@ -529,92 +424,11 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
           font-weight: normal;
         }
 
-        .filter-label {
-          margin-left: 20px;
-          font-size: 1.3rem;
-        }
-
-        .filter-input {
-          font-size: 1.3rem;
-          padding: 4px 8px;
-          border: 1px solid #ccc;
-          border-radius: 4px;
-          margin-left: 5px;
-          width: 150px;
-          font-family: inherit;
-        }
-
-        .filter-input:focus {
-          outline: 2px solid #194880;
-          outline-offset: 1px;
-          border-color: #194880;
-        }
-
-        .empty-results {
-          text-align: center;
-          padding: 40px 20px;
-          color: #666;
-        }
-
-        .empty-results .hint {
-          font-size: 1.1rem;
-          margin-top: 10px;
-        }
-
         .facets-content {
           font-size: 1.2rem;
           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 */
-        }
-
-        /* Pagination mode: vertical scrolling, allow taller height for multiple columns */
-        .facets-content.pagination-mode {
-          overflow-y: auto;
-          overflow-x: hidden;
-          max-height: none; /* Remove height constraint to allow columns to flow properly */
-          height: 300px; /* Fixed height to enable vertical scroll */
-        }
-
-        /* 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;
         }
         .facets-loader {
           --icon-width: 70px;
@@ -645,24 +459,14 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         }
 
         @media (max-width: 560px) {
-          section#more-facets.horizontal-scroll-mode,
-          section#more-facets.pagination-mode {
+          section#more-facets {
             max-height: 450px;
-            --facetsColumnCount: 1; /* Single column on mobile */
-            --facetsMaxHeight: none; /* Remove fixed height for vertical scrolling */
+            --facetsColumnCount: 1;
           }
-          /* On mobile, always use vertical scrolling regardless of mode */
-          .facets-content,
-          .facets-content.pagination-mode,
-          .facets-content.horizontal-scroll-mode {
+          .facets-content {
             overflow-y: auto;
-            overflow-x: hidden;
             height: 300px;
           }
-          .filter-input {
-            width: 120px;
-            font-size: 1.2rem;
-          }
         }
       `,
         ];
@@ -725,9 +529,6 @@ __decorate([
 __decorate([
     state()
 ], MoreFacetsContent.prototype, "unappliedFacetChanges", void 0);
-__decorate([
-    state()
-], MoreFacetsContent.prototype, "filterText", void 0);
 __decorate([
     state()
 ], MoreFacetsContent.prototype, "pageNumber", void 0);