@internetarchive/collection-browser 1.0.0 → 1.1.0

package/dist/src/collection-facets.js

@@ -3,17 +3,21 @@ 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 '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import '@internetarchive/collection-name-cache';
 import { ModalConfig, } from '@internetarchive/modal-manager';
 import chevronIcon from './assets/img/icons/chevron';
+import expandIcon from './assets/img/icons/expand';
 import { facetDisplayOrder, facetTitles, lendingFacetDisplayNames, lendingFacetKeysVisibility, suppressedCollections, defaultFacetSort, } from './models';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
 import './collection-facets/facet-tombstone-row';
+import './expanded-date-picker';
 import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
 import { srOnlyStyle } from './styles/sr-only';
+import { ExpandedDatePicker } from './expanded-date-picker';
 let CollectionFacets = class CollectionFacets extends LitElement {
     constructor() {
         super(...arguments);
@@ -22,6 +26,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         this.fullYearAggregationLoading = false;
         this.collapsableFacets = false;
         this.showHistogramDatePicker = false;
+        this.allowExpandingDatePicker = false;
         this.openFacets = {
             subject: false,
             lending: false,
@@ -35,6 +40,19 @@ let CollectionFacets = class CollectionFacets extends LitElement {
          * Maximum # of facet buckets to render per facet group
          */
         this.allowedFacetCount = 6;
+        /**
+         * 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 datePickerLabelId = 'date-picker-label';
@@ -46,6 +64,7 @@ let CollectionFacets = class CollectionFacets extends LitElement {
               <section class="facet-group" aria-labelledby=${datePickerLabelId}>
                 <h3 id=${datePickerLabelId}>
                   Year Published <span class="sr-only">range filter</span>
+                  ${this.expandDatePickerBtnTemplate}
                 </h3>
                 ${this.histogramTemplate}
               </section>
@@ -55,6 +74,59 @@ let CollectionFacets = class CollectionFacets extends LitElement {
       </div>
     `;
     }
+    /**
+     * Opens a modal dialog containing an enlarged version of the date picker.
+     */
+    showDatePickerModal() {
+        var _a, _b;
+        const { fullYearsHistogramAggregation } = this;
+        const minDate = fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.first_bucket_key;
+        const maxDate = fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.last_bucket_key;
+        const buckets = fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.buckets;
+        // 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}
+        .buckets=${buckets}
+        .modalManager=${this.modalManager}
+        @histogramDateRangeApplied=${this.histogramDateRangeUpdated}
+      ></expanded-date-picker>
+    `;
+        const config = new ModalConfig({
+            bodyColor: '#fff',
+            headerColor: '#194880',
+            showHeaderLogo: false,
+            closeOnBackdropClick: true,
+            title: html `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: () => {
+                var _a;
+                (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.classList.remove('expanded-date-picker');
+            },
+        });
+    }
     updated(changed) {
         if (changed.has('selectedFacets')) {
             this.dispatchFacetsChangedEvent();
@@ -67,6 +139,21 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         });
         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"
+          @click=${this.showDatePickerModal}
+        >
+          ${expandIcon}
+        </button>`
+            : nothing;
+    }
     get currentYearsHistogramAggregation() {
         var _a;
         return (_a = this.aggregations) === null || _a === void 0 ? void 0 : _a.year_histogram;
@@ -89,13 +176,6 @@ let CollectionFacets = class CollectionFacets extends LitElement {
           ></histogram-date-range>
         `;
     }
-    histogramDateRangeUpdated(e) {
-        const { minDate, maxDate } = e.detail;
-        const event = new CustomEvent('histogramDateRangeUpdated', {
-            detail: { minDate, maxDate },
-        });
-        this.dispatchEvent(event);
-    }
     /**
      * Combines the selected facets with the aggregations to create a single list of facets
      */
@@ -464,6 +544,25 @@ let CollectionFacets = class CollectionFacets extends LitElement {
           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;
@@ -508,6 +607,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CollectionFacets.prototype, "showHistogramDatePicker", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "allowExpandingDatePicker", void 0);
 __decorate([
     property({ type: String })
 ], CollectionFacets.prototype, "query", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport type {\n  Aggregation,\n  AggregationSortType,\n  Bucket,\n  FilterMap,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport '@internetarchive/histogram-date-range';\nimport '@internetarchive/feature-feedback';\nimport '@internetarchive/collection-name-cache';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport {\n  ModalConfig,\n  ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';\nimport type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport chevronIcon from './assets/img/icons/chevron';\nimport {\n  FacetOption,\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  facetDisplayOrder,\n  facetTitles,\n  lendingFacetDisplayNames,\n  lendingFacetKeysVisibility,\n  LendingFacetKey,\n  suppressedCollections,\n  defaultFacetSort,\n} from './models';\nimport './collection-facets/more-facets-content';\nimport './collection-facets/facets-template';\nimport './collection-facets/facet-tombstone-row';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\nimport { srOnlyStyle } from './styles/sr-only';\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Boolean }) moreLinksVisible = true;\n\n  @property({ type: Boolean }) facetsLoading = false;\n\n  @property({ type: Boolean }) fullYearAggregationLoading = false;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: Boolean }) collapsableFacets = false;\n\n  @property({ type: Boolean }) showHistogramDatePicker = false;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object, attribute: false })\n  featureFeedbackService?: FeatureFeedbackServiceInterface;\n\n  @property({ type: Object, attribute: false })\n  recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @state() openFacets: Record<FacetOption, boolean> = {\n    subject: false,\n    lending: false,\n    mediatype: false,\n    language: false,\n    creator: false,\n    collection: false,\n    year: false,\n  };\n\n  /**\n   * Maximum # of facet buckets to render per facet group\n   */\n  private allowedFacetCount = 6;\n\n  render() {\n    const datePickerLabelId = 'date-picker-label';\n    return html`\n      <div id=\"container\" class=\"${this.facetsLoading ? 'loading' : ''}\">\n        ${this.showHistogramDatePicker &&\n        (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)\n          ? html`\n              <section class=\"facet-group\" aria-labelledby=${datePickerLabelId}>\n                <h3 id=${datePickerLabelId}>\n                  Year Published <span class=\"sr-only\">range filter</span>\n                </h3>\n                ${this.histogramTemplate}\n              </section>\n            `\n          : nothing}\n        ${this.mergedFacets.map(facetGroup =>\n          this.getFacetGroupTemplate(facetGroup)\n        )}\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('selectedFacets')) {\n      this.dispatchFacetsChangedEvent();\n    }\n  }\n\n  // TODO: want to fire analytics?\n  private dispatchFacetsChangedEvent() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramTemplate() {\n    const { fullYearsHistogramAggregation } = this;\n    return this.fullYearAggregationLoading\n      ? html`<div class=\"histogram-loading-indicator\">&hellip;</div>` // Ellipsis block\n      : html`\n          <histogram-date-range\n            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n            .minSelectedDate=${this.minSelectedDate}\n            .maxSelectedDate=${this.maxSelectedDate}\n            .updateDelay=${100}\n            missingDataMessage=\"...\"\n            .width=${180}\n            .bins=${fullYearsHistogramAggregation?.buckets as number[]}\n            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n          ></histogram-date-range>\n        `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    const event = new CustomEvent('histogramDateRangeUpdated', {\n      detail: { minDate, maxDate },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      let bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          return selectedBucket\n            ? {\n                ...bucket,\n                count: selectedBucket.count,\n              }\n            : bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n\n      // For lending facets, only include a specific subset of buckets\n      if (facetKey === 'lending') {\n        bucketsWithCount = bucketsWithCount.filter(\n          bucket => lendingFacetKeysVisibility[bucket.key as LendingFacetKey]\n        );\n      }\n\n      /**\n       * render limited facet items on page facet area\n       *\n       * - by-default we are showing 6 items\n       * - additionally want to show all items (selected/suppressed) in page facet area\n       */\n      let allowedFacetCount = Object.keys(\n        (selectedFacetGroup?.buckets as []) || []\n      )?.length;\n      if (allowedFacetCount < this.allowedFacetCount) {\n        allowedFacetCount = this.allowedFacetCount; // splice start index from 0th\n      }\n\n      // splice how many items we want to show in page facet area\n      facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, facetData]) => {\n            let displayText: string = value;\n            // for lending facets, convert the key to a readable format\n            if (option === 'lending') {\n              displayText =\n                lendingFacetDisplayNames[value as LendingFacetKey] ?? value;\n            }\n            return {\n              displayText,\n              key: value,\n              count: facetData.count,\n              state: facetData.state,\n            };\n          }\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {\n      // the year_histogram data is in a different format so can't be handled here\n      if (key === 'year_histogram') return;\n\n      const option = key as FacetOption;\n      const title = facetTitles[option];\n      if (!title) return;\n\n      let castedBuckets = aggregation.getSortedBuckets(\n        defaultFacetSort[option]\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n      }\n\n      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {\n        const bucketKey = bucket.key;\n        let displayText = `${bucket.key}`;\n        // for lending facets, convert the bucket key to a readable format\n        if (option === 'lending') {\n          displayText =\n            lendingFacetDisplayNames[bucket.key as LendingFacetKey] ??\n            `${bucket.key}`;\n        }\n        return {\n          displayText,\n          key: `${bucketKey}`,\n          count: bucket.doc_count,\n          state: 'none',\n        };\n      });\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  /**\n   * Generate the template for a facet group with a header and the collapsible\n   * chevron for the mobile view\n   */\n  private getFacetGroupTemplate(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;\n\n    const { key } = facetGroup;\n    const isOpen = this.openFacets[key];\n    const collapser = html`\n      <span class=\"collapser ${isOpen ? 'open' : ''}\"> ${chevronIcon} </span>\n    `;\n\n    const toggleCollapsed = () => {\n      const newOpenFacets = { ...this.openFacets };\n      newOpenFacets[key] = !isOpen;\n      this.openFacets = newOpenFacets;\n    };\n\n    const headerId = `facet-group-header-label-${facetGroup.key}`;\n    return html`\n      <section\n        class=\"facet-group ${this.collapsableFacets ? 'mobile' : ''}\"\n        aria-labelledby=${headerId}\n      >\n        <div class=\"facet-group-header\">\n          <h3\n            id=${headerId}\n            @click=${toggleCollapsed}\n            @keyup=${toggleCollapsed}\n          >\n            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}\n            <span class=\"sr-only\">filters</span>\n          </h3>\n        </div>\n        <div class=\"facet-group-content ${isOpen ? 'open' : ''}\">\n          ${this.facetsLoading\n            ? this.getTombstoneFacetGroupTemplate()\n            : html`\n                ${this.getFacetTemplate(facetGroup)}\n                ${this.searchMoreFacetsLink(facetGroup)}\n              `}\n        </div>\n      </section>\n    `;\n  }\n\n  private getTombstoneFacetGroupTemplate(): TemplateResult {\n    // Render five tombstone rows\n    return html`\n      ${map(\n        Array(5).fill(null),\n        () => html`<facet-tombstone-row></facet-tombstone-row>`\n      )}\n    `;\n  }\n\n  /**\n   * Generate the More... link button just below the facets group\n   *\n   * TODO: want to fire analytics?\n   */\n  private searchMoreFacetsLink(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    // Don't render More... links for FTS searches\n    if (!this.moreLinksVisible) {\n      return nothing;\n    }\n\n    // Don't render More... links for lending facets\n    if (facetGroup.key === 'lending') {\n      return nothing;\n    }\n\n    // Don't render More... link if the number of facets < this.allowedFacetCount\n    if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {\n      return nothing;\n    }\n\n    // We sort years in numeric order by default, rather than bucket count\n    const facetSort = defaultFacetSort[facetGroup.key];\n\n    return html`<button\n      class=\"more-link\"\n      @click=${() => {\n        this.showMoreFacetsModal(facetGroup, facetSort);\n        this.analyticsHandler?.sendEvent({\n          category: analyticsCategories.default,\n          action: analyticsActions.showMoreFacetsModal,\n          label: facetGroup.key,\n        });\n        this.dispatchEvent(\n          new CustomEvent('showMoreFacets', { detail: facetGroup.key })\n        );\n      }}\n    >\n      More...\n    </button>`;\n  }\n\n  async showMoreFacetsModal(\n    facetGroup: FacetGroup,\n    sortedBy: AggregationSortType\n  ): Promise<void> {\n    const facetAggrKey = facetGroup.key;\n\n    const customModalContent = html`\n      <more-facets-content\n        .analyticsHandler=${this.analyticsHandler}\n        .facetKey=${facetGroup.key}\n        .facetAggregationKey=${facetAggrKey}\n        .query=${this.query}\n        .filterMap=${this.filterMap}\n        .modalManager=${this.modalManager}\n        .searchService=${this.searchService}\n        .searchType=${this.searchType}\n        .collectionNameCache=${this.collectionNameCache}\n        .selectedFacets=${this.selectedFacets}\n        .sortedBy=${sortedBy}\n        @facetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      >\n      </more-facets-content>\n    `;\n\n    const config = new ModalConfig({\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true, // TODO: want to fire analytics\n      title: html`Select filters`,\n    });\n    this.modalManager?.classList.add('more-search-facets');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('more-search-facets');\n      },\n    });\n  }\n\n  /**\n   * Generate the list template for each bucket in a facet group\n   */\n  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {\n    return html`\n      <facets-template\n        .facetGroup=${facetGroup}\n        .selectedFacets=${this.selectedFacets}\n        .renderOn=${'page'}\n        .collectionNameCache=${this.collectionNameCache}\n        @selectedFacetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      ></facets-template>\n    `;\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      css`\n        #container.loading {\n          opacity: 0.5;\n        }\n\n        .histogram-loading-indicator {\n          width: 100%;\n          height: 2.25rem;\n          margin-top: 1.75rem;\n          font-size: 1.4rem;\n          text-align: center;\n        }\n\n        .collapser {\n          display: inline-block;\n          cursor: pointer;\n          width: 10px;\n          height: 10px;\n        }\n\n        .collapser svg {\n          transition: transform 0.2s ease-in-out;\n        }\n\n        .collapser.open svg {\n          transform: rotate(90deg);\n        }\n\n        .facet-group:not(:last-child) {\n          margin-bottom: 2rem;\n        }\n\n        .facet-group h3 {\n          margin-bottom: 0.7rem;\n        }\n\n        .facet-group.mobile h3 {\n          cursor: pointer;\n        }\n\n        .facet-group-header {\n          display: flex;\n          margin-bottom: 0.7rem;\n          justify-content: space-between;\n          border-bottom: 1px solid rgb(232, 232, 232);\n        }\n\n        .facet-group-content {\n          transition: max-height 0.2s ease-in-out;\n        }\n\n        .facet-group.mobile .facet-group-content {\n          max-height: 0;\n          overflow: hidden;\n        }\n\n        .facet-group.mobile .facet-group-content.open {\n          max-height: 2000px;\n        }\n\n        h3 {\n          font-size: 1.4rem;\n          font-weight: 200\n          padding-bottom: 3px;\n          margin: 0;\n        }\n\n        .more-link {\n          font-size: 1.2rem;\n          text-decoration: none;\n          padding: 0;\n          background: inherit;\n          border: 0;\n          color: var(--ia-theme-link-color, #4b64ff);\n          cursor: pointer;\n        }\n\n        .sorting-icon {\n          height: 15px;\n          cursor: pointer;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { ref } from 'lit/directives/ref.js';\nimport type {\n  Aggregation,\n  AggregationSortType,\n  Bucket,\n  FilterMap,\n  SearchServiceInterface,\n  SearchType,\n} from '@internetarchive/search-service';\nimport '@internetarchive/histogram-date-range';\nimport '@internetarchive/feature-feedback';\nimport '@internetarchive/collection-name-cache';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport {\n  ModalConfig,\n  ModalManagerInterface,\n} from '@internetarchive/modal-manager';\nimport type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';\nimport type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';\nimport chevronIcon from './assets/img/icons/chevron';\nimport expandIcon from './assets/img/icons/expand';\nimport {\n  FacetOption,\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  facetDisplayOrder,\n  facetTitles,\n  lendingFacetDisplayNames,\n  lendingFacetKeysVisibility,\n  LendingFacetKey,\n  suppressedCollections,\n  defaultFacetSort,\n} from './models';\nimport './collection-facets/more-facets-content';\nimport './collection-facets/facets-template';\nimport './collection-facets/facet-tombstone-row';\nimport './expanded-date-picker';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from './utils/analytics-events';\nimport { srOnlyStyle } from './styles/sr-only';\nimport { ExpandedDatePicker } from './expanded-date-picker';\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Boolean }) moreLinksVisible = true;\n\n  @property({ type: Boolean }) facetsLoading = false;\n\n  @property({ type: Boolean }) fullYearAggregationLoading = false;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: Boolean }) collapsableFacets = false;\n\n  @property({ type: Boolean }) showHistogramDatePicker = false;\n\n  @property({ type: Boolean }) allowExpandingDatePicker = false;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object, attribute: false })\n  modalManager?: ModalManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  resizeObserver?: SharedResizeObserverInterface;\n\n  @property({ type: Object, attribute: false })\n  featureFeedbackService?: FeatureFeedbackServiceInterface;\n\n  @property({ type: Object, attribute: false })\n  recaptchaManager?: RecaptchaManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\n\n  @property({ type: Object, attribute: false })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @state() openFacets: Record<FacetOption, boolean> = {\n    subject: false,\n    lending: false,\n    mediatype: false,\n    language: false,\n    creator: false,\n    collection: false,\n    year: false,\n  };\n\n  /**\n   * Maximum # of facet buckets to render per facet group\n   */\n  private allowedFacetCount = 6;\n\n  render() {\n    const datePickerLabelId = 'date-picker-label';\n    return html`\n      <div id=\"container\" class=\"${this.facetsLoading ? 'loading' : ''}\">\n        ${this.showHistogramDatePicker &&\n        (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)\n          ? html`\n              <section class=\"facet-group\" aria-labelledby=${datePickerLabelId}>\n                <h3 id=${datePickerLabelId}>\n                  Year Published <span class=\"sr-only\">range filter</span>\n                  ${this.expandDatePickerBtnTemplate}\n                </h3>\n                ${this.histogramTemplate}\n              </section>\n            `\n          : nothing}\n        ${this.mergedFacets.map(facetGroup =>\n          this.getFacetGroupTemplate(facetGroup)\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Opens a modal dialog containing an enlarged version of the date picker.\n   */\n  private showDatePickerModal(): void {\n    const { fullYearsHistogramAggregation } = this;\n    const minDate = fullYearsHistogramAggregation?.first_bucket_key;\n    const maxDate = fullYearsHistogramAggregation?.last_bucket_key;\n    const buckets = fullYearsHistogramAggregation?.buckets as number[];\n\n    // Because the modal manager does not clear its DOM content after being closed,\n    // it may try to render the exact same date picker template when it is reopened.\n    // And because it isn't actually a descendent of this collection-facets component,\n    // changes to the template defined here may not trigger a reactive update to the date\n    // picker, resulting in it displaying a stale date range.\n    // This ref callback ensures that every time the date picker modal is opened, it will\n    // always propagate the most recent date range into the date picker regardless of\n    // whether Lit thinks the update is necessary.\n    const expandedDatePickerChanged = (elmt?: Element) => {\n      if (elmt && elmt instanceof ExpandedDatePicker) {\n        const expandedDatePicker = elmt as ExpandedDatePicker;\n        expandedDatePicker.minSelectedDate = this.minSelectedDate;\n        expandedDatePicker.maxSelectedDate = this.maxSelectedDate;\n      }\n    };\n\n    const customModalContent = html`\n      <expanded-date-picker\n        ${ref(expandedDatePickerChanged)}\n        .minDate=${minDate}\n        .maxDate=${maxDate}\n        .minSelectedDate=${this.minSelectedDate}\n        .maxSelectedDate=${this.maxSelectedDate}\n        .buckets=${buckets}\n        .modalManager=${this.modalManager}\n        @histogramDateRangeApplied=${this.histogramDateRangeUpdated}\n      ></expanded-date-picker>\n    `;\n\n    const config = new ModalConfig({\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true, // TODO: want to fire analytics\n      title: html`Select a date range`,\n    });\n    this.modalManager?.classList.add('expanded-date-picker');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('expanded-date-picker');\n      },\n    });\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('selectedFacets')) {\n      this.dispatchFacetsChangedEvent();\n    }\n  }\n\n  // TODO: want to fire analytics?\n  private dispatchFacetsChangedEvent() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Template for the \"Expand\" button to show the date picker modal, or\n   * `nothing` if that button should currently not be shown.\n   */\n  private get expandDatePickerBtnTemplate(): TemplateResult | typeof nothing {\n    return this.allowExpandingDatePicker && !this.facetsLoading\n      ? html`<button\n          class=\"expand-date-picker-btn\"\n          aria-hidden=\"true\"\n          @click=${this.showDatePickerModal}\n        >\n          ${expandIcon}\n        </button>`\n      : nothing;\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramTemplate() {\n    const { fullYearsHistogramAggregation } = this;\n    return this.fullYearAggregationLoading\n      ? html`<div class=\"histogram-loading-indicator\">&hellip;</div>` // Ellipsis block\n      : html`\n          <histogram-date-range\n            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n            .minSelectedDate=${this.minSelectedDate}\n            .maxSelectedDate=${this.maxSelectedDate}\n            .updateDelay=${100}\n            missingDataMessage=\"...\"\n            .width=${180}\n            .bins=${fullYearsHistogramAggregation?.buckets as number[]}\n            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n          ></histogram-date-range>\n        `;\n  }\n\n  /**\n   * Dispatches a `histogramDateRangeUpdated` event with the date range copied from the\n   * input event.\n   *\n   * Arrow function to ensure `this` is always bound to the current component.\n   */\n  private histogramDateRangeUpdated = (\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ): void => {\n    const { minDate, maxDate } = e.detail;\n    const event = new CustomEvent('histogramDateRangeUpdated', {\n      detail: { minDate, maxDate },\n    });\n    this.dispatchEvent(event);\n  };\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      let bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          return selectedBucket\n            ? {\n                ...bucket,\n                count: selectedBucket.count,\n              }\n            : bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n\n      // For lending facets, only include a specific subset of buckets\n      if (facetKey === 'lending') {\n        bucketsWithCount = bucketsWithCount.filter(\n          bucket => lendingFacetKeysVisibility[bucket.key as LendingFacetKey]\n        );\n      }\n\n      /**\n       * render limited facet items on page facet area\n       *\n       * - by-default we are showing 6 items\n       * - additionally want to show all items (selected/suppressed) in page facet area\n       */\n      let allowedFacetCount = Object.keys(\n        (selectedFacetGroup?.buckets as []) || []\n      )?.length;\n      if (allowedFacetCount < this.allowedFacetCount) {\n        allowedFacetCount = this.allowedFacetCount; // splice start index from 0th\n      }\n\n      // splice how many items we want to show in page facet area\n      facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, facetData]) => {\n            let displayText: string = value;\n            // for lending facets, convert the key to a readable format\n            if (option === 'lending') {\n              displayText =\n                lendingFacetDisplayNames[value as LendingFacetKey] ?? value;\n            }\n            return {\n              displayText,\n              key: value,\n              count: facetData.count,\n              state: facetData.state,\n            };\n          }\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {\n      // the year_histogram data is in a different format so can't be handled here\n      if (key === 'year_histogram') return;\n\n      const option = key as FacetOption;\n      const title = facetTitles[option];\n      if (!title) return;\n\n      let castedBuckets = aggregation.getSortedBuckets(\n        defaultFacetSort[option]\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n      }\n\n      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {\n        const bucketKey = bucket.key;\n        let displayText = `${bucket.key}`;\n        // for lending facets, convert the bucket key to a readable format\n        if (option === 'lending') {\n          displayText =\n            lendingFacetDisplayNames[bucket.key as LendingFacetKey] ??\n            `${bucket.key}`;\n        }\n        return {\n          displayText,\n          key: `${bucketKey}`,\n          count: bucket.doc_count,\n          state: 'none',\n        };\n      });\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  /**\n   * Generate the template for a facet group with a header and the collapsible\n   * chevron for the mobile view\n   */\n  private getFacetGroupTemplate(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;\n\n    const { key } = facetGroup;\n    const isOpen = this.openFacets[key];\n    const collapser = html`\n      <span class=\"collapser ${isOpen ? 'open' : ''}\"> ${chevronIcon} </span>\n    `;\n\n    const toggleCollapsed = () => {\n      const newOpenFacets = { ...this.openFacets };\n      newOpenFacets[key] = !isOpen;\n      this.openFacets = newOpenFacets;\n    };\n\n    const headerId = `facet-group-header-label-${facetGroup.key}`;\n    return html`\n      <section\n        class=\"facet-group ${this.collapsableFacets ? 'mobile' : ''}\"\n        aria-labelledby=${headerId}\n      >\n        <div class=\"facet-group-header\">\n          <h3\n            id=${headerId}\n            @click=${toggleCollapsed}\n            @keyup=${toggleCollapsed}\n          >\n            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}\n            <span class=\"sr-only\">filters</span>\n          </h3>\n        </div>\n        <div class=\"facet-group-content ${isOpen ? 'open' : ''}\">\n          ${this.facetsLoading\n            ? this.getTombstoneFacetGroupTemplate()\n            : html`\n                ${this.getFacetTemplate(facetGroup)}\n                ${this.searchMoreFacetsLink(facetGroup)}\n              `}\n        </div>\n      </section>\n    `;\n  }\n\n  private getTombstoneFacetGroupTemplate(): TemplateResult {\n    // Render five tombstone rows\n    return html`\n      ${map(\n        Array(5).fill(null),\n        () => html`<facet-tombstone-row></facet-tombstone-row>`\n      )}\n    `;\n  }\n\n  /**\n   * Generate the More... link button just below the facets group\n   *\n   * TODO: want to fire analytics?\n   */\n  private searchMoreFacetsLink(\n    facetGroup: FacetGroup\n  ): TemplateResult | typeof nothing {\n    // Don't render More... links for FTS searches\n    if (!this.moreLinksVisible) {\n      return nothing;\n    }\n\n    // Don't render More... links for lending facets\n    if (facetGroup.key === 'lending') {\n      return nothing;\n    }\n\n    // Don't render More... link if the number of facets < this.allowedFacetCount\n    if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {\n      return nothing;\n    }\n\n    // We sort years in numeric order by default, rather than bucket count\n    const facetSort = defaultFacetSort[facetGroup.key];\n\n    return html`<button\n      class=\"more-link\"\n      @click=${() => {\n        this.showMoreFacetsModal(facetGroup, facetSort);\n        this.analyticsHandler?.sendEvent({\n          category: analyticsCategories.default,\n          action: analyticsActions.showMoreFacetsModal,\n          label: facetGroup.key,\n        });\n        this.dispatchEvent(\n          new CustomEvent('showMoreFacets', { detail: facetGroup.key })\n        );\n      }}\n    >\n      More...\n    </button>`;\n  }\n\n  async showMoreFacetsModal(\n    facetGroup: FacetGroup,\n    sortedBy: AggregationSortType\n  ): Promise<void> {\n    const facetAggrKey = facetGroup.key;\n\n    const customModalContent = html`\n      <more-facets-content\n        .analyticsHandler=${this.analyticsHandler}\n        .facetKey=${facetGroup.key}\n        .facetAggregationKey=${facetAggrKey}\n        .query=${this.query}\n        .filterMap=${this.filterMap}\n        .modalManager=${this.modalManager}\n        .searchService=${this.searchService}\n        .searchType=${this.searchType}\n        .collectionNameCache=${this.collectionNameCache}\n        .selectedFacets=${this.selectedFacets}\n        .sortedBy=${sortedBy}\n        @facetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      >\n      </more-facets-content>\n    `;\n\n    const config = new ModalConfig({\n      bodyColor: '#fff',\n      headerColor: '#194880',\n      showHeaderLogo: false,\n      closeOnBackdropClick: true, // TODO: want to fire analytics\n      title: html`Select filters`,\n    });\n    this.modalManager?.classList.add('more-search-facets');\n    this.modalManager?.showModal({\n      config,\n      customModalContent,\n      userClosedModalCallback: () => {\n        this.modalManager?.classList.remove('more-search-facets');\n      },\n    });\n  }\n\n  /**\n   * Generate the list template for each bucket in a facet group\n   */\n  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {\n    return html`\n      <facets-template\n        .facetGroup=${facetGroup}\n        .selectedFacets=${this.selectedFacets}\n        .renderOn=${'page'}\n        .collectionNameCache=${this.collectionNameCache}\n        @selectedFacetsChanged=${(e: CustomEvent) => {\n          const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n            detail: e.detail,\n            bubbles: true,\n            composed: true,\n          });\n          this.dispatchEvent(event);\n        }}\n      ></facets-template>\n    `;\n  }\n\n  static get styles() {\n    return [\n      srOnlyStyle,\n      css`\n        #container.loading {\n          opacity: 0.5;\n        }\n\n        .histogram-loading-indicator {\n          width: 100%;\n          height: 2.25rem;\n          margin-top: 1.75rem;\n          font-size: 1.4rem;\n          text-align: center;\n        }\n\n        .collapser {\n          display: inline-block;\n          cursor: pointer;\n          width: 10px;\n          height: 10px;\n        }\n\n        .collapser svg {\n          transition: transform 0.2s ease-in-out;\n        }\n\n        .collapser.open svg {\n          transform: rotate(90deg);\n        }\n\n        .facet-group:not(:last-child) {\n          margin-bottom: 2rem;\n        }\n\n        .facet-group h3 {\n          margin-bottom: 0.7rem;\n        }\n\n        .facet-group.mobile h3 {\n          cursor: pointer;\n        }\n\n        .facet-group-header {\n          display: flex;\n          margin-bottom: 0.7rem;\n          justify-content: space-between;\n          border-bottom: 1px solid rgb(232, 232, 232);\n        }\n\n        .facet-group-content {\n          transition: max-height 0.2s ease-in-out;\n        }\n\n        .facet-group.mobile .facet-group-content {\n          max-height: 0;\n          overflow: hidden;\n        }\n\n        .facet-group.mobile .facet-group-content.open {\n          max-height: 2000px;\n        }\n\n        h3 {\n          font-size: 1.4rem;\n          font-weight: 200\n          padding-bottom: 3px;\n          margin: 0;\n        }\n\n        .more-link {\n          font-size: 1.2rem;\n          text-decoration: none;\n          padding: 0;\n          background: inherit;\n          border: 0;\n          color: var(--ia-theme-link-color, #4b64ff);\n          cursor: pointer;\n        }\n\n        #date-picker-label {\n          display: flex;\n          justify-content: space-between;\n        }\n\n        .expand-date-picker-btn {\n          margin: 0;\n          padding: 0;\n          border: 0;\n          appearance: none;\n          background: none;\n          cursor: pointer;\n        }\n\n        .expand-date-picker-btn > svg {\n          width: 14px;\n          height: 14px;\n        }\n\n        .sorting-icon {\n          height: 15px;\n          cursor: pointer;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/expanded-date-picker.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, CSSResultGroup, TemplateResult } from 'lit';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+export declare class ExpandedDatePicker extends LitElement {
+    minDate?: string;
+    maxDate?: string;
+    minSelectedDate?: string;
+    maxSelectedDate?: string;
+    buckets?: number[];
+    modalManager?: ModalManagerInterface;
+    render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Add an event listener to close the date picker modal when the Esc key is pressed
+     */
+    private setupEscapeListener;
+    /**
+     * Remove the Esc key listener that was previously added
+     */
+    private removeEscapeListener;
+    /**
+     * Closes the modal dialog if the given event is pressing the Esc key.
+     * Arrow function to ensure `this` remains bound to the current component.
+     */
+    private boundEscapeListener;
+    /**
+     * When the histogram is updated, keep track of the newly selected date range.
+     * We don't commit to the new range until the apply button is clicked.
+     */
+    private histogramDateRangeUpdated;
+    /**
+     * When the Apply button is clicked, emit the current date range and close the modal.
+     */
+    private applyBtnClicked;
+    /**
+     * Closes the modal associated with this component (if it exists) and removes the
+     * corresponding class from it.
+     */
+    private closeModal;
+    static get styles(): CSSResultGroup;
+}

package/dist/src/expanded-date-picker.js

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let ExpandedDatePicker = class ExpandedDatePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Closes the modal dialog if the given event is pressing the Esc key.
+         * Arrow function to ensure `this` remains bound to the current component.
+         */
+        this.boundEscapeListener = (e) => {
+            if (e.key === 'Escape') {
+                this.closeModal();
+            }
+        };
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div id="container">
+        <histogram-date-range
+          id="date-picker"
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .minSelectedDate=${(_a = this.minSelectedDate) !== null && _a !== void 0 ? _a : this.minDate}
+          .maxSelectedDate=${(_b = this.maxSelectedDate) !== null && _b !== void 0 ? _b : this.maxDate}
+          .updateDelay=${0}
+          updateWhileFocused
+          missingDataMessage="..."
+          .width=${560}
+          .height=${120}
+          .bins=${this.buckets}
+          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        >
+          <button
+            id="apply-btn"
+            slot="inputs-right-side"
+            @click=${this.applyBtnClicked}
+          >
+            Apply date range
+          </button>
+        </histogram-date-range>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        var _a;
+        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.setupEscapeListener();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.removeEscapeListener();
+    }
+    /**
+     * Add an event listener to close the date picker modal when the Esc key is pressed
+     */
+    setupEscapeListener() {
+        document.addEventListener('keydown', this.boundEscapeListener);
+    }
+    /**
+     * Remove the Esc key listener that was previously added
+     */
+    removeEscapeListener() {
+        document.removeEventListener('keydown', this.boundEscapeListener);
+    }
+    /**
+     * When the histogram is updated, keep track of the newly selected date range.
+     * We don't commit to the new range until the apply button is clicked.
+     */
+    histogramDateRangeUpdated(e) {
+        this.minSelectedDate = e.detail.minDate;
+        this.maxSelectedDate = e.detail.maxDate;
+    }
+    /**
+     * When the Apply button is clicked, emit the current date range and close the modal.
+     */
+    applyBtnClicked() {
+        const event = new CustomEvent('histogramDateRangeApplied', {
+            detail: {
+                minDate: this.minSelectedDate,
+                maxDate: this.maxSelectedDate,
+            },
+        });
+        this.dispatchEvent(event);
+        this.closeModal();
+    }
+    /**
+     * Closes the modal associated with this component (if it exists) and removes the
+     * corresponding class from it.
+     */
+    closeModal() {
+        var _a, _b;
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+        (_b = this.modalManager) === null || _b === void 0 ? void 0 : _b.classList.remove('expanded-date-picker');
+    }
+    static get styles() {
+        return css `
+      #container {
+        display: flex;
+        justify-content: center;
+        padding: 40px 10px 10px;
+        overflow: hidden;
+      }
+
+      #date-picker {
+        --histogramDateRangeInputWidth: 50px;
+        --histogramDateRangeInputRowMargin: 5px 0 0 0;
+      }
+
+      #apply-btn {
+        margin: 0 0 0 5px;
+        padding: 8px 10px;
+        border: 0;
+        border-radius: 4px;
+        background: var(--primaryButtonBGColor, #194880);
+        color: white;
+        cursor: pointer;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "minSelectedDate", void 0);
+__decorate([
+    property({ type: String })
+], ExpandedDatePicker.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Array })
+], ExpandedDatePicker.prototype, "buckets", void 0);
+__decorate([
+    property({ type: Object })
+], ExpandedDatePicker.prototype, "modalManager", void 0);
+ExpandedDatePicker = __decorate([
+    customElement('expanded-date-picker')
+], ExpandedDatePicker);
+export { ExpandedDatePicker };
+//# sourceMappingURL=expanded-date-picker.js.map

package/dist/src/expanded-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-date-picker.js","sourceRoot":"","sources":["../../src/expanded-date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\n\n@customElement('expanded-date-picker')\nexport class ExpandedDatePicker extends LitElement {\n  @property({ type: String }) minDate?: string;\n\n  @property({ type: String }) maxDate?: string;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Array }) buckets?: number[];\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\">\n        <histogram-date-range\n          id=\"date-picker\"\n          .minDate=${this.minDate}\n          .maxDate=${this.maxDate}\n          .minSelectedDate=${this.minSelectedDate ?? this.minDate}\n          .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}\n          .updateDelay=${0}\n          updateWhileFocused\n          missingDataMessage=\"...\"\n          .width=${560}\n          .height=${120}\n          .bins=${this.buckets}\n          @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n        >\n          <button\n            id=\"apply-btn\"\n            slot=\"inputs-right-side\"\n            @click=${this.applyBtnClicked}\n          >\n            Apply date range\n          </button>\n        </histogram-date-range>\n      </div>\n    `;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback?.();\n    this.setupEscapeListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback?.();\n    this.removeEscapeListener();\n  }\n\n  /**\n   * Add an event listener to close the date picker modal when the Esc key is pressed\n   */\n  private setupEscapeListener() {\n    document.addEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Remove the Esc key listener that was previously added\n   */\n  private removeEscapeListener() {\n    document.removeEventListener('keydown', this.boundEscapeListener);\n  }\n\n  /**\n   * Closes the modal dialog if the given event is pressing the Esc key.\n   * Arrow function to ensure `this` remains bound to the current component.\n   */\n  private boundEscapeListener = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  };\n\n  /**\n   * When the histogram is updated, keep track of the newly selected date range.\n   * We don't commit to the new range until the apply button is clicked.\n   */\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ): void {\n    this.minSelectedDate = e.detail.minDate;\n    this.maxSelectedDate = e.detail.maxDate;\n  }\n\n  /**\n   * When the Apply button is clicked, emit the current date range and close the modal.\n   */\n  private applyBtnClicked(): void {\n    const event = new CustomEvent('histogramDateRangeApplied', {\n      detail: {\n        minDate: this.minSelectedDate,\n        maxDate: this.maxSelectedDate,\n      },\n    });\n    this.dispatchEvent(event);\n    this.closeModal();\n  }\n\n  /**\n   * Closes the modal associated with this component (if it exists) and removes the\n   * corresponding class from it.\n   */\n  private closeModal(): void {\n    this.modalManager?.closeModal();\n    this.modalManager?.classList.remove('expanded-date-picker');\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #container {\n        display: flex;\n        justify-content: center;\n        padding: 40px 10px 10px;\n        overflow: hidden;\n      }\n\n      #date-picker {\n        --histogramDateRangeInputWidth: 50px;\n        --histogramDateRangeInputRowMargin: 5px 0 0 0;\n      }\n\n      #apply-btn {\n        margin: 0 0 0 5px;\n        padding: 8px 10px;\n        border: 0;\n        border-radius: 4px;\n        background: var(--primaryButtonBGColor, #194880);\n        color: white;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}

package/dist/test/collection-facets.test.js

@@ -62,6 +62,60 @@ describe('Collection Facets', () => {
         const histogram = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('histogram-date-range');
         expect(histogram).to.be.null;
     });
+    it('renders button to expand the date picker when allowed', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.fullYearAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = true;
+        el.fullYearsHistogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.exist;
+    });
+    it('does not render button to expand the date picker when disallowed', async () => {
+        var _a;
+        const el = await fixture(html `<collection-facets></collection-facets>`);
+        el.fullYearAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = false;
+        el.fullYearsHistogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.be.null;
+    });
+    it('opens modal when date picker expand button clicked', async () => {
+        var _a, _b;
+        const el = await fixture(html `<collection-facets
+        .modalManager=${new ModalManager()}
+      ></collection-facets>`);
+        el.fullYearAggregationLoading = false;
+        el.showHistogramDatePicker = true;
+        el.allowExpandingDatePicker = true;
+        el.fullYearsHistogramAggregation = new Aggregation({
+            buckets: [1, 2, 3],
+            first_bucket_key: 0,
+            last_bucket_key: 2,
+        });
+        await el.updateComplete;
+        const expandBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.expand-date-picker-btn');
+        expect(expandBtn).to.exist;
+        const showModalSpy = sinon.spy(el.modalManager, 'showModal');
+        // Click the expand button to open the modal
+        expandBtn === null || expandBtn === void 0 ? void 0 : expandBtn.click();
+        await el.updateComplete;
+        expect(showModalSpy.callCount).to.equal(1);
+        expect((_b = el.modalManager) === null || _b === void 0 ? void 0 : _b.classList.contains('expanded-date-picker')).to.be
+            .true;
+    });
     it('renders aggregations as facets', async () => {
         var _a, _b, _c, _d, _e, _f, _g;
         const el = await fixture(html `<collection-facets></collection-facets>`);