@internetarchive/collection-browser 3.3.1 → 3.3.2

package/dist/src/collection-facets.js

@@ -1,873 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
-import { ref } from 'lit/directives/ref.js';
-import { msg } from '@lit/localize';
-import { classMap } from 'lit/directives/class-map.js';
-import '@internetarchive/histogram-date-range';
-import '@internetarchive/feature-feedback';
-import { ModalConfig, } from '@internetarchive/modal-manager';
-import chevronIcon from './assets/img/icons/chevron';
-import expandIcon from './assets/img/icons/expand';
-import { defaultFacetDisplayOrder, facetTitles, lendingFacetDisplayNames, lendingFacetKeysVisibility, suppressedCollections, defaultFacetSort, } from './models';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
-import { ExpandedDatePicker } from './expanded-date-picker';
-import { sortBucketsBySelectionState, updateSelectedFacetBucket, } from './utils/facet-utils';
-import '@internetarchive/histogram-date-range';
-import './collection-facets/more-facets-content';
-import './collection-facets/facets-template';
-import './collection-facets/facet-tombstone-row';
-import './expanded-date-picker';
-let CollectionFacets = class CollectionFacets extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.moreLinksVisible = true;
-        this.facetsLoading = false;
-        this.histogramAggregationLoading = false;
-        this.collapsableFacets = false;
-        this.showHistogramDatePicker = false;
-        this.allowExpandingDatePicker = false;
-        this.suppressMediatypeFacets = false;
-        this.parentCollections = [];
-        this.collectionPagePath = '/details/';
-        this.isManageView = false;
-        this.isTvSearch = false;
-        this.facetDisplayOrder = defaultFacetDisplayOrder;
-        this.openFacets = {
-            subject: false,
-            lending: false,
-            mediatype: false,
-            language: false,
-            creator: false,
-            collection: false,
-            year: false,
-            program: false,
-            person: false,
-            sponsor: false,
-        };
-        /**
-         * Maximum # of facet buckets to render per facet group
-         */
-        this.allowedFacetCount = 6;
-        this.handleExpandedDatePickerClosed = () => {
-            var _a;
-            (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('expanded-date-picker');
-        };
-        /**
-         * Dispatches a `histogramDateRangeUpdated` event with the date range copied from the
-         * input event.
-         *
-         * Arrow function to ensure `this` is always bound to the current component.
-         */
-        this.histogramDateRangeUpdated = (e) => {
-            const { minDate, maxDate } = e.detail;
-            const event = new CustomEvent('histogramDateRangeUpdated', {
-                detail: { minDate, maxDate },
-            });
-            this.dispatchEvent(event);
-        };
-    }
-    render() {
-        const containerClasses = classMap({
-            loading: this.facetsLoading,
-            managing: this.isManageView,
-        });
-        // Added data-testid for Playwright testing
-        // Using facet-group class and aria-labels is not ideal for Playwright locator
-        const datePickerLabelId = 'date-picker-label';
-        return html `
-      <div id="container" class=${containerClasses}>
-        ${this.showHistogramDatePicker &&
-            (this.histogramAggregation || this.histogramAggregationLoading)
-            ? html `
-              <section
-                class="facet-group"
-                aria-labelledby=${datePickerLabelId}
-                data-testid="facet-group-header-label-date-picker"
-              >
-                <h3 id=${datePickerLabelId}>
-                  Year Published <span class="sr-only">range filter</span>
-                  ${this.expandDatePickerBtnTemplate}
-                </h3>
-                ${this.histogramTemplate}
-              </section>
-            `
-            : nothing}
-        ${this.collectionPartOfTemplate}
-        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
-      </div>
-    `;
-    }
-    get collectionPartOfTemplate() {
-        var _a;
-        // We only display the "Part Of" section on collection pages
-        if (!((_a = this.parentCollections) === null || _a === void 0 ? void 0 : _a.length))
-            return nothing;
-        // Added data-testid for Playwright testing
-        // Using className and aria-labels is not ideal for Playwright locator
-        const headingId = 'partof-heading';
-        return html `
-      <section
-        class="facet-group partof-collections"
-        aria-labelledby=${headingId}
-        data-testid="facet-group-partof-collections"
-      >
-        <div class="facet-group-header">
-          <h3 id=${headingId}>${msg('Part Of')}</h3>
-        </div>
-        <ul>
-          ${map(this.parentCollections, collxn => {
-            var _a, _b;
-            const collectionURL = `${this.baseNavigationUrl}${this.collectionPagePath}${collxn}`;
-            return html ` <li>
-              <a
-                href=${collectionURL}
-                data-id=${collxn}
-                @click=${this.partOfCollectionClicked}
-              >
-                ${(_b = (_a = this.collectionTitles) === null || _a === void 0 ? void 0 : _a.get(collxn)) !== null && _b !== void 0 ? _b : collxn}
-              </a>
-            </li>`;
-        })}
-        </ul>
-      </section>
-    `;
-    }
-    partOfCollectionClicked(e) {
-        var _a;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.partOfCollectionClicked,
-            label: e.target.dataset.id,
-        });
-    }
-    /**
-     * Properties to pass into the date-picker histogram component
-     */
-    get histogramProps() {
-        var _a, _b, _c, _d, _e, _f;
-        const { histogramAggregation: aggregation } = this;
-        if (!aggregation)
-            return undefined;
-        // Normalize some properties from the raw aggregation
-        const firstYear = (_a = aggregation.first_bucket_year) !== null && _a !== void 0 ? _a : aggregation.first_bucket_key;
-        const lastYear = (_b = aggregation.last_bucket_year) !== null && _b !== void 0 ? _b : aggregation.last_bucket_key;
-        if (firstYear == null || lastYear == null)
-            return undefined; // We at least need a start/end year defined
-        const firstMonth = (_c = aggregation.first_bucket_month) !== null && _c !== void 0 ? _c : 1;
-        const lastMonth = (_d = aggregation.last_bucket_month) !== null && _d !== void 0 ? _d : 12;
-        const yearInterval = (_e = aggregation.interval) !== null && _e !== void 0 ? _e : 1;
-        const monthInterval = (_f = aggregation.interval_in_months) !== null && _f !== void 0 ? _f : 12;
-        const zeroPadMonth = (month) => month.toString().padStart(2, '0');
-        // The date picker is configured differently for TV search, allowing month-level resolution
-        if (this.isTvSearch) {
-            // Whether the bucket interval is less than a year
-            // (i.e., requires individual months to be handled & labeled)
-            const mustHandleMonths = monthInterval < 12;
-            return {
-                buckets: aggregation.buckets,
-                dateFormat: 'YYYY-MM',
-                tooltipDateFormat: mustHandleMonths ? 'MMM YYYY' : 'YYYY',
-                tooltipLabel: 'broadcast',
-                binSnapping: (mustHandleMonths
-                    ? 'month'
-                    : 'year'),
-                barScaling: 'linear',
-                minDate: `${firstYear}-${zeroPadMonth(firstMonth)}`,
-                maxDate: `${lastYear}-${zeroPadMonth(lastMonth + monthInterval - 1)}`,
-            };
-        }
-        // All other search types use the same configuration
-        return {
-            buckets: aggregation.buckets,
-            dateFormat: 'YYYY',
-            tooltipDateFormat: 'YYYY',
-            tooltipLabel: 'item',
-            binSnapping: 'year',
-            barScaling: 'logarithmic',
-            minDate: `${firstYear}`,
-            maxDate: `${lastYear + yearInterval - 1}`,
-        };
-    }
-    /**
-     * Opens a modal dialog containing an enlarged version of the date picker.
-     */
-    showDatePickerModal() {
-        var _a, _b, _c;
-        const { histogramProps } = this;
-        if (!histogramProps)
-            return;
-        const { buckets, dateFormat, tooltipDateFormat, tooltipLabel, binSnapping, barScaling, minDate, maxDate, } = histogramProps;
-        // Because the modal manager does not clear its DOM content after being closed,
-        // it may try to render the exact same date picker template when it is reopened.
-        // And because it isn't actually a descendent of this collection-facets component,
-        // changes to the template defined here may not trigger a reactive update to the date
-        // picker, resulting in it displaying a stale date range.
-        // This ref callback ensures that every time the date picker modal is opened, it will
-        // always propagate the most recent date range into the date picker regardless of
-        // whether Lit thinks the update is necessary.
-        const expandedDatePickerChanged = (elmt) => {
-            if (elmt && elmt instanceof ExpandedDatePicker) {
-                const expandedDatePicker = elmt;
-                expandedDatePicker.minSelectedDate = this.minSelectedDate;
-                expandedDatePicker.maxSelectedDate = this.maxSelectedDate;
-            }
-        };
-        const customModalContent = html `
-      <expanded-date-picker
-        ${ref(expandedDatePickerChanged)}
-        .minDate=${minDate}
-        .maxDate=${maxDate}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .customDateFormat=${dateFormat}
-        .customTooltipDateFormat=${tooltipDateFormat}
-        .customTooltipLabel=${tooltipLabel}
-        .binSnapping=${binSnapping}
-        .barScaling=${barScaling}
-        .buckets=${buckets}
-        .modalManager=${this.modalManager}
-        .analyticsHandler=${this.analyticsHandler}
-        @histogramDateRangeApplied=${this.histogramDateRangeUpdated}
-        @modalClosed=${this.handleExpandedDatePickerClosed}
-      ></expanded-date-picker>
-    `;
-        const config = new ModalConfig({
-            bodyColor: '#fff',
-            headerColor: '#194880',
-            showHeaderLogo: false,
-            closeOnBackdropClick: true, // TODO: want to fire analytics
-            title: html `${msg('Select a date range')}`,
-        });
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.add('expanded-date-picker');
-        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.showModal({
-            config,
-            customModalContent,
-            userClosedModalCallback: this.handleExpandedDatePickerClosed,
-        });
-        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
-            category: analyticsCategories.default,
-            action: analyticsActions.histogramExpanded,
-            label: window.location.href,
-        });
-    }
-    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);
-    }
-    /**
-     * Template for the "Expand" button to show the date picker modal, or
-     * `nothing` if that button should currently not be shown.
-     */
-    get expandDatePickerBtnTemplate() {
-        return this.allowExpandingDatePicker && !this.facetsLoading
-            ? html `<button
-          class="expand-date-picker-btn"
-          aria-hidden="true"
-          tabindex="-1"
-          @click=${this.showDatePickerModal}
-        >
-          ${expandIcon}
-        </button>`
-            : nothing;
-    }
-    get histogramTemplate() {
-        var _a, _b;
-        if (this.histogramAggregationLoading) {
-            return html ` <div class="histogram-loading-indicator">&hellip;</div> `;
-        }
-        const { histogramProps } = this;
-        if (!histogramProps)
-            return nothing;
-        const { buckets, dateFormat, tooltipDateFormat, tooltipLabel, binSnapping, barScaling, minDate, maxDate, } = histogramProps;
-        return html `
-      <histogram-date-range
-        class=${this.isTvSearch ? 'wide-inputs' : ''}
-        .minDate=${minDate}
-        .maxDate=${maxDate}
-        .minSelectedDate=${(_a = this.minSelectedDate) !== null && _a !== void 0 ? _a : minDate}
-        .maxSelectedDate=${(_b = this.maxSelectedDate) !== null && _b !== void 0 ? _b : maxDate}
-        .updateDelay=${100}
-        .dateFormat=${dateFormat}
-        .tooltipDateFormat=${tooltipDateFormat}
-        .tooltipLabel=${tooltipLabel}
-        .binSnapping=${binSnapping}
-        .barScaling=${barScaling}
-        .bins=${buckets}
-        missingDataMessage="..."
-        .width=${this.collapsableFacets && this.contentWidth
-            ? this.contentWidth
-            : 180}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      ></histogram-date-range>
-    `;
-    }
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    get mergedFacets() {
-        const facetGroups = [];
-        this.facetDisplayOrder.forEach(facetKey => {
-            var _a, _b;
-            if (facetKey === 'mediatype' && this.suppressMediatypeFacets)
-                return;
-            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);
-            });
-            /**
-             * 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
-            }
-            // For lending facets, only include a specific subset of buckets
-            if (facetKey === 'lending') {
-                bucketsWithCount = bucketsWithCount.filter(bucket => lendingFacetKeysVisibility[bucket.key]);
-            }
-            // Sort the FacetBuckets so that selected and hidden buckets come before the rest
-            sortBucketsBySelectionState(bucketsWithCount, defaultFacetSort[facetKey]);
-            // For mediatype facets, ensure the collection bucket is always shown if present
-            if (facetKey === 'mediatype') {
-                const collectionIndex = bucketsWithCount.findIndex(bucket => bucket.key === 'collection');
-                if (collectionIndex >= allowedFacetCount) {
-                    const [collectionBucket] = bucketsWithCount.splice(collectionIndex, 1);
-                    // If we're showing lots of selected facets, ensure we're not cutting off the last one
-                    if (allowedFacetCount > this.allowedFacetCount) {
-                        allowedFacetCount += 1;
-                    }
-                    bucketsWithCount.splice(allowedFacetCount - 1, 0, collectionBucket);
-                }
-            }
-            // For TV creator facets, uppercase the display text
-            if (facetKey === 'creator' && this.isTvSearch) {
-                bucketsWithCount.forEach(b => {
-                    var _a, _b, _c;
-                    b.displayText = (_b = ((_a = b.displayText) !== null && _a !== void 0 ? _a : b.key)) === null || _b === void 0 ? void 0 : _b.toLocaleUpperCase();
-                    const channelLabel = (_c = this.tvChannelAliases) === null || _c === void 0 ? void 0 : _c.get(b.displayText);
-                    if (channelLabel && channelLabel !== b.displayText) {
-                        b.extraNote = `(${channelLabel})`;
-                    }
-                });
-            }
-            // slice off how many items we want to show in page facet area
-            facetGroup.buckets = bucketsWithCount.slice(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;
-                let displayText = value;
-                // for lending facets, convert the key to a readable format
-                if (option === 'lending') {
-                    displayText =
-                        (_a = lendingFacetDisplayNames[value]) !== null && _a !== void 0 ? _a : 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, aggregation]) => {
-            // the year_histogram and date_histogram data is in a different format so can't be handled here
-            if (['year_histogram', 'date_histogram'].includes(key))
-                return;
-            const option = key;
-            const title = facetTitles[option];
-            if (!title)
-                return;
-            let castedBuckets = aggregation.getSortedBuckets(defaultFacetSort[option]);
-            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;
-                const bucketKey = bucket.key;
-                let displayText = `${bucket.key}`;
-                // for lending facets, convert the bucket key to a readable format
-                if (option === 'lending') {
-                    displayText =
-                        (_a = lendingFacetDisplayNames[bucket.key]) !== null && _a !== void 0 ? _a : `${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>
-    `;
-        const toggleCollapsed = () => {
-            const newOpenFacets = { ...this.openFacets };
-            newOpenFacets[key] = !isOpen;
-            this.openFacets = newOpenFacets;
-        };
-        // Added data-testid for Playwright testing
-        // Using className and aria-labels is not ideal for Playwright locator
-        const headerId = `facet-group-header-label-${facetGroup.key}`;
-        return html `
-      <section
-        class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
-        aria-labelledby=${headerId}
-        data-testid=${headerId}
-      >
-        <div class="facet-group-header">
-          <h3
-            id=${headerId}
-            @click=${toggleCollapsed}
-            @keyup=${toggleCollapsed}
-          >
-            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-            <span class="sr-only">filters</span>
-          </h3>
-        </div>
-        <div
-          class="facet-group-content ${isOpen ? 'open' : ''}"
-          data-testid="facet-group-content-${facetGroup.key}"
-        >
-          ${this.facetsLoading
-            ? this.getTombstoneFacetGroupTemplate()
-            : html `
-                ${this.getFacetTemplate(facetGroup)}
-                ${this.searchMoreFacetsLink(facetGroup)}
-              `}
-        </div>
-      </section>
-    `;
-    }
-    getTombstoneFacetGroupTemplate() {
-        // Render five tombstone rows
-        return html `
-      ${map(Array(5).fill(null), () => html `<facet-tombstone-row></facet-tombstone-row>`)}
-    `;
-    }
-    /**
-     * 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;
-        }
-        // We sort years in numeric order by default, rather than bucket count
-        const facetSort = defaultFacetSort[facetGroup.key];
-        // Added data-testid for Playwright testing
-        // Using the className is not ideal for Playwright locator
-        return html `<button
-      class="more-link"
-      @click=${() => {
-            var _a;
-            this.showMoreFacetsModal(facetGroup, facetSort);
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-                category: analyticsCategories.default,
-                action: analyticsActions.showMoreFacetsModal,
-                label: facetGroup.key,
-            });
-            this.dispatchEvent(new CustomEvent('showMoreFacets', { detail: facetGroup.key }));
-        }}
-      data-testid="more-link-btn"
-    >
-      More...
-    </button>`;
-    }
-    async showMoreFacetsModal(facetGroup, sortedBy) {
-        var _a, _b;
-        const customModalContent = html `
-      <more-facets-content
-        .analyticsHandler=${this.analyticsHandler}
-        .facetKey=${facetGroup.key}
-        .query=${this.query}
-        .identifiers=${this.identifiers}
-        .filterMap=${this.filterMap}
-        .pageSpecifierParams=${this.pageSpecifierParams}
-        .modalManager=${this.modalManager}
-        .searchService=${this.searchService}
-        .searchType=${this.searchType}
-        .collectionTitles=${this.collectionTitles}
-        .tvChannelAliases=${this.tvChannelAliases}
-        .selectedFacets=${this.selectedFacets}
-        .sortedBy=${sortedBy}
-        .isTvSearch=${this.isTvSearch}
-        @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, // TODO: want to fire analytics
-            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,
-            userClosedModalCallback: () => {
-                var _a;
-                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('more-search-facets');
-            },
-        });
-    }
-    /**
-     * Generate the list template for each bucket in a facet group
-     */
-    getFacetTemplate(facetGroup) {
-        return html `
-      <facets-template
-        .collectionPagePath=${this.collectionPagePath}
-        .facetGroup=${facetGroup}
-        .selectedFacets=${this.selectedFacets}
-        .collectionTitles=${this.collectionTitles}
-        @facetClick=${(e) => {
-            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, facetGroup.key, e.detail.bucket, true);
-            const event = new CustomEvent('facetsChanged', {
-                detail: this.selectedFacets,
-                bubbles: true,
-                composed: true,
-            });
-            this.dispatchEvent(event);
-        }}
-      ></facets-template>
-    `;
-    }
-    static get styles() {
-        return [
-            srOnlyStyle,
-            css `
-        a:link {
-          text-decoration: none;
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-        a:link:hover {
-          text-decoration: underline;
-        }
-
-        #container.loading {
-          opacity: 0.5;
-        }
-
-        #container.managing {
-          opacity: 0.3;
-        }
-
-        .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:not(:last-child) {
-          margin-bottom: 2rem;
-        }
-
-        .facet-group h3 {
-          margin-bottom: 0.7rem;
-        }
-
-        .facet-group.mobile h3 {
-          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;
-        }
-
-        .partof-collections ul {
-          list-style-type: none;
-          padding: 0;
-          font-size: 1.2rem;
-        }
-
-        h3 {
-          font-size: 1.4rem;
-          margin: 0;
-        }
-
-        .more-link {
-          font-size: 1.2rem;
-          text-decoration: none;
-          padding: 0;
-          margin-top: 0.25rem;
-          background: inherit;
-          border: 0;
-          color: var(--ia-theme-link-color, #4b64ff);
-          cursor: pointer;
-        }
-
-        #date-picker-label {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .expand-date-picker-btn {
-          margin: 0;
-          padding: 0;
-          border: 0;
-          appearance: none;
-          background: none;
-          cursor: pointer;
-        }
-
-        .expand-date-picker-btn > svg {
-          width: 14px;
-          height: 14px;
-        }
-
-        .sorting-icon {
-          height: 15px;
-          cursor: pointer;
-        }
-
-        histogram-date-range.wide-inputs {
-          --histogramDateRangeInputWidth: 4.8rem;
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "searchService", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionFacets.prototype, "searchType", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "aggregations", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "histogramAggregation", 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, "histogramAggregationLoading", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "selectedFacets", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "collapsableFacets", void 0);
-__decorate([
-    property({ type: Number })
-], CollectionFacets.prototype, "contentWidth", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "showHistogramDatePicker", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "allowExpandingDatePicker", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "suppressMediatypeFacets", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "query", void 0);
-__decorate([
-    property({ type: Array })
-], CollectionFacets.prototype, "identifiers", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "pageSpecifierParams", void 0);
-__decorate([
-    property({ type: Array })
-], CollectionFacets.prototype, "parentCollections", void 0);
-__decorate([
-    property({ type: Object })
-], CollectionFacets.prototype, "filterMap", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "baseNavigationUrl", void 0);
-__decorate([
-    property({ type: String })
-], CollectionFacets.prototype, "collectionPagePath", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "isManageView", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionFacets.prototype, "isTvSearch", void 0);
-__decorate([
-    property({ type: Array })
-], CollectionFacets.prototype, "facetDisplayOrder", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "modalManager", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "resizeObserver", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "featureFeedbackService", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "recaptchaManager", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "analyticsHandler", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "collectionTitles", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], CollectionFacets.prototype, "tvChannelAliases", void 0);
-__decorate([
-    state()
-], CollectionFacets.prototype, "openFacets", void 0);
-CollectionFacets = __decorate([
-    customElement('collection-facets')
-], CollectionFacets);
-export { CollectionFacets };
-//# sourceMappingURL=collection-facets.js.map