@internetarchive/collection-browser 3.4.1-alpha-webdev7761.4 → 3.4.1

package/dist/src/collection-facets.js

@@ -43,7 +43,6 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             creator: false,
             collection: false,
             year: false,
-            clip_type: false,
             program: false,
             person: false,
             sponsor: false,
@@ -53,7 +52,8 @@ let CollectionFacets = class CollectionFacets extends LitElement {
          */
         this.allowedFacetCount = 6;
         this.handleExpandedDatePickerClosed = () => {
-            this.modalManager?.classList.remove('expanded-date-picker');
+            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
@@ -74,71 +74,70 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             loading: this.facetsLoading,
             managing: this.isManageView,
         });
-        const heading = this.isTvSearch
-            ? msg('Date Published')
-            : msg('Year Published');
         // 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}>
+        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}>
-                  ${heading} <span class="sr-only">${msg('range filter')}</span>
-                  ${this.expandDatePickerBtnTemplate}
-                </h3>
-                ${this.histogramTemplate}
-              </section>
+            ? 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>
+            : 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 (!this.parentCollections?.length)
+        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>
+        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}
-              >
-                ${this.collectionTitles?.get(collxn) ?? collxn}
-              </a>
+            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>
+        })}
+        </ul>
+      </section>
     `;
     }
     partOfCollectionClicked(e) {
-        this.analyticsHandler?.sendEvent({
+        var _a;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: analyticsCategories.default,
             action: analyticsActions.partOfCollectionClicked,
             label: e.target.dataset.id,
@@ -148,18 +147,19 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      * 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 = aggregation.first_bucket_year ?? aggregation.first_bucket_key;
-        const lastYear = aggregation.last_bucket_year ?? aggregation.last_bucket_key;
+        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 = aggregation.first_bucket_month ?? 1;
-        const lastMonth = aggregation.last_bucket_month ?? 12;
-        const yearInterval = aggregation.interval ?? 1;
-        const monthInterval = aggregation.interval_in_months ?? 12;
+        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) {
@@ -195,6 +195,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      * Opens a modal dialog containing an enlarged version of the date picker.
      */
     showDatePickerModal() {
+        var _a, _b, _c;
         const { histogramProps } = this;
         if (!histogramProps)
             return;
@@ -214,24 +215,24 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 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 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',
@@ -240,13 +241,13 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             closeOnBackdropClick: true, // TODO: want to fire analytics
             title: html `${msg('Select a date range')}`,
         });
-        this.modalManager?.classList.add('expanded-date-picker');
-        this.modalManager?.showModal({
+        (_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,
         });
-        this.analyticsHandler?.sendEvent({
+        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
             category: analyticsCategories.default,
             action: analyticsActions.histogramExpanded,
             label: window.location.href,
@@ -270,17 +271,18 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      */
     get expandDatePickerBtnTemplate() {
         return this.allowExpandingDatePicker && !this.facetsLoading
-            ? html `<button
-          class="expand-date-picker-btn"
-          aria-haspopup="dialog"
-          @click=${this.showDatePickerModal}
-        >
-          <span class="sr-only">${msg('Expand date histogram')}</span>
-          <span aria-hidden="true">${expandIcon}</span>
+            ? html `<button
+          class="expand-date-picker-btn"
+          aria-haspopup="dialog"
+          @click=${this.showDatePickerModal}
+        >
+          <span class="sr-only">${msg('Expand date histogram')}</span>
+          <span aria-hidden="true">${expandIcon}</span>
         </button>`
             : nothing;
     }
     get histogramTemplate() {
+        var _a, _b;
         if (this.histogramAggregationLoading) {
             return html ` <div class="histogram-loading-indicator">&hellip;</div> `;
         }
@@ -288,26 +290,26 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         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=${this.minSelectedDate ?? minDate}
-        .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
-        .updateDelay=${100}
-        .dateFormat=${dateFormat}
-        .tooltipDateFormat=${tooltipDateFormat}
-        .tooltipLabel=${tooltipLabel}
-        .binSnapping=${binSnapping}
-        .barScaling=${barScaling}
-        .bins=${buckets}
-        missingDataMessage="..."
+        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>
+            : 180}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      ></histogram-date-range>
     `;
     }
     /**
@@ -316,6 +318,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
     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);
@@ -329,9 +332,9 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             if (!aggregateFacetGroup)
                 return;
             // start with either the selected group if we have one, or the aggregate group
-            const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;
+            const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
             // attach the counts to the selected buckets
-            let bucketsWithCount = selectedFacetGroup?.buckets.map(bucket => {
+            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
                     ? {
@@ -339,7 +342,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                         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);
@@ -353,7 +356,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
              * - by-default we are showing 6 items
              * - additionally want to show all items (selected/suppressed) in page facet area
              */
-            let allowedFacetCount = Object.keys(selectedFacetGroup?.buckets || [])?.length;
+            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
             }
@@ -378,22 +381,14 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             // For TV creator facets, uppercase the display text
             if (facetKey === 'creator' && this.isTvSearch) {
                 bucketsWithCount.forEach(b => {
-                    b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
-                    const channelLabel = this.tvChannelAliases?.get(b.displayText);
+                    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 => {
-                    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);
@@ -411,11 +406,12 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             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 =
-                        lendingFacetDisplayNames[value] ?? value;
+                        (_a = lendingFacetDisplayNames[value]) !== null && _a !== void 0 ? _a : value;
                 }
                 return {
                     displayText,
@@ -436,8 +432,9 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
      */
     get aggregationFacetGroups() {
+        var _a;
         const facetGroups = [];
-        Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {
+        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;
@@ -448,19 +445,20 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             let castedBuckets = aggregation.getSortedBuckets(defaultFacetSort[option]);
             if (option === 'collection') {
                 // we are not showing fav- collections or certain deemphasized collections in facets
-                castedBuckets = castedBuckets?.filter(bucket => {
-                    const bucketKey = bucket?.key?.toString();
-                    return (!suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-'));
+                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 =
-                        lendingFacetDisplayNames[bucket.key] ??
-                            `${bucket.key}`;
+                        (_a = lendingFacetDisplayNames[bucket.key]) !== null && _a !== void 0 ? _a : `${bucket.key}`;
                 }
                 return {
                     displayText,
@@ -487,8 +485,8 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             return nothing;
         const { key } = facetGroup;
         const isOpen = this.openFacets[key];
-        const collapser = html `
-      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
+        const collapser = html `
+      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
     `;
         const toggleCollapsed = () => {
             const newOpenFacets = { ...this.openFacets };
@@ -498,40 +496,40 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         // 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}"
-        >
+        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>
+            : 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>`)}
+        return html `
+      ${map(Array(5).fill(null), () => html `<facet-tombstone-row></facet-tombstone-row>`)}
     `;
     }
     /**
@@ -556,39 +554,41 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         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"
+        return html `<button
+      class="more-link"
       @click=${() => {
+            var _a;
             this.showMoreFacetsModal(facetGroup, facetSort);
-            this.analyticsHandler?.sendEvent({
+            (_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...
+        }}
+      data-testid="more-link-btn"
+    >
+      More...
     </button>`;
     }
     async showMoreFacetsModal(facetGroup, sortedBy) {
-        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}
+        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,
@@ -596,9 +596,9 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 composed: true,
             });
             this.dispatchEvent(event);
-        }}
-      >
-      </more-facets-content>
+        }}
+      >
+      </more-facets-content>
     `;
         const config = new ModalConfig({
             bodyColor: '#fff',
@@ -607,12 +607,13 @@ let CollectionFacets = class CollectionFacets extends LitElement {
             closeOnBackdropClick: true, // TODO: want to fire analytics
             title: html `Select filters`,
         });
-        this.modalManager?.classList.add('more-search-facets');
-        this.modalManager?.showModal({
+        (_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: () => {
-                this.modalManager?.classList.remove('more-search-facets');
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('more-search-facets');
             },
         });
     }
@@ -620,12 +621,12 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      * 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}
+        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', {
@@ -634,134 +635,134 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 composed: true,
             });
             this.dispatchEvent(event);
-        }}
-      ></facets-template>
+        }}
+      ></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: 5.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 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;
-        }
+            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;
+        }
       `,
         ];
     }