@internetarchive/collection-browser 2.4.1-e2e-test-2 → 2.5.1-alpha.0

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

@@ -1,94 +1,26 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { getDefaultSelectedFacets, } from '../models';
-import { FacetRow } from './facet-row';
-let FacetsTemplate = class FacetsTemplate extends LitElement {
-    facetClicked(e) {
-        const { bucket, negative } = e.detail;
-        if (bucket.state === 'none') {
-            this.facetUnchecked(bucket);
-        }
-        else {
-            this.facetChecked(bucket, negative);
-        }
-        this.dispatchFacetClickEvent(e.detail);
-    }
-    facetChecked(bucket, negative) {
-        const { facetGroup, selectedFacets } = this;
-        if (!facetGroup)
-            return;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = getDefaultSelectedFacets();
-        }
-        newFacets[facetGroup.key][bucket.key] = {
-            ...bucket,
-            state: FacetRow.getFacetState(true, negative),
-        };
-        this.selectedFacets = newFacets;
-        this.dispatchSelectedFacetsChanged();
-    }
-    facetUnchecked(bucket) {
-        const { facetGroup, selectedFacets } = this;
-        if (!facetGroup)
-            return;
-        let newFacets;
-        if (selectedFacets) {
-            newFacets = {
-                ...selectedFacets,
-            };
-        }
-        else {
-            newFacets = getDefaultSelectedFacets();
-        }
-        delete newFacets[facetGroup.key][bucket.key];
-        this.selectedFacets = newFacets;
-        this.dispatchSelectedFacetsChanged();
-    }
-    dispatchFacetClickEvent(detail) {
-        const event = new CustomEvent('facetClick', {
-            detail,
-            composed: true,
-        });
-        this.dispatchEvent(event);
-    }
-    dispatchSelectedFacetsChanged() {
-        const event = new CustomEvent('selectedFacetsChanged', {
-            detail: this.selectedFacets,
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(event);
-    }
-    get facetsTemplate() {
-        const { facetGroup } = this;
-        if (!facetGroup)
-            return nothing;
-        let facetBuckets = facetGroup.buckets;
-        /**
-         * sorting FacetBucket before render page / modal
-         * - first, selected items should be at top having sorted
-         * - second, suppressed/hidden items should be after selected having sorted
-         * - and then no-selected / not suppressed items should render having sorted
-         */
-        facetBuckets = [
-            ...facetBuckets
-                .filter(x => x.state === 'selected')
-                .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetBuckets
-                .filter(x => x.state === 'hidden')
-                .sort((a, b) => (a.count < b.count ? 1 : -1)),
-            ...facetBuckets.filter(x => x.state === 'none'),
-        ];
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import './facet-row';
+let FacetsTemplate = class FacetsTemplate extends LitElement {
+    facetClicked(e) {
+        this.dispatchFacetClickEvent(e.detail);
+    }
+    dispatchFacetClickEvent(detail) {
+        const event = new CustomEvent('facetClick', {
+            detail,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    get facetsTemplate() {
+        const { facetGroup } = this;
+        if (!facetGroup)
+            return nothing;
+        const facetBuckets = facetGroup.buckets;
         return html `
-      <div class="facets-on-${this.renderOn}">
+      <div class="facet-rows">
         ${repeat(facetBuckets, bucket => `${facetGroup.key}:${bucket.key}`, bucket => html `<facet-row
             .facetType=${facetGroup.key}
             .bucket=${bucket}
@@ -96,42 +28,19 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
             @facetClick=${this.facetClicked}
           ></facet-row>`)}
       </div>
-    `;
-    }
-    render() {
-        return html `${this.facetsTemplate}`;
-    }
-    static get styles() {
+    `;
+    }
+    updated() { console.log('facets-template updated'); }
+    render() {
+        return html `${this.facetsTemplate}`;
+    }
+    static get styles() {
+        const columnCount = css `var(--facetsColumnCount, 1)`;
+        const columnGap = css `var(--facetsColumnGap, 15px)`;
         return css `
-      @media (max-width: 560px) {
-        .facets-on-modal {
-          column-count: 1 !important;
-        }
-      }
-      .facets-on-modal {
-        column-gap: 15px;
-        column-count: 3;
-      }
-
-      ul.facet-list {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      ul.facet-list li {
-        margin-bottom: 0.2rem;
-        display: grid;
-      }
-
-      .facet-row {
-        display: flex;
-        font-weight: 500;
-        font-size: 1.2rem;
-        margin: 2.5px auto;
-        height: auto;
-        border-top: var(--facet-row-border-top, 1px solid transparent);
-        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
-        overflow: hidden;
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
       }
 
       a:link,
@@ -142,23 +51,17 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
       a:hover {
         text-decoration: underline;
       }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], FacetsTemplate.prototype, "facetGroup", void 0);
-__decorate([
-    property({ type: Object })
-], FacetsTemplate.prototype, "selectedFacets", void 0);
-__decorate([
-    property({ type: String })
-], FacetsTemplate.prototype, "renderOn", void 0);
-__decorate([
-    property({ type: Object })
-], FacetsTemplate.prototype, "collectionTitles", void 0);
-FacetsTemplate = __decorate([
-    customElement('facets-template')
-], FacetsTemplate);
-export { FacetsTemplate };
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "facetGroup", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "collectionTitles", void 0);
+FacetsTemplate = __decorate([
+    customElement('facets-template')
+], FacetsTemplate);
+export { FacetsTemplate };
 //# sourceMappingURL=facets-template.js.map

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":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport {\n  FacetGroup,\n  FacetBucket,\n  SelectedFacets,\n  getDefaultSelectedFacets,\n  FacetEventDetails,\n} from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport { FacetRow } from './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) renderOn?: string;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    const { bucket, negative } = e.detail;\n    if (bucket.state === 'none') {\n      this.facetUnchecked(bucket);\n    } else {\n      this.facetChecked(bucket, negative);\n    }\n\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private facetChecked(bucket: FacetBucket, negative: boolean) {\n    const { facetGroup, selectedFacets } = this;\n    if (!facetGroup) return;\n\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    newFacets[facetGroup.key][bucket.key] = {\n      ...bucket,\n      state: FacetRow.getFacetState(true, negative),\n    };\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private facetUnchecked(bucket: FacetBucket) {\n    const { facetGroup, selectedFacets } = this;\n    if (!facetGroup) return;\n\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = getDefaultSelectedFacets();\n    }\n    delete newFacets[facetGroup.key][bucket.key];\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private dispatchSelectedFacetsChanged() {\n    const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n      detail: this.selectedFacets,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    let facetBuckets = facetGroup.buckets as FacetBucket[];\n\n    /**\n     * sorting FacetBucket before render page / modal\n     * - first, selected items should be at top having sorted\n     * - second, suppressed/hidden items should be after selected having sorted\n     * - and then no-selected / not suppressed items should render having sorted\n     */\n    facetBuckets = [\n      ...facetBuckets\n        .filter(x => x.state === 'selected')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetBuckets\n        .filter(x => x.state === 'hidden')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetBuckets.filter(x => x.state === 'none'),\n    ];\n\n    return html`\n      <div class=\"facets-on-${this.renderOn}\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => html`<facet-row\n            .facetType=${facetGroup.key}\n            .bucket=${bucket}\n            .collectionTitles=${this.collectionTitles}\n            @facetClick=${this.facetClicked}\n          ></facet-row>`\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      @media (max-width: 560px) {\n        .facets-on-modal {\n          column-count: 1 !important;\n        }\n      }\n      .facets-on-modal {\n        column-gap: 15px;\n        column-count: 3;\n      }\n\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      ul.facet-list li {\n        margin-bottom: 0.2rem;\n        display: grid;\n      }\n\n      .facet-row {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 2.5px auto;\n        height: auto;\n        border-top: var(--facet-row-border-top, 1px solid transparent);\n        border-bottom: var(--facet-row-border-bottom, 1px solid transparent);\n        overflow: hidden;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\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;AAGrB,IAAa,cAAc,GAA3B,MAAa,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,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;yBACC,UAAU,CAAC,GAAG;sBACjB,MAAM;gCACI,IAAI,CAAC,gBAAgB;0BAC3B,IAAI,CAAC,YAAY;wBACnB,CACf;;KAEJ,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC;IAErD,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;AAjE6B;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,CAkE1B;SAlEY,cAAc","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\n\n    return html`\n      <div class=\"facet-rows\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => html`<facet-row\n            .facetType=${facetGroup.key}\n            .bucket=${bucket}\n            .collectionTitles=${this.collectionTitles}\n            @facetClick=${this.facetClicked}\n          ></facet-row>`\n        )}\n      </div>\n    `;\n  }\n\n  updated() { console.log('facets-template updated'); }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const columnCount = css`var(--facetsColumnCount, 1)`;\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\n\n    return css`\n      .facet-rows {\n        column-count: ${columnCount};\n        column-gap: ${columnGap};\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

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

@@ -1,74 +1,106 @@
-import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
-import { Aggregation, SearchServiceInterface, SearchType, AggregationSortType, FilterMap } from '@internetarchive/search-service';
-import type { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import { SelectedFacets, FacetGroup, FacetOption } from '../models';
-import type { CollectionTitles, PageSpecifierParams } from '../data-source/models';
-import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './more-facets-pagination';
-import './facets-template';
-import './toggle-switch';
-export declare class MoreFacetsContent extends LitElement {
-    facetKey?: FacetOption;
-    facetAggregationKey?: FacetOption;
-    query?: string;
-    filterMap?: FilterMap;
-    modalManager?: ModalManagerInterface;
-    searchService?: SearchServiceInterface;
-    searchType?: SearchType;
-    pageSpecifierParams?: PageSpecifierParams;
-    collectionTitles?: CollectionTitles;
-    selectedFacets?: SelectedFacets;
-    sortedBy: AggregationSortType;
-    analyticsHandler?: AnalyticsManagerInterface;
-    aggregations?: Record<string, Aggregation>;
-    facetGroup?: FacetGroup[];
-    facetGroupTitle?: String;
-    pageNumber: number;
-    /**
-     * Facets are loading on popup
-     */
-    facetsLoading: boolean;
-    paginationSize: number;
-    facetsType: string;
-    private facetsPerPage;
-    updated(changed: PropertyValues): void;
-    firstUpdated(): void;
-    /**
-     * Close more facets modal on Escape click
-     */
-    private setupEscapeListeners;
-    /**
-     * Whether facet requests are for the search_results page type (either defaulted or explicitly).
-     */
-    private get isSearchResultsPage();
-    /**
-     * Get specific facets data from search-service API based of currently query params
-     * - this.aggregations - hold result of search service and being used for further processing.
-     */
-    updateSpecificFacets(): Promise<void>;
-    private pageNumberClicked;
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    private get mergedFacets();
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    private get selectedFacetGroups();
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    private get aggregationFacetGroups();
-    private get getMoreFacetsTemplate();
-    private get loaderTemplate();
-    private get facetsPaginationTemplate();
-    private get footerTemplate();
-    private sortFacetAggregation;
-    private get getModalHeaderTemplate();
-    render(): TemplateResult<1>;
-    private applySearchFacetsClicked;
-    private cancelClick;
-    static get styles(): CSSResultGroup;
-}
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SearchServiceInterface, SearchType, AggregationSortType, FilterMap } from '@internetarchive/search-service';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { SelectedFacets, FacetOption } from '../models';
+import type { CollectionTitles, PageSpecifierParams } from '../data-source/models';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+import './toggle-switch';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: FacetOption;
+    query?: string;
+    filterMap?: FilterMap;
+    searchType?: SearchType;
+    pageSpecifierParams?: PageSpecifierParams;
+    collectionTitles?: CollectionTitles;
+    /**
+     * Maximum number of facets to show per page within the modal.
+     */
+    facetsPerPage: number;
+    /**
+     * Whether we are waiting for facet data to load.
+     * We begin with this set to true so that we show an initial loading indicator.
+     */
+    facetsLoading: boolean;
+    /**
+     * The set of pre-existing facet selections (including both selected & negated facets).
+     */
+    selectedFacets?: SelectedFacets;
+    sortedBy: AggregationSortType;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    /**
+     * The full set of aggregations received from the search service
+     */
+    private aggregations?;
+    /**
+     * A FacetGroup storing the full set of facet buckets to be shown on the dialog.
+     */
+    private facetGroup?;
+    /**
+     * An object holding any changes the patron has made to their facet selections
+     * within the modal dialog but which they have not yet applied. These are
+     * eventually merged into the existing `selectedFacets` when the patron applies
+     * their changes, or discarded if they cancel/close the dialog.
+     */
+    private unappliedFacetChanges;
+    /**
+     * Which page of facets we are showing.
+     */
+    private pageNumber;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Close more facets modal on Escape click
+     */
+    private setupEscapeListeners;
+    /**
+     * Whether facet requests are for the search_results page type (either defaulted or explicitly).
+     */
+    private get isSearchResultsPage();
+    /**
+     * Get specific facets data from search-service API based of currently query params
+     * - 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
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    private get selectedFacetGroup();
+    /**
+     * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    private get aggregationFacetGroup();
+    /**
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     */
+    private get facetGroupForCurrentPage();
+    private get moreFacetsTemplate();
+    private get loaderTemplate();
+    /**
+     * How many pages of facets to show in the modal pagination widget
+     */
+    private get paginationSize();
+    private get facetsPaginationTemplate();
+    private get footerTemplate();
+    private sortFacetAggregation;
+    private get modalHeaderTemplate();
+    render(): TemplateResult<1>;
+    private applySearchFacetsClicked;
+    private cancelClick;
+    static get styles(): CSSResultGroup;
+}