@internetarchive/collection-browser 3.3.2 → 3.3.4-alpha-webdev7761.0

package/dist/src/collection-facets.js

@@ -0,0 +1,884 @@
+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,
+            clip_type: 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}
+        <slot name="facets-top"></slot>
+        ${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-haspopup="dialog"
+          @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})`;
+                    }
+                });
+            }
+            // For TV clip_type facets, capitalize the display text
+            if (facetKey === 'clip_type') {
+                bucketsWithCount.forEach(b => {
+                    var _a;
+                    (_a = b.displayText) !== null && _a !== void 0 ? _a : (b.displayText = b.key);
+                    b.displayText =
+                        b.displayText.charAt(0).toLocaleUpperCase() +
+                            b.displayText.slice(1);
+                });
+            }
+            // 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