@internetarchive/collection-browser 3.0.0 → 3.0.1-webdev-7936.0

package/dist/src/collection-facets.js

@@ -77,27 +77,27 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         // 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}>
-                  Year Published <span class="sr-only">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}
-        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
-      </div>
+            : nothing}
+        ${this.collectionPartOfTemplate}
+        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
+      </div>
     `;
     }
     get collectionPartOfTemplate() {
@@ -108,31 +108,31 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         // 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}
-              >
-                ${(_b = (_a = this.collectionTitles) === null || _a === void 0 ? void 0 : _a.get(collxn)) !== null && _b !== void 0 ? _b : 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) {
@@ -215,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',
@@ -271,12 +271,13 @@ let CollectionFacets = class CollectionFacets extends LitElement {
      */
     get expandDatePickerBtnTemplate() {
         return this.allowExpandingDatePicker && !this.facetsLoading
-            ? html `<button
-          class="expand-date-picker-btn"
-          aria-hidden="true"
-          @click=${this.showDatePickerModal}
-        >
-          ${expandIcon}
+            ? html `<button
+          class="expand-date-picker-btn"
+          aria-hidden="true"
+          tabindex="-1"
+          @click=${this.showDatePickerModal}
+        >
+          ${expandIcon}
         </button>`
             : nothing;
     }
@@ -289,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' : nothing}
-        .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="..."
+        return html `
+      <histogram-date-range
+        class=${this.isTvSearch ? 'wide-inputs' : nothing}
+        .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>
     `;
     }
     /**
@@ -484,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 };
@@ -495,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>`)}
     `;
     }
     /**
@@ -553,8 +554,8 @@ 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);
@@ -564,29 +565,29 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 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) {
         var _a, _b;
-        const customModalContent = html `
-      <more-facets-content
-        .analyticsHandler=${this.analyticsHandler}
-        .facetKey=${facetGroup.key}
-        .query=${this.query}
-        .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}
+        const customModalContent = html `
+      <more-facets-content
+        .analyticsHandler=${this.analyticsHandler}
+        .facetKey=${facetGroup.key}
+        .query=${this.query}
+        .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,
@@ -594,9 +595,9 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 composed: true,
             });
             this.dispatchEvent(event);
-        }}
-      >
-      </more-facets-content>
+        }}
+      >
+      </more-facets-content>
     `;
         const config = new ModalConfig({
             bodyColor: '#fff',
@@ -619,12 +620,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', {
@@ -633,133 +634,133 @@ 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: 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;
-          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;
+          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;
+        }
       `,
         ];
     }