@internetarchive/collection-browser 0.3.5-alpha.1 → 0.3.6

package/dist/src/collection-facets.js

@@ -1,552 +1,552 @@
-import { __decorate } from "tslib";
-/* eslint-disable import/no-duplicates */
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
-import '@internetarchive/histogram-date-range';
-import '@internetarchive/feature-feedback';
-import '@internetarchive/collection-name-cache';
-import { ModalConfig, } from '@internetarchive/modal-manager';
-import chevronIcon from './assets/img/icons/chevron';
-import { facetDisplayOrder, facetTitles, lendingFacetDisplayNames, lendingFacetKeysVisibility, suppressedCollections, } from './models';
-import './collection-facets/more-facets-content';
-import './collection-facets/facets-template';
-import './collection-facets/facet-tombstone-row';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
-let CollectionFacets = class CollectionFacets extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.moreLinksVisible = true;
-        this.facetsLoading = false;
-        this.fullYearAggregationLoading = false;
-        this.collapsableFacets = false;
-        this.showHistogramDatePicker = false;
-        this.openFacets = {
-            subject: false,
-            lending: false,
-            mediatype: false,
-            language: false,
-            creator: false,
-            collection: false,
-            year: false,
-        };
-        this.allowedFacetCount = 6;
-    }
-    render() {
-        return html `
-      <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
-        ${(this.showHistogramDatePicker &&
-            this.fullYearsHistogramAggregation) ||
-            this.fullYearAggregationLoading
-            ? html `
-              <div class="facet-group">
-                <h1>Year Published <feature-feedback></feature-feedback></h1>
-                ${this.histogramTemplate}
-              </div>
-            `
-            : nothing}
-        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
-      </div>
-    `;
-    }
-    updated(changed) {
-        if (changed.has('selectedFacets')) {
-            this.dispatchFacetsChangedEvent();
-        }
-    }
-    // TODO: want to fire analytics?
-    dispatchFacetsChangedEvent() {
-        const event = new CustomEvent('facetsChanged', {
-            detail: this.selectedFacets,
-        });
-        this.dispatchEvent(event);
-    }
-    get currentYearsHistogramAggregation() {
-        var _a;
-        return (_a = this.aggregations) === null || _a === void 0 ? void 0 : _a.year_histogram;
-    }
-    get histogramTemplate() {
-        const { fullYearsHistogramAggregation } = this;
-        return this.fullYearAggregationLoading
-            ? html `<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
-            : html `
-          <histogram-date-range
-            .minDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.first_bucket_key}
-            .maxDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.last_bucket_key}
-            .minSelectedDate=${this.minSelectedDate}
-            .maxSelectedDate=${this.maxSelectedDate}
-            .updateDelay=${100}
-            missingDataMessage="..."
-            .width=${180}
-            .bins=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.buckets}
-            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-          ></histogram-date-range>
-        `;
-    }
-    histogramDateRangeUpdated(e) {
-        const { minDate, maxDate } = e.detail;
-        const event = new CustomEvent('histogramDateRangeUpdated', {
-            detail: { minDate, maxDate },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    get mergedFacets() {
-        const facetGroups = [];
-        facetDisplayOrder.forEach(facetKey => {
-            var _a, _b;
-            const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === facetKey);
-            const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === facetKey);
-            // if the user selected a facet, but it's not in the aggregation, we add it as-is
-            if (selectedFacetGroup && !aggregateFacetGroup) {
-                facetGroups.push(selectedFacetGroup);
-                return;
-            }
-            // if we don't have an aggregate facet group, don't add this to the list
-            if (!aggregateFacetGroup)
-                return;
-            // start with either the selected group if we have one, or the aggregate group
-            const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
-            // attach the counts to the selected buckets
-            let bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
-                const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
-                return selectedBucket
-                    ? {
-                        ...bucket,
-                        count: selectedBucket.count,
-                    }
-                    : bucket;
-            })) !== null && _a !== void 0 ? _a : [];
-            // append any additional buckets that were not selected
-            aggregateFacetGroup.buckets.forEach(bucket => {
-                const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
-                if (existingBucket)
-                    return;
-                bucketsWithCount.push(bucket);
-            });
-            // For lending facets, only include a specific subset of buckets
-            if (facetKey === 'lending') {
-                bucketsWithCount = bucketsWithCount.filter(bucket => lendingFacetKeysVisibility[bucket.key]);
-            }
-            /**
-             * render limited facet items on page facet area
-             *
-             * - by-default we are showing 6 items
-             * - additionally want to show all items (selected/suppressed) in page facet area
-             */
-            let allowedFacetCount = (_b = Object.keys((selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets) || [])) === null || _b === void 0 ? void 0 : _b.length;
-            if (allowedFacetCount < this.allowedFacetCount) {
-                allowedFacetCount = this.allowedFacetCount; // splice start index from 0th
-            }
-            // splice how many items we want to show in page facet area
-            facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);
-            facetGroups.push(facetGroup);
-        });
-        return facetGroups;
-    }
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    get selectedFacetGroups() {
-        if (!this.selectedFacets)
-            return [];
-        const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
-            const option = key;
-            const title = facetTitles[option];
-            const buckets = Object.entries(selectedFacets).map(([value, facetData]) => {
-                var _a, _b, _c;
-                let displayText = value;
-                // for selected languages, we store the language code instead of the
-                // display name, so look up the name from the mapping
-                if (option === 'language') {
-                    displayText =
-                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
-                }
-                // for lending facets, convert the key to a readable format
-                if (option === 'lending') {
-                    displayText =
-                        (_c = lendingFacetDisplayNames[value]) !== null && _c !== void 0 ? _c : value;
-                }
-                return {
-                    displayText,
-                    key: value,
-                    count: facetData.count,
-                    state: facetData.state,
-                };
-            });
-            return {
-                title,
-                key: option,
-                buckets,
-            };
-        });
-        return facetGroups;
-    }
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    get aggregationFacetGroups() {
-        var _a;
-        const facetGroups = [];
-        Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, buckets]) => {
-            // the year_histogram data is in a different format so can't be handled here
-            if (key === 'year_histogram')
-                return;
-            const option = key;
-            const title = facetTitles[option];
-            if (!title)
-                return;
-            let castedBuckets = buckets.buckets;
-            if (option === 'collection') {
-                // we are not showing fav- collections or certain deemphasized collections in facets
-                castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => {
-                    var _a;
-                    const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
-                    return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
-                });
-            }
-            const facetBuckets = castedBuckets.map(bucket => {
-                var _a, _b, _c;
-                let bucketKey = bucket.key;
-                let displayText = `${bucket.key}`;
-                // for languages, we need to search by language code instead of the
-                // display name, which is what we get from the search engine result
-                if (option === 'language') {
-                    // const languageCodeKey = languageToCodeMap[bucket.key];
-                    bucketKey =
-                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
-                    // bucketKey = languageCodeKey ?? bucket.key;
-                }
-                // for lending facets, convert the bucket key to a readable format
-                if (option === 'lending') {
-                    displayText =
-                        (_c = lendingFacetDisplayNames[bucket.key]) !== null && _c !== void 0 ? _c : `${bucket.key}`;
-                }
-                return {
-                    displayText,
-                    key: `${bucketKey}`,
-                    count: bucket.doc_count,
-                    state: 'none',
-                };
-            });
-            const group = {
-                title,
-                key: option,
-                buckets: facetBuckets,
-            };
-            facetGroups.push(group);
-        });
-        return facetGroups;
-    }
-    /**
-     * Generate the template for a facet group with a header and the collapsible
-     * chevron for the mobile view
-     */
-    getFacetGroupTemplate(facetGroup) {
-        if (!this.facetsLoading && facetGroup.buckets.length === 0)
-            return nothing;
-        const { key } = facetGroup;
-        const isOpen = this.openFacets[key];
-        const collapser = html `
-      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
-    `;
-        return html `
-      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
-        <div class="facet-group-header">
-          <h1
-            @click=${() => {
-            const newOpenFacets = { ...this.openFacets };
-            newOpenFacets[key] = !isOpen;
-            this.openFacets = newOpenFacets;
-        }}
-            @keyup=${() => {
-            const newOpenFacets = { ...this.openFacets };
-            newOpenFacets[key] = !isOpen;
-            this.openFacets = newOpenFacets;
-        }}
-          >
-            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-          </h1>
-          ${this.facetsLoading
-            ? nothing
-            : this.moreFacetsSortingIcon(facetGroup)}
-        </div>
-        <div class="facet-group-content ${isOpen ? 'open' : ''}">
-          ${this.facetsLoading
-            ? this.getTombstoneFacetGroupTemplate()
-            : html `
-                ${this.getFacetTemplate(facetGroup)}
-                ${this.searchMoreFacetsLink(facetGroup)}
-              `}
-        </div>
-      </div>
-    `;
-    }
-    getTombstoneFacetGroupTemplate() {
-        // Render five tombstone rows
-        return html `
-      ${map(Array(5).fill(null), () => html `<facet-tombstone-row></facet-tombstone-row>`)}
-    `;
-    }
-    moreFacetsSortingIcon(facetGroup) {
-        // Display the sorting icon for every facet group except lending
-        return facetGroup.key === 'lending'
-            ? nothing
-            : html `
-          <input
-            class="sorting-icon"
-            type="image"
-            @click=${() => this.showMoreFacetsModal(facetGroup, 'alpha')}
-            src="https://archive.org/images/filter-count.png"
-            alt="Sort alphabetically"
-          />
-        `;
-    }
-    /**
-     * Generate the More... link button just below the facets group
-     *
-     * TODO: want to fire analytics?
-     */
-    searchMoreFacetsLink(facetGroup) {
-        // Don't render More... links for FTS searches
-        if (!this.moreLinksVisible) {
-            return nothing;
-        }
-        // Don't render More... links for lending facets
-        if (facetGroup.key === 'lending') {
-            return nothing;
-        }
-        // Don't render More... link if the number of facets < this.allowedFacetCount
-        if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {
-            return nothing;
-        }
-        return html `<button
-      class="more-link"
-      @click=${() => {
-            var _a;
-            this.showMoreFacetsModal(facetGroup, 'count');
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-                category: analyticsCategories.default,
-                action: analyticsActions.showMoreFacetsModal,
-                label: facetGroup.key,
-            });
-            this.dispatchEvent(new CustomEvent('showMoreFacets', { detail: facetGroup.key }));
-        }}
-    >
-      More...
-    </button>`;
-    }
-    async showMoreFacetsModal(facetGroup, sortedBy) {
-        var _a, _b;
-        const facetAggrKey = facetGroup.key;
-        const customModalContent = html `
-      <more-facets-content
-        .analyticsHandler=${this.analyticsHandler}
-        .facetKey=${facetGroup.key}
-        .facetAggregationKey=${facetAggrKey}
-        .fullQuery=${this.fullQuery}
-        .modalManager=${this.modalManager}
-        .searchService=${this.searchService}
-        .searchType=${this.searchType}
-        .collectionNameCache=${this.collectionNameCache}
-        .languageCodeHandler=${this.languageCodeHandler}
-        .selectedFacets=${this.selectedFacets}
-        .sortedBy=${sortedBy}
-        @facetsChanged=${(e) => {
-            const event = new CustomEvent('facetsChanged', {
-                detail: e.detail,
-                bubbles: true,
-                composed: true,
-            });
-            this.dispatchEvent(event);
-        }}
-      >
-      </more-facets-content>
-    `;
-        const config = new ModalConfig({
-            bodyColor: '#fff',
-            headerColor: '#194880',
-            showHeaderLogo: false,
-            closeOnBackdropClick: true,
-            title: html `Select filters`,
-        });
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('more-search-facets');
-        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
-            config,
-            customModalContent,
-        });
-    }
-    /**
-     * Generate the list template for each bucket in a facet group
-     */
-    getFacetTemplate(facetGroup) {
-        return html `
-      <facets-template
-        .facetGroup=${facetGroup}
-        .selectedFacets=${this.selectedFacets}
-        .renderOn=${'page'}
-        .collectionNameCache=${this.collectionNameCache}
-        @selectedFacetsChanged=${(e) => {
-            const event = new CustomEvent('facetsChanged', {
-                detail: e.detail,
-                bubbles: true,
-                composed: true,
-            });
-            this.dispatchEvent(event);
-        }}
-      ></facets-template>
-    `;
-    }
-    static get styles() {
-        return css `
-      #container.loading {
-        opacity: 0.5;
-      }
-
-      .histogram-loading-indicator {
-        width: 100%;
-        height: 2.25rem;
-        margin-top: 1.75rem;
-        font-size: 1.4rem;
-        text-align: center;
-      }
-
-      .collapser {
-        display: inline-block;
-        cursor: pointer;
-        width: 10px;
-        height: 10px;
-      }
-
-      .collapser svg {
-        transition: transform 0.2s ease-in-out;
-      }
-
-      .collapser.open svg {
-        transform: rotate(90deg);
-      }
-
-      .facet-group {
-        margin-bottom: 2rem;
-      }
-
-      .facet-group h1 {
-        margin-bottom: 0.7rem;
-      }
-
-      .facet-group.mobile h1 {
-        cursor: pointer;
-      }
-
-      .facet-group-header {
-        display: flex;
-        margin-bottom: 0.7rem;
-        justify-content: space-between;
-        border-bottom: 1px solid rgb(232, 232, 232);
-      }
-
-      .facet-group-content {
-        transition: max-height 0.2s ease-in-out;
-      }
-
-      .facet-group.mobile .facet-group-content {
-        max-height: 0;
-        overflow: hidden;
-      }
-
-      .facet-group.mobile .facet-group-content.open {
-        max-height: 2000px;
-      }
-
-      h1 {
-        font-size: 1.4rem;
-        font-weight: 200
-        padding-bottom: 3px;
-        margin: 0;
-      }
-
-      .more-link {
-        font-size: 1.2rem;
-        text-decoration: none;
-        padding: 0;
-        background: inherit;
-        border: 0;
-        color: var(--ia-theme-link-color, #4b64ff);
-        cursor: pointer;
-      }
-
-      .sorting-icon {
-        height: 15px;
-        cursor: pointer;
-      }
-    `;
-    }
-};
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "searchService", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "searchType", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "aggregations", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "fullYearsHistogramAggregation", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "minSelectedDate", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "maxSelectedDate", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "moreLinksVisible", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "facetsLoading", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "fullYearAggregationLoading", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "selectedFacets", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "collapsableFacets", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "showHistogramDatePicker", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "fullQuery", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "analyticsHandler", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "languageCodeHandler", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "collectionNameCache", void 0);
-__decorate([
-    property({ type: Function })
-], CollectionFacets.prototype, "onFacetClick", void 0);
-__decorate([
-    state()
-], CollectionFacets.prototype, "openFacets", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "allowedFacetCount", void 0);
-CollectionFacets = __decorate([
-    customElement('collection-facets')
-], CollectionFacets);
-export { CollectionFacets };
+import { __decorate } from "tslib";
+/* eslint-disable import/no-duplicates */
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import '@internetarchive/histogram-date-range';
+import '@internetarchive/feature-feedback';
+import '@internetarchive/collection-name-cache';
+import { ModalConfig, } from '@internetarchive/modal-manager';
+import chevronIcon from './assets/img/icons/chevron';
+import { facetDisplayOrder, facetTitles, lendingFacetDisplayNames, lendingFacetKeysVisibility, suppressedCollections, } from './models';
+import './collection-facets/more-facets-content';
+import './collection-facets/facets-template';
+import './collection-facets/facet-tombstone-row';
+import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
+let CollectionFacets = class CollectionFacets extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.moreLinksVisible = true;
+        this.facetsLoading = false;
+        this.fullYearAggregationLoading = false;
+        this.collapsableFacets = false;
+        this.showHistogramDatePicker = false;
+        this.openFacets = {
+            subject: false,
+            lending: false,
+            mediatype: false,
+            language: false,
+            creator: false,
+            collection: false,
+            year: false,
+        };
+        this.allowedFacetCount = 6;
+    }
+    render() {
+        return html `
+      <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
+        ${(this.showHistogramDatePicker &&
+            this.fullYearsHistogramAggregation) ||
+            this.fullYearAggregationLoading
+            ? html `
+              <div class="facet-group">
+                <h1>Year Published <feature-feedback></feature-feedback></h1>
+                ${this.histogramTemplate}
+              </div>
+            `
+            : nothing}
+        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('selectedFacets')) {
+            this.dispatchFacetsChangedEvent();
+        }
+    }
+    // TODO: want to fire analytics?
+    dispatchFacetsChangedEvent() {
+        const event = new CustomEvent('facetsChanged', {
+            detail: this.selectedFacets,
+        });
+        this.dispatchEvent(event);
+    }
+    get currentYearsHistogramAggregation() {
+        var _a;
+        return (_a = this.aggregations) === null || _a === void 0 ? void 0 : _a.year_histogram;
+    }
+    get histogramTemplate() {
+        const { fullYearsHistogramAggregation } = this;
+        return this.fullYearAggregationLoading
+            ? html `<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
+            : html `
+          <histogram-date-range
+            .minDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.first_bucket_key}
+            .maxDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.last_bucket_key}
+            .minSelectedDate=${this.minSelectedDate}
+            .maxSelectedDate=${this.maxSelectedDate}
+            .updateDelay=${100}
+            missingDataMessage="..."
+            .width=${180}
+            .bins=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.buckets}
+            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+          ></histogram-date-range>
+        `;
+    }
+    histogramDateRangeUpdated(e) {
+        const { minDate, maxDate } = e.detail;
+        const event = new CustomEvent('histogramDateRangeUpdated', {
+            detail: { minDate, maxDate },
+        });
+        this.dispatchEvent(event);
+    }
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    get mergedFacets() {
+        const facetGroups = [];
+        facetDisplayOrder.forEach(facetKey => {
+            var _a, _b;
+            const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === facetKey);
+            const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === facetKey);
+            // if the user selected a facet, but it's not in the aggregation, we add it as-is
+            if (selectedFacetGroup && !aggregateFacetGroup) {
+                facetGroups.push(selectedFacetGroup);
+                return;
+            }
+            // if we don't have an aggregate facet group, don't add this to the list
+            if (!aggregateFacetGroup)
+                return;
+            // start with either the selected group if we have one, or the aggregate group
+            const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
+            // attach the counts to the selected buckets
+            let bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
+                const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
+                return selectedBucket
+                    ? {
+                        ...bucket,
+                        count: selectedBucket.count,
+                    }
+                    : bucket;
+            })) !== null && _a !== void 0 ? _a : [];
+            // append any additional buckets that were not selected
+            aggregateFacetGroup.buckets.forEach(bucket => {
+                const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
+                if (existingBucket)
+                    return;
+                bucketsWithCount.push(bucket);
+            });
+            // For lending facets, only include a specific subset of buckets
+            if (facetKey === 'lending') {
+                bucketsWithCount = bucketsWithCount.filter(bucket => lendingFacetKeysVisibility[bucket.key]);
+            }
+            /**
+             * render limited facet items on page facet area
+             *
+             * - by-default we are showing 6 items
+             * - additionally want to show all items (selected/suppressed) in page facet area
+             */
+            let allowedFacetCount = (_b = Object.keys((selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets) || [])) === null || _b === void 0 ? void 0 : _b.length;
+            if (allowedFacetCount < this.allowedFacetCount) {
+                allowedFacetCount = this.allowedFacetCount; // splice start index from 0th
+            }
+            // splice how many items we want to show in page facet area
+            facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);
+            facetGroups.push(facetGroup);
+        });
+        return facetGroups;
+    }
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    get selectedFacetGroups() {
+        if (!this.selectedFacets)
+            return [];
+        const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
+            const option = key;
+            const title = facetTitles[option];
+            const buckets = Object.entries(selectedFacets).map(([value, facetData]) => {
+                var _a, _b, _c;
+                let displayText = value;
+                // for selected languages, we store the language code instead of the
+                // display name, so look up the name from the mapping
+                if (option === 'language') {
+                    displayText =
+                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : value;
+                }
+                // for lending facets, convert the key to a readable format
+                if (option === 'lending') {
+                    displayText =
+                        (_c = lendingFacetDisplayNames[value]) !== null && _c !== void 0 ? _c : value;
+                }
+                return {
+                    displayText,
+                    key: value,
+                    count: facetData.count,
+                    state: facetData.state,
+                };
+            });
+            return {
+                title,
+                key: option,
+                buckets,
+            };
+        });
+        return facetGroups;
+    }
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    get aggregationFacetGroups() {
+        var _a;
+        const facetGroups = [];
+        Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, buckets]) => {
+            // the year_histogram data is in a different format so can't be handled here
+            if (key === 'year_histogram')
+                return;
+            const option = key;
+            const title = facetTitles[option];
+            if (!title)
+                return;
+            let castedBuckets = buckets.buckets;
+            if (option === 'collection') {
+                // we are not showing fav- collections or certain deemphasized collections in facets
+                castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => {
+                    var _a;
+                    const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
+                    return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
+                });
+            }
+            const facetBuckets = castedBuckets.map(bucket => {
+                var _a, _b, _c;
+                let bucketKey = bucket.key;
+                let displayText = `${bucket.key}`;
+                // for languages, we need to search by language code instead of the
+                // display name, which is what we get from the search engine result
+                if (option === 'language') {
+                    // const languageCodeKey = languageToCodeMap[bucket.key];
+                    bucketKey =
+                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
+                    // bucketKey = languageCodeKey ?? bucket.key;
+                }
+                // for lending facets, convert the bucket key to a readable format
+                if (option === 'lending') {
+                    displayText =
+                        (_c = lendingFacetDisplayNames[bucket.key]) !== null && _c !== void 0 ? _c : `${bucket.key}`;
+                }
+                return {
+                    displayText,
+                    key: `${bucketKey}`,
+                    count: bucket.doc_count,
+                    state: 'none',
+                };
+            });
+            const group = {
+                title,
+                key: option,
+                buckets: facetBuckets,
+            };
+            facetGroups.push(group);
+        });
+        return facetGroups;
+    }
+    /**
+     * Generate the template for a facet group with a header and the collapsible
+     * chevron for the mobile view
+     */
+    getFacetGroupTemplate(facetGroup) {
+        if (!this.facetsLoading && facetGroup.buckets.length === 0)
+            return nothing;
+        const { key } = facetGroup;
+        const isOpen = this.openFacets[key];
+        const collapser = html `
+      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
+    `;
+        return html `
+      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
+        <div class="facet-group-header">
+          <h1
+            @click=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+        }}
+            @keyup=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+        }}
+          >
+            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
+          </h1>
+          ${this.facetsLoading
+            ? nothing
+            : this.moreFacetsSortingIcon(facetGroup)}
+        </div>
+        <div class="facet-group-content ${isOpen ? 'open' : ''}">
+          ${this.facetsLoading
+            ? this.getTombstoneFacetGroupTemplate()
+            : html `
+                ${this.getFacetTemplate(facetGroup)}
+                ${this.searchMoreFacetsLink(facetGroup)}
+              `}
+        </div>
+      </div>
+    `;
+    }
+    getTombstoneFacetGroupTemplate() {
+        // Render five tombstone rows
+        return html `
+      ${map(Array(5).fill(null), () => html `<facet-tombstone-row></facet-tombstone-row>`)}
+    `;
+    }
+    moreFacetsSortingIcon(facetGroup) {
+        // Display the sorting icon for every facet group except lending
+        return facetGroup.key === 'lending'
+            ? nothing
+            : html `
+          <input
+            class="sorting-icon"
+            type="image"
+            @click=${() => this.showMoreFacetsModal(facetGroup, 'alpha')}
+            src="https://archive.org/images/filter-count.png"
+            alt="Sort alphabetically"
+          />
+        `;
+    }
+    /**
+     * Generate the More... link button just below the facets group
+     *
+     * TODO: want to fire analytics?
+     */
+    searchMoreFacetsLink(facetGroup) {
+        // Don't render More... links for FTS searches
+        if (!this.moreLinksVisible) {
+            return nothing;
+        }
+        // Don't render More... links for lending facets
+        if (facetGroup.key === 'lending') {
+            return nothing;
+        }
+        // Don't render More... link if the number of facets < this.allowedFacetCount
+        if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {
+            return nothing;
+        }
+        return html `<button
+      class="more-link"
+      @click=${() => {
+            var _a;
+            this.showMoreFacetsModal(facetGroup, 'count');
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: analyticsCategories.default,
+                action: analyticsActions.showMoreFacetsModal,
+                label: facetGroup.key,
+            });
+            this.dispatchEvent(new CustomEvent('showMoreFacets', { detail: facetGroup.key }));
+        }}
+    >
+      More...
+    </button>`;
+    }
+    async showMoreFacetsModal(facetGroup, sortedBy) {
+        var _a, _b;
+        const facetAggrKey = facetGroup.key;
+        const customModalContent = html `
+      <more-facets-content
+        .analyticsHandler=${this.analyticsHandler}
+        .facetKey=${facetGroup.key}
+        .facetAggregationKey=${facetAggrKey}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
+        .searchService=${this.searchService}
+        .searchType=${this.searchType}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .selectedFacets=${this.selectedFacets}
+        .sortedBy=${sortedBy}
+        @facetsChanged=${(e) => {
+            const event = new CustomEvent('facetsChanged', {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            });
+            this.dispatchEvent(event);
+        }}
+      >
+      </more-facets-content>
+    `;
+        const config = new ModalConfig({
+            bodyColor: '#fff',
+            headerColor: '#194880',
+            showHeaderLogo: false,
+            closeOnBackdropClick: true,
+            title: html `Select filters`,
+        });
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('more-search-facets');
+        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
+            config,
+            customModalContent,
+        });
+    }
+    /**
+     * Generate the list template for each bucket in a facet group
+     */
+    getFacetTemplate(facetGroup) {
+        return html `
+      <facets-template
+        .facetGroup=${facetGroup}
+        .selectedFacets=${this.selectedFacets}
+        .renderOn=${'page'}
+        .collectionNameCache=${this.collectionNameCache}
+        @selectedFacetsChanged=${(e) => {
+            const event = new CustomEvent('facetsChanged', {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            });
+            this.dispatchEvent(event);
+        }}
+      ></facets-template>
+    `;
+    }
+    static get styles() {
+        return css `
+      #container.loading {
+        opacity: 0.5;
+      }
+
+      .histogram-loading-indicator {
+        width: 100%;
+        height: 2.25rem;
+        margin-top: 1.75rem;
+        font-size: 1.4rem;
+        text-align: center;
+      }
+
+      .collapser {
+        display: inline-block;
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+      }
+
+      .collapser svg {
+        transition: transform 0.2s ease-in-out;
+      }
+
+      .collapser.open svg {
+        transform: rotate(90deg);
+      }
+
+      .facet-group {
+        margin-bottom: 2rem;
+      }
+
+      .facet-group h1 {
+        margin-bottom: 0.7rem;
+      }
+
+      .facet-group.mobile h1 {
+        cursor: pointer;
+      }
+
+      .facet-group-header {
+        display: flex;
+        margin-bottom: 0.7rem;
+        justify-content: space-between;
+        border-bottom: 1px solid rgb(232, 232, 232);
+      }
+
+      .facet-group-content {
+        transition: max-height 0.2s ease-in-out;
+      }
+
+      .facet-group.mobile .facet-group-content {
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      .facet-group.mobile .facet-group-content.open {
+        max-height: 2000px;
+      }
+
+      h1 {
+        font-size: 1.4rem;
+        font-weight: 200
+        padding-bottom: 3px;
+        margin: 0;
+      }
+
+      .more-link {
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0;
+        background: inherit;
+        border: 0;
+        color: var(--ia-theme-link-color, #4b64ff);
+        cursor: pointer;
+      }
+
+      .sorting-icon {
+        height: 15px;
+        cursor: pointer;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "searchService", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "searchType", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "aggregations", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "fullYearsHistogramAggregation", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "minSelectedDate", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "moreLinksVisible", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "facetsLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "fullYearAggregationLoading", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "collapsableFacets", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "showHistogramDatePicker", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "fullQuery", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CollectionFacets.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CollectionFacets.prototype, "analyticsHandler", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "languageCodeHandler", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: Function })
+], CollectionFacets.prototype, "onFacetClick", void 0);
+__decorate([
+    state()
+], CollectionFacets.prototype, "openFacets", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CollectionFacets.prototype, "allowedFacetCount", void 0);
+CollectionFacets = __decorate([
+    customElement('collection-facets')
+], CollectionFacets);
+export { CollectionFacets };
 //# sourceMappingURL=collection-facets.js.map