@internetarchive/collection-browser 4.5.0 → 4.5.1-alpha-webdev8221.0

package/dist/src/collection-facets/facet-row.js

@@ -44,8 +44,8 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
         // For other facet types, we just have a static value to use.
         const bucketTextDisplay = facetType !== 'collection'
             ? html `${bucket.displayText ?? bucket.key} ${extraNoteSpan}`
-            : html `<a href="/details/${bucket.key}">
-            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
+            : html `<a href="/details/${bucket.key}">
+            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
           </a> `;
         const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';
         const facetHidden = bucket.state === 'hidden';
@@ -59,59 +59,59 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
         const showHideText = facetHidden ? unhideText : hideText;
         const ariaLabel = `${titleText}, ${bucket.count} results`;
         // Added data-testid for Playwright testing
-        return html `
-      <div class="facet-row-container">
-        <div class="facet-checkboxes">
-          <input
-            type="checkbox"
-            .name=${facetType}
-            .value=${bucket.key}
+        return html `
+      <div class="facet-row-container">
+        <div class="facet-checkboxes">
+          <input
+            type="checkbox"
+            .name=${facetType}
+            .value=${bucket.key}
             @click=${(e) => {
             this.facetClicked(e, false);
-        }}
-            .checked=${facetSelected}
-            class="select-facet-checkbox"
-            title=${onlyShowText}
-            id=${showOnlyCheckboxId}
-            data-testid=${showOnlyCheckboxId}
-          />
-          <div
-            class="hide-facet-container"
-            ?hidden=${this.omitHideButton && !facetHidden}
-          >
-            <input
-              type="checkbox"
-              id=${negativeCheckboxId}
-              .name=${facetType}
-              .value=${bucket.key}
+        }}
+            .checked=${facetSelected}
+            class="select-facet-checkbox"
+            title=${onlyShowText}
+            id=${showOnlyCheckboxId}
+            data-testid=${showOnlyCheckboxId}
+          />
+          <div
+            class="hide-facet-container"
+            ?hidden=${this.omitHideButton && !facetHidden}
+          >
+            <input
+              type="checkbox"
+              id=${negativeCheckboxId}
+              .name=${facetType}
+              .value=${bucket.key}
               @click=${(e) => {
             this.facetClicked(e, true);
-        }}
-              .checked=${facetHidden}
-              class="hide-facet-checkbox"
-            />
-            <label
-              for=${negativeCheckboxId}
-              class="hide-facet-icon${facetHidden ? ' active' : ''}"
-              title=${showHideText}
-              data-testid=${negativeCheckboxId}
-            >
-              <span class="sr-only">${showHideText}</span>
-              <span class="eye eye-open">${eyeIcon}</span>
-              <span class="eye eye-closed">${eyeClosedIcon}</span>
-            </label>
-          </div>
-        </div>
-        <label
-          for=${showOnlyCheckboxId}
-          class="facet-info-display"
-          title=${onlyShowText}
-          aria-label=${ariaLabel}
-        >
-          <div class="facet-title">${bucketTextDisplay}</div>
-          <div class="facet-count">${bucketCountText}</div>
-        </label>
-      </div>
+        }}
+              .checked=${facetHidden}
+              class="hide-facet-checkbox"
+            />
+            <label
+              for=${negativeCheckboxId}
+              class="hide-facet-icon${facetHidden ? ' active' : ''}"
+              title=${showHideText}
+              data-testid=${negativeCheckboxId}
+            >
+              <span class="sr-only">${showHideText}</span>
+              <span class="eye eye-open">${eyeIcon}</span>
+              <span class="eye eye-closed">${eyeClosedIcon}</span>
+            </label>
+          </div>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucketCountText}</div>
+        </label>
+      </div>
     `;
     }
     //
@@ -168,98 +168,98 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
         const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
         const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
         const checkboxHeight = css `15px`;
-        const ownCss = css `
-      .facet-checkboxes {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: ${checkboxHeight};
-      }
-      .facet-checkboxes input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkboxes input {
-        height: ${checkboxHeight};
-        width: ${checkboxHeight};
-        margin: 0;
-      }
-      .facet-row-container {
-        display: flex;
-        font-weight: 500;
-        font-size: 1.2rem;
-        margin: 0 auto;
-        padding: 0.25rem 0;
-        height: auto;
-        border-top: ${facetRowBorderTop};
-        border-bottom: ${facetRowBorderBottom};
-      }
-      .facet-info-display {
-        display: flex;
-        flex: 1 1 0%;
-        cursor: pointer;
-        flex-wrap: wrap;
-      }
-      .facet-title {
-        word-break: break-word;
-        display: inline-block;
-        flex: 1 1 0%;
-      }
-      .facet-note {
-        color: #bbb;
-      }
-      .facet-count {
-        text-align: right;
-      }
-      .select-facet-checkbox {
-        cursor: pointer;
-        display: inline-block;
-      }
-      .hide-facet-checkbox {
-        position: absolute;
-        clip: rect(0, 0, 0, 0);
-        pointer-events: none;
-      }
-      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
-        outline-style: auto;
-        outline-offset: 2px;
-      }
-      .hide-facet-icon {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        cursor: pointer;
-        display: flex;
-      }
-      .eye {
-        width: ${checkboxHeight};
-        height: ${checkboxHeight};
-        opacity: 0.3;
-      }
-      .hide-facet-icon:hover .eye,
-      .active .eye {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye-open,
-      .hide-facet-icon .eye-closed {
-        display: none;
-      }
-      .hide-facet-icon:hover .eye-closed,
-      .hide-facet-icon.active .eye-closed {
-        display: inline;
-      }
-      .hide-facet-icon.active .eye-open {
-        display: none;
-      }
-      .sorting-icon {
-        cursor: pointer;
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
+        const ownCss = css `
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: ${checkboxHeight};
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: ${checkboxHeight};
+        width: ${checkboxHeight};
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 0 auto;
+        padding: 0.25rem 0;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+        flex-wrap: wrap;
+      }
+      .facet-title {
+        word-break: break-word;
+        display: inline-block;
+        flex: 1 1 0%;
+      }
+      .facet-note {
+        color: #bbb;
+      }
+      .facet-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+      }
+      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
+        outline-style: auto;
+        outline-offset: 2px;
+      }
+      .hide-facet-icon {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        cursor: pointer;
+        display: flex;
+      }
+      .eye {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        opacity: 0.3;
+      }
+      .hide-facet-icon:hover .eye,
+      .active .eye {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye-open,
+      .hide-facet-icon .eye-closed {
+        display: none;
+      }
+      .hide-facet-icon:hover .eye-closed,
+      .hide-facet-icon.active .eye-closed {
+        display: inline;
+      }
+      .hide-facet-icon.active .eye-open {
+        display: none;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
     `;
         return [srOnlyStyle, ownCss];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  css,\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  nothing,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport eyeIcon from '../assets/img/icons/eye';\r\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\r\nimport type {\r\n  FacetOption,\r\n  FacetBucket,\r\n  FacetEventDetails,\r\n  FacetState,\r\n} from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\n\r\n@customElement('facet-row')\r\nexport class FacetRow extends LitElement {\r\n  //\r\n  // UI STATE\r\n  //\r\n\r\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\r\n  @property({ type: String }) facetType?: FacetOption;\r\n\r\n  /** The facet bucket containing details about the state, count, and key for this row */\r\n  @property({ type: Object }) bucket?: FacetBucket;\r\n\r\n  /**\r\n   * Whether to omit the negative/hide button from this facet row if possible.\r\n   * Has no effect if the facet bucket is itself hidden, in which case the hide\r\n   * button *must* be shown to represent the state accurately.\r\n   */\r\n  @property({ type: Boolean, reflect: true }) omitHideButton = false;\r\n\r\n  /** The collection name cache for converting collection identifiers to titles */\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  //\r\n  // COMPONENT LIFECYCLE METHODS\r\n  //\r\n\r\n  render() {\r\n    return html`${this.facetRowTemplate}`;\r\n  }\r\n\r\n  //\r\n  // TEMPLATE GETTERS\r\n  //\r\n\r\n  /**\r\n   * Template for the full facet row, including the positive/negative checks,\r\n   * the display name, and the count.\r\n   */\r\n  private get facetRowTemplate(): TemplateResult | typeof nothing {\r\n    const { bucket, facetType } = this;\r\n    if (!bucket || !facetType) return nothing;\r\n\r\n    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\r\n    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\r\n\r\n    const extraNoteSpan = bucket.extraNote\r\n      ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\r\n      : nothing;\r\n\r\n    // For collections, we render the collection title as a link.\r\n    // For other facet types, we just have a static value to use.\r\n    const bucketTextDisplay =\r\n      facetType !== 'collection'\r\n        ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\r\n        : html`<a href=\"/details/${bucket.key}\">\r\n            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}\r\n          </a> `;\r\n\r\n    const bucketCountText =\r\n      bucket.count > 0 ? bucket.count.toLocaleString() : '';\r\n\r\n    const facetHidden = bucket.state === 'hidden';\r\n    const facetSelected = bucket.state === 'selected';\r\n\r\n    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\r\n    const onlyShowText = facetSelected\r\n      ? `Show all ${facetType}s`\r\n      : `Only show ${titleText}`;\r\n    const hideText = `Hide ${titleText}`;\r\n    const unhideText = `Unhide ${titleText}`;\r\n    const showHideText = facetHidden ? unhideText : hideText;\r\n    const ariaLabel = `${titleText}, ${bucket.count} results`;\r\n\r\n    // Added data-testid for Playwright testing\r\n    return html`\r\n      <div class=\"facet-row-container\">\r\n        <div class=\"facet-checkboxes\">\r\n          <input\r\n            type=\"checkbox\"\r\n            .name=${facetType}\r\n            .value=${bucket.key}\r\n            @click=${(e: Event) => {\r\n              this.facetClicked(e, false);\r\n            }}\r\n            .checked=${facetSelected}\r\n            class=\"select-facet-checkbox\"\r\n            title=${onlyShowText}\r\n            id=${showOnlyCheckboxId}\r\n            data-testid=${showOnlyCheckboxId}\r\n          />\r\n          <div\r\n            class=\"hide-facet-container\"\r\n            ?hidden=${this.omitHideButton && !facetHidden}\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              id=${negativeCheckboxId}\r\n              .name=${facetType}\r\n              .value=${bucket.key}\r\n              @click=${(e: Event) => {\r\n                this.facetClicked(e, true);\r\n              }}\r\n              .checked=${facetHidden}\r\n              class=\"hide-facet-checkbox\"\r\n            />\r\n            <label\r\n              for=${negativeCheckboxId}\r\n              class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\r\n              title=${showHideText}\r\n              data-testid=${negativeCheckboxId}\r\n            >\r\n              <span class=\"sr-only\">${showHideText}</span>\r\n              <span class=\"eye eye-open\">${eyeIcon}</span>\r\n              <span class=\"eye eye-closed\">${eyeClosedIcon}</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n        <label\r\n          for=${showOnlyCheckboxId}\r\n          class=\"facet-info-display\"\r\n          title=${onlyShowText}\r\n          aria-label=${ariaLabel}\r\n        >\r\n          <div class=\"facet-title\">${bucketTextDisplay}</div>\r\n          <div class=\"facet-count\">${bucketCountText}</div>\r\n        </label>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  //\r\n  // EVENT HANDLERS & DISPATCHERS\r\n  //\r\n\r\n  /**\r\n   * Handler for whenever this facet is clicked & its state changes\r\n   */\r\n  private facetClicked(e: Event, negative: boolean) {\r\n    const { bucket, facetType } = this;\r\n    if (!bucket || !facetType) return;\r\n\r\n    const target = e.target as HTMLInputElement;\r\n    const { checked } = target;\r\n    this.bucket = {\r\n      ...bucket,\r\n      state: FacetRow.getFacetState(checked, negative),\r\n    };\r\n\r\n    this.dispatchFacetClickEvent({\r\n      facetType,\r\n      bucket: this.bucket,\r\n      negative,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Emits a `facetClick` event with details about this facet & its current state\r\n   */\r\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\r\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\r\n      detail,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  //\r\n  // OTHER METHODS\r\n  //\r\n\r\n  /**\r\n   * Returns the composed facet state corresponding to a positive or negative facet's checked state\r\n   */\r\n  static getFacetState(checked: boolean, negative: boolean): FacetState {\r\n    let state: FacetState;\r\n    if (checked) {\r\n      state = negative ? 'hidden' : 'selected';\r\n    } else {\r\n      state = 'none';\r\n    }\r\n    return state;\r\n  }\r\n\r\n  //\r\n  // STYLES\r\n  //\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\r\n    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\r\n    const checkboxHeight = css`15px`;\r\n\r\n    const ownCss = css`\r\n      .facet-checkboxes {\r\n        margin: 0 5px 0 0;\r\n        display: flex;\r\n        height: ${checkboxHeight};\r\n      }\r\n      .facet-checkboxes input:first-child {\r\n        margin-right: 5px;\r\n      }\r\n      .facet-checkboxes input {\r\n        height: ${checkboxHeight};\r\n        width: ${checkboxHeight};\r\n        margin: 0;\r\n      }\r\n      .facet-row-container {\r\n        display: flex;\r\n        font-weight: 500;\r\n        font-size: 1.2rem;\r\n        margin: 0 auto;\r\n        padding: 0.25rem 0;\r\n        height: auto;\r\n        border-top: ${facetRowBorderTop};\r\n        border-bottom: ${facetRowBorderBottom};\r\n      }\r\n      .facet-info-display {\r\n        display: flex;\r\n        flex: 1 1 0%;\r\n        cursor: pointer;\r\n        flex-wrap: wrap;\r\n      }\r\n      .facet-title {\r\n        word-break: break-word;\r\n        display: inline-block;\r\n        flex: 1 1 0%;\r\n      }\r\n      .facet-note {\r\n        color: #bbb;\r\n      }\r\n      .facet-count {\r\n        text-align: right;\r\n      }\r\n      .select-facet-checkbox {\r\n        cursor: pointer;\r\n        display: inline-block;\r\n      }\r\n      .hide-facet-checkbox {\r\n        position: absolute;\r\n        clip: rect(0, 0, 0, 0);\r\n        pointer-events: none;\r\n      }\r\n      .hide-facet-checkbox:focus-visible + .hide-facet-icon {\r\n        outline-style: auto;\r\n        outline-offset: 2px;\r\n      }\r\n      .hide-facet-icon {\r\n        width: ${checkboxHeight};\r\n        height: ${checkboxHeight};\r\n        cursor: pointer;\r\n        display: flex;\r\n      }\r\n      .eye {\r\n        width: ${checkboxHeight};\r\n        height: ${checkboxHeight};\r\n        opacity: 0.3;\r\n      }\r\n      .hide-facet-icon:hover .eye,\r\n      .active .eye {\r\n        opacity: 1;\r\n      }\r\n      .hide-facet-icon:hover .eye-open,\r\n      .hide-facet-icon .eye-closed {\r\n        display: none;\r\n      }\r\n      .hide-facet-icon:hover .eye-closed,\r\n      .hide-facet-icon.active .eye-closed {\r\n        display: inline;\r\n      }\r\n      .hide-facet-icon.active .eye-open {\r\n        display: none;\r\n      }\r\n      .sorting-icon {\r\n        cursor: pointer;\r\n      }\r\n\r\n      a:link,\r\n      a:visited {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n\r\n    return [srOnlyStyle, ownCss];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"facet-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-row.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport type {\n  FacetOption,\n  FacetBucket,\n  FacetEventDetails,\n  FacetState,\n} from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n  //\n  // UI STATE\n  //\n\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  /**\n   * Whether to omit the negative/hide button from this facet row if possible.\n   * Has no effect if the facet bucket is itself hidden, in which case the hide\n   * button *must* be shown to represent the state accurately.\n   */\n  @property({ type: Boolean, reflect: true }) omitHideButton = false;\n\n  /** The collection name cache for converting collection identifiers to titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    return html`${this.facetRowTemplate}`;\n  }\n\n  //\n  // TEMPLATE GETTERS\n  //\n\n  /**\n   * Template for the full facet row, including the positive/negative checks,\n   * the display name, and the count.\n   */\n  private get facetRowTemplate(): TemplateResult | typeof nothing {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return nothing;\n\n    const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;\n    const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;\n\n    const extraNoteSpan = bucket.extraNote\n      ? html`<span class=\"facet-note\">${bucket.extraNote}</span>`\n      : nothing;\n\n    // For collections, we render the collection title as a link.\n    // For other facet types, we just have a static value to use.\n    const bucketTextDisplay =\n      facetType !== 'collection'\n        ? html`${bucket.displayText ?? bucket.key} ${extraNoteSpan}`\n        : html`<a href=\"/details/${bucket.key}\">\n            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}\n          </a> `;\n\n    const bucketCountText =\n      bucket.count > 0 ? bucket.count.toLocaleString() : '';\n\n    const facetHidden = bucket.state === 'hidden';\n    const facetSelected = bucket.state === 'selected';\n\n    const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;\n    const onlyShowText = facetSelected\n      ? `Show all ${facetType}s`\n      : `Only show ${titleText}`;\n    const hideText = `Hide ${titleText}`;\n    const unhideText = `Unhide ${titleText}`;\n    const showHideText = facetHidden ? unhideText : hideText;\n    const ariaLabel = `${titleText}, ${bucket.count} results`;\n\n    // Added data-testid for Playwright testing\n    return html`\n      <div class=\"facet-row-container\">\n        <div class=\"facet-checkboxes\">\n          <input\n            type=\"checkbox\"\n            .name=${facetType}\n            .value=${bucket.key}\n            @click=${(e: Event) => {\n              this.facetClicked(e, false);\n            }}\n            .checked=${facetSelected}\n            class=\"select-facet-checkbox\"\n            title=${onlyShowText}\n            id=${showOnlyCheckboxId}\n            data-testid=${showOnlyCheckboxId}\n          />\n          <div\n            class=\"hide-facet-container\"\n            ?hidden=${this.omitHideButton && !facetHidden}\n          >\n            <input\n              type=\"checkbox\"\n              id=${negativeCheckboxId}\n              .name=${facetType}\n              .value=${bucket.key}\n              @click=${(e: Event) => {\n                this.facetClicked(e, true);\n              }}\n              .checked=${facetHidden}\n              class=\"hide-facet-checkbox\"\n            />\n            <label\n              for=${negativeCheckboxId}\n              class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n              title=${showHideText}\n              data-testid=${negativeCheckboxId}\n            >\n              <span class=\"sr-only\">${showHideText}</span>\n              <span class=\"eye eye-open\">${eyeIcon}</span>\n              <span class=\"eye eye-closed\">${eyeClosedIcon}</span>\n            </label>\n          </div>\n        </div>\n        <label\n          for=${showOnlyCheckboxId}\n          class=\"facet-info-display\"\n          title=${onlyShowText}\n          aria-label=${ariaLabel}\n        >\n          <div class=\"facet-title\">${bucketTextDisplay}</div>\n          <div class=\"facet-count\">${bucketCountText}</div>\n        </label>\n      </div>\n    `;\n  }\n\n  //\n  // EVENT HANDLERS & DISPATCHERS\n  //\n\n  /**\n   * Handler for whenever this facet is clicked & its state changes\n   */\n  private facetClicked(e: Event, negative: boolean) {\n    const { bucket, facetType } = this;\n    if (!bucket || !facetType) return;\n\n    const target = e.target as HTMLInputElement;\n    const { checked } = target;\n    this.bucket = {\n      ...bucket,\n      state: FacetRow.getFacetState(checked, negative),\n    };\n\n    this.dispatchFacetClickEvent({\n      facetType,\n      bucket: this.bucket,\n      negative,\n    });\n  }\n\n  /**\n   * Emits a `facetClick` event with details about this facet & its current state\n   */\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n    });\n    this.dispatchEvent(event);\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  /**\n   * Returns the composed facet state corresponding to a positive or negative facet's checked state\n   */\n  static getFacetState(checked: boolean, negative: boolean): FacetState {\n    let state: FacetState;\n    if (checked) {\n      state = negative ? 'hidden' : 'selected';\n    } else {\n      state = 'none';\n    }\n    return state;\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    const facetRowBorderTop = css`var(--facet-row-border-top, 1px solid transparent)`;\n    const facetRowBorderBottom = css`var(--facet-row-border-bottom, 1px solid transparent)`;\n    const checkboxHeight = css`15px`;\n\n    const ownCss = css`\n      .facet-checkboxes {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: ${checkboxHeight};\n      }\n      .facet-checkboxes input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkboxes input {\n        height: ${checkboxHeight};\n        width: ${checkboxHeight};\n        margin: 0;\n      }\n      .facet-row-container {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 0 auto;\n        padding: 0.25rem 0;\n        height: auto;\n        border-top: ${facetRowBorderTop};\n        border-bottom: ${facetRowBorderBottom};\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n        flex-wrap: wrap;\n      }\n      .facet-title {\n        word-break: break-word;\n        display: inline-block;\n        flex: 1 1 0%;\n      }\n      .facet-note {\n        color: #bbb;\n      }\n      .facet-count {\n        text-align: right;\n      }\n      .select-facet-checkbox {\n        cursor: pointer;\n        display: inline-block;\n      }\n      .hide-facet-checkbox {\n        position: absolute;\n        clip: rect(0, 0, 0, 0);\n        pointer-events: none;\n      }\n      .hide-facet-checkbox:focus-visible + .hide-facet-icon {\n        outline-style: auto;\n        outline-offset: 2px;\n      }\n      .hide-facet-icon {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        cursor: pointer;\n        display: flex;\n      }\n      .eye {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        opacity: 0.3;\n      }\n      .hide-facet-icon:hover .eye,\n      .active .eye {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye-open,\n      .hide-facet-icon .eye-closed {\n        display: none;\n      }\n      .hide-facet-icon:hover .eye-closed,\n      .hide-facet-icon.active .eye-closed {\n        display: inline;\n      }\n      .hide-facet-icon.active .eye-open {\n        display: none;\n      }\n      .sorting-icon {\n        cursor: pointer;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n\n    return [srOnlyStyle, ownCss];\n  }\n}\n"]}

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

@@ -22,16 +22,16 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
         const isLoneBucket = facetBuckets.length === 1;
         // Added data-testid for Playwright testing
         // Using className and aria-labels is not ideal for Playwright locator
-        return html `
-      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
-        ${repeat(facetBuckets, bucket => `${facetGroup.key}:${bucket.key}`, bucket => html `<facet-row
-              .facetType=${facetGroup.key}
-              .bucket=${bucket}
-              .collectionTitles=${this.collectionTitles}
-              ?omitHideButton=${isLoneBucket}
-              @facetClick=${this.facetClicked}
-            ></facet-row>`)}
-      </div>
+        return html `
+      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
+        ${repeat(facetBuckets, bucket => `${facetGroup.key}:${bucket.key}`, bucket => html `<facet-row
+              .facetType=${facetGroup.key}
+              .bucket=${bucket}
+              .collectionTitles=${this.collectionTitles}
+              ?omitHideButton=${isLoneBucket}
+              @facetClick=${this.facetClicked}
+            ></facet-row>`)}
+      </div>
     `;
     }
     render() {
@@ -40,20 +40,20 @@ let FacetsTemplate = class FacetsTemplate extends LitElement {
     static get styles() {
         const columnCount = css `var(--facetsColumnCount, 1)`;
         const columnGap = css `var(--facetsColumnGap, 15px)`;
-        return css `
-      .facet-rows {
-        column-count: ${columnCount};
-        column-gap: ${columnGap};
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
+        return css `
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QACzD,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,KAAK,CAAC,CAAC;QAE/C,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;gCACvB,YAAY;4BAChB,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;;;;;;;;;;;KAW1B,CAAC;IACJ,CAAC;CACF,CAAA;AApE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAqE1B","sourcesContent":["import {\r\n  css,\r\n  html,\r\n  LitElement,\r\n  TemplateResult,\r\n  CSSResultGroup,\r\n  nothing,\r\n} from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\r\nimport type { CollectionTitles } from '../data-source/models';\r\nimport './facet-row';\r\n\r\n@customElement('facets-template')\r\nexport class FacetsTemplate extends LitElement {\r\n  @property({ type: Object }) facetGroup?: FacetGroup;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\r\n    this.dispatchFacetClickEvent(e.detail);\r\n  }\r\n\r\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\r\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\r\n      detail,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  private get facetsTemplate(): TemplateResult | typeof nothing {\r\n    const { facetGroup } = this;\r\n    if (!facetGroup) return nothing;\r\n\r\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\r\n    const isLoneBucket = facetBuckets.length === 1;\r\n\r\n    // Added data-testid for Playwright testing\r\n    // Using className and aria-labels is not ideal for Playwright locator\r\n    return html`\r\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\r\n        ${repeat(\r\n          facetBuckets,\r\n          bucket => `${facetGroup.key}:${bucket.key}`,\r\n          bucket =>\r\n            html`<facet-row\r\n              .facetType=${facetGroup.key}\r\n              .bucket=${bucket}\r\n              .collectionTitles=${this.collectionTitles}\r\n              ?omitHideButton=${isLoneBucket}\r\n              @facetClick=${this.facetClicked}\r\n            ></facet-row>`,\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`${this.facetsTemplate}`;\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const columnCount = css`var(--facetsColumnCount, 1)`;\r\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\r\n\r\n    return css`\r\n      .facet-rows {\r\n        column-count: ${columnCount};\r\n        column-gap: ${columnGap};\r\n      }\r\n\r\n      a:link,\r\n      a:visited {\r\n        text-decoration: none;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EAGV,OAAO,GACR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAMpC,YAAY,CAAC,CAAiC;QACpD,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAEO,uBAAuB,CAAC,MAAyB;QACvD,MAAM,KAAK,GAAG,IAAI,WAAW,CAAoB,YAAY,EAAE;YAC7D,MAAM;YACN,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,IAAY,cAAc;QACxB,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAEhC,MAAM,YAAY,GAAG,UAAU,CAAC,OAAwB,CAAC;QACzD,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,KAAK,CAAC,CAAC;QAE/C,2CAA2C;QAC3C,sEAAsE;QACtE,OAAO,IAAI,CAAA;uDACwC,UAAU,CAAC,GAAG;UAC3D,MAAM,CACN,YAAY,EACZ,MAAM,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,IAAI,MAAM,CAAC,GAAG,EAAE,EAC3C,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;2BACW,UAAU,CAAC,GAAG;wBACjB,MAAM;kCACI,IAAI,CAAC,gBAAgB;gCACvB,YAAY;4BAChB,IAAI,CAAC,YAAY;0BACnB,CACjB;;KAEJ,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,WAAW,GAAG,GAAG,CAAA,6BAA6B,CAAC;QACrD,MAAM,SAAS,GAAG,GAAG,CAAA,8BAA8B,CAAC;QAEpD,OAAO,GAAG,CAAA;;wBAEU,WAAW;sBACb,SAAS;;;;;;;;;;;KAW1B,CAAC;IACJ,CAAC;CACF,CAAA;AApE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAyB;AAGpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACS;AAJzB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAqE1B","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';\nimport type { CollectionTitles } from '../data-source/models';\nimport './facet-row';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  private facetClicked(e: CustomEvent<FacetEventDetails>) {\n    this.dispatchFacetClickEvent(e.detail);\n  }\n\n  private dispatchFacetClickEvent(detail: FacetEventDetails) {\n    const event = new CustomEvent<FacetEventDetails>('facetClick', {\n      detail,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get facetsTemplate(): TemplateResult | typeof nothing {\n    const { facetGroup } = this;\n    if (!facetGroup) return nothing;\n\n    const facetBuckets = facetGroup.buckets as FacetBucket[];\n    const isLoneBucket = facetBuckets.length === 1;\n\n    // Added data-testid for Playwright testing\n    // Using className and aria-labels is not ideal for Playwright locator\n    return html`\n      <div class=\"facet-rows\" data-testid=\"facets-on-${facetGroup.key}\">\n        ${repeat(\n          facetBuckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket =>\n            html`<facet-row\n              .facetType=${facetGroup.key}\n              .bucket=${bucket}\n              .collectionTitles=${this.collectionTitles}\n              ?omitHideButton=${isLoneBucket}\n              @facetClick=${this.facetClicked}\n            ></facet-row>`,\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.facetsTemplate}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    const columnCount = css`var(--facetsColumnCount, 1)`;\n    const columnGap = css`var(--facetsColumnGap, 15px)`;\n\n    return css`\n      .facet-rows {\n        column-count: ${columnCount};\n        column-gap: ${columnGap};\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/data-source/collection-browser-data-source-interface.d.ts

@@ -45,6 +45,11 @@ export interface CollectionBrowserDataSourceInterface extends ReactiveController
      * to the search service, specifying the exact page/tab to fetch results for.
      */
     readonly pageSpecifierParams: PageSpecifierParams | null;
+    /**
+     * The Lucene query clause corresponding to the current date range,
+     * e.g. `year:[2000 TO 2020]` or `date:[2020-01 TO 2020-12]`.
+     */
+    readonly dateRangeQueryClause: string | undefined;
     /**
      * A FilterMap object representing all filters applied to the current search,
      * including any facets, letter filters, and date ranges.

package/dist/src/data-source/collection-browser-data-source-interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-browser-data-source-interface.js","sourceRoot":"","sources":["../../../src/data-source/collection-browser-data-source-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FilterMap,\n  Aggregation,\n  CollectionExtraInfo,\n  AccountExtraInfo,\n  PageElementMap,\n  SearchResponseSessionContext,\n} from '@internetarchive/search-service';\nimport type { ReactiveController } from 'lit';\nimport type {\n  PrefixFilterType,\n  PrefixFilterCounts,\n  TileModel,\n} from '../models';\nimport type {\n  PageSpecifierParams,\n  CollectionTitles,\n  TVChannelAliases,\n  TVChannelMaps,\n} from './models';\n\nexport interface CollectionBrowserDataSourceInterface\n  extends ReactiveController {\n  /**\n   * How many tile models are present in this data source\n   */\n  readonly size: number;\n\n  /**\n   * How many results there are in the full result set for the current query\n   * (not necessarily all loaded yet).\n   */\n  readonly totalResults: number;\n\n  /**\n   * Whether the host has a valid set of properties for performing a search.\n   * For instance, on the search page this requires a valid search service and a\n   * non-empty query, while collection pages allow searching with an empty query\n   * for MDS but not FTS.\n   */\n  readonly canPerformSearch: boolean;\n\n  /**\n   * Whether the end of the set of results for the current query state has been\n   * encountered (i.e., the last page of results).\n   */\n  readonly endOfDataReached: boolean;\n\n  /**\n   * True if the initial work for a new query state has been completed (i.e., firing initial\n   * page/facet requests). False otherwise.\n   */\n  readonly queryInitialized: boolean;\n\n  /**\n   * A string key compactly representing the current full search state, which can\n   * be used to determine, e.g., when a new search is required or whether an arriving\n   * response is outdated.\n   */\n  readonly pageFetchQueryKey: string;\n\n  /**\n   * Similar to `pageFetchQueryKey`, but excluding properties that do not affect\n   * the validity of a set of facets (e.g., sort).\n   */\n  readonly facetFetchQueryKey: string;\n\n  /**\n   * An object representing any collection- or profile-specific properties to be passed along\n   * to the search service, specifying the exact page/tab to fetch results for.\n   */\n  readonly pageSpecifierParams: PageSpecifierParams | null;\n\n  /**\n   * A FilterMap object representing all filters applied to the current search,\n   * including any facets, letter filters, and date ranges.\n   */\n  readonly filterMap: FilterMap;\n\n  /**\n   * The full set of aggregations retrieved for the current search.\n   */\n  readonly aggregations?: Record<string, Aggregation>;\n\n  /**\n   * The `year_histogram` or `date_histogram` aggregation retrieved for the current search.\n   */\n  readonly histogramAggregation?: Aggregation;\n\n  /**\n   * A map from collection identifiers that appear on hits or aggregations for the\n   * current search, to their human-readable collection titles.\n   */\n  readonly collectionTitles: CollectionTitles;\n\n  /**\n   * A map from TV channel names appearing in `creator` aggregations, to their\n   * more human-readable network names.\n   */\n  readonly tvChannelAliases: TVChannelAliases;\n\n  /**\n   * An object holding mappings from channels to networks, and programs to channels.\n   */\n  readonly tvChannelMaps: TVChannelMaps;\n\n  /**\n   * The \"extra info\" package provided by the PPS for collection pages, including details\n   * used to populate the target collection header & About tab content.\n   */\n  readonly collectionExtraInfo?: CollectionExtraInfo;\n\n  /**\n   * The \"extra info\" package provided by the PPS for profile pages, including details\n   * used to populate the profile header.\n   */\n  readonly accountExtraInfo?: AccountExtraInfo;\n\n  /**\n   * Context about the user session that produced the search response, from the PPS.\n   */\n  readonly sessionContext?: SearchResponseSessionContext;\n\n  /**\n   * The set of requested page elements for profile pages, if applicable. These represent\n   * any content specific to the current profile tab.\n   */\n  readonly pageElements?: PageElementMap;\n\n  /**\n   * An array of the current target collection's parent collections. Should include *all*\n   * ancestors in the collection hierarchy, not just the immediate parent.\n   */\n  readonly parentCollections?: string[];\n\n  /**\n   * An object storing result counts for the current search bucketed by letter prefix.\n   * Keys are the result field on which the prefixes are considered (e.g., title/creator)\n   * and values are a Record mapping letters to their counts.\n   */\n  readonly prefixFilterCountMap: Partial<\n    Record<PrefixFilterType, PrefixFilterCounts>\n  >;\n\n  /**\n   * Any error message from the most recent search results response.\n   */\n  readonly queryErrorMessage?: string;\n\n  /**\n   * An array of all the tile models whose management checkboxes are checked\n   */\n  readonly checkedTileModels: TileModel[];\n\n  /**\n   * An array of all the tile models whose management checkboxes are unchecked\n   */\n  readonly uncheckedTileModels: TileModel[];\n\n  /**\n   * A Promise which, after each query change, resolves once the fetches for the initial\n   * search have completed. Waits for *both* the hits and aggregations fetches to finish.\n   *\n   * Ensure you await this component's `updateComplete` promise before awaiting this\n   * one, to ensure you do not await an obsolete promise from the previous update.\n   */\n  readonly initialSearchComplete: Promise<boolean>;\n\n  /**\n   * Resets the data source to its empty state, with no result pages, aggregations, etc.\n   */\n  reset(): void;\n\n  /**\n   * Resets the data source's result pages, keeping other state intact.\n   */\n  resetPages(): void;\n\n  /**\n   * Adds the given page of tile models to the data source.\n   * If the given page number already exists, that page will be overwritten.\n   * This method expects that the provided tiles already fit the configured page size; it\n   * will not split them into multiple pages.\n   * @param pageNum Which page number to add (indexed starting from 1)\n   * @param pageTiles The array of tile models for the new page\n   */\n  addPage(pageNum: number, pageTiles: TileModel[]): void;\n\n  /**\n   * Adds all of the given pages of tile models to the data source, splitting them into\n   * multiple pages according to the configured page size if necessary. Any pages that\n   * have tiles added by this method will have any existing content overwritten.\n   * @param firstPageNum Which page number to start adding pages from (pages are indexed starting from 1)\n   * @param tiles The full array of tile models to add across one or more pages\n   */\n  addMultiplePages(firstPageNum: number, tiles: TileModel[]): void;\n\n  /**\n   * Returns the given page of tile models from the data source.\n   * @param pageNum Which page number to get (indexed starting from 1)\n   */\n  getPage(pageNum: number): TileModel[];\n\n  /**\n   * Returns the full set of paged tile models stored in this data source.\n   */\n  getAllPages(): Record<string, TileModel[]>;\n\n  /**\n   * Whether the data source contains any tiles for the given page number.\n   * @param pageNum Which page number to query (indexed starting from 1)\n   */\n  hasPage(pageNum: number): boolean;\n\n  /**\n   * Returns the single tile model appearing at the given index in the\n   * data source, with respect to the current page size. Returns `undefined` if\n   * the corresponding page is not present on the data source or if it does not\n   * contain a tile model at the corresponding index.\n   * @param index The 0-based index (within the full data source) of the tile to get\n   */\n  getTileModelAt(index: number): TileModel | undefined;\n\n  /**\n   * Returns the first numeric tile index corresponding to the given tile model object,\n   * or -1 if the given tile model is not present.\n   * @param tile The tile model to search for in the data source\n   */\n  indexOf(tile: TileModel): number;\n\n  /**\n   * Requests that the data source fire a backend request for the given page of results.\n   * @param pageNum Which page number to fetch results for\n   * @param numInitialPages How many pages should be batched together on an initial fetch\n   */\n  fetchPage(pageNum: number, numInitialPages?: number): Promise<void>;\n\n  /**\n   * Requests that the data source update its prefix bucket result counts for the given\n   * type of prefix filter.\n   * @param filterType Which prefixable field to update the buckets for (e.g., title/creator)\n   */\n  updatePrefixFilterCounts(filterType: PrefixFilterType): Promise<void>;\n\n  /**\n   * Fetches and caches the prefix filter counts for the current sort type,\n   * provided it is one that permits prefix filtering. (If not, this does nothing).\n   */\n  updatePrefixFiltersForCurrentSort(): Promise<void>;\n\n  /**\n   * Clears the cached letter counts for both title and creator, and\n   * fetches a new set of counts for whichever of them is the currently\n   * selected sort option (which may be neither).\n   *\n   * Call this whenever the counts are invalidated (e.g., by a query change).\n   */\n  refreshLetterCounts(): void;\n\n  /**\n   * Returns the current page size of the data source.\n   */\n  getPageSize(): number;\n\n  /**\n   * Changes the page size used by the data source, discarding any previously-fetched pages.\n   *\n   * **Note: this operation will reset any data stored in the data source!**\n   * @param pageSize\n   */\n  setPageSize(pageSize: number): void;\n\n  /**\n   * Sets the total number of pages that should be batched together on each initial fetch.\n   * @param pages How many initial pages to batch\n   */\n  setNumInitialPages(numPages: number): void;\n\n  /**\n   * Sets the total result count for this data source to the given value.\n   * @param count The number of total results to set\n   */\n  setTotalResultCount(count: number): void;\n\n  /**\n   * Sets whether this data source should suppress further data fetches, i.e. ignore any\n   * future query changes on its host that would trigger a page/facet fetch.\n   * @param suppressed Whether further fetches for this data source should be suppressed\n   */\n  setFetchesSuppressed(suppressed: boolean): void;\n\n  /**\n   * Sets whether the end of the current data has been reached, indicating whether further\n   * pages should be looked up.\n   * @param reached Whether we are at the end of the data for the current query state\n   */\n  setEndOfDataReached(reached: boolean): void;\n\n  /**\n   * Notifies the data source that a query change has occurred, which may trigger a data\n   * reset & new fetches.\n   */\n  handleQueryChange(): Promise<void>;\n\n  /**\n   * Notifies the data source that the readiness state of the facets has been changed, which\n   * may trigger facet fetches if they were previously delayed.\n   */\n  handleFacetReadinessChange(ready: boolean): Promise<void>;\n\n  /**\n   * Applies the given map function to all of the tile models in every page of the data\n   * source.\n   * @param callback A callback function to apply on each tile model, as with Array.map\n   */\n  map(\n    callback: (\n      model: TileModel,\n      index: number,\n      array: TileModel[],\n    ) => TileModel,\n  ): void;\n\n  /**\n   * Checks every tile's management checkbox\n   */\n  checkAllTiles(): void;\n\n  /**\n   * Unchecks every tile's management checkbox\n   */\n  uncheckAllTiles(): void;\n\n  /**\n   * Removes all tile models that are currently checked & adjusts the paging\n   * of the data source to account for any new gaps in the data.\n   */\n  removeCheckedTiles(): void;\n\n  /**\n   * Fires requests to populate the TV channel mappings (chan2network and programs2chan),\n   * or returns the existing Promise for any such request that has already been made.\n   */\n  populateTVChannelMaps(): Promise<TVChannelMaps>;\n}\n"]}
+{"version":3,"file":"collection-browser-data-source-interface.js","sourceRoot":"","sources":["../../../src/data-source/collection-browser-data-source-interface.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  FilterMap,\n  Aggregation,\n  CollectionExtraInfo,\n  AccountExtraInfo,\n  PageElementMap,\n  SearchResponseSessionContext,\n} from '@internetarchive/search-service';\nimport type { ReactiveController } from 'lit';\nimport type {\n  PrefixFilterType,\n  PrefixFilterCounts,\n  TileModel,\n} from '../models';\nimport type {\n  PageSpecifierParams,\n  CollectionTitles,\n  TVChannelAliases,\n  TVChannelMaps,\n} from './models';\n\nexport interface CollectionBrowserDataSourceInterface\n  extends ReactiveController {\n  /**\n   * How many tile models are present in this data source\n   */\n  readonly size: number;\n\n  /**\n   * How many results there are in the full result set for the current query\n   * (not necessarily all loaded yet).\n   */\n  readonly totalResults: number;\n\n  /**\n   * Whether the host has a valid set of properties for performing a search.\n   * For instance, on the search page this requires a valid search service and a\n   * non-empty query, while collection pages allow searching with an empty query\n   * for MDS but not FTS.\n   */\n  readonly canPerformSearch: boolean;\n\n  /**\n   * Whether the end of the set of results for the current query state has been\n   * encountered (i.e., the last page of results).\n   */\n  readonly endOfDataReached: boolean;\n\n  /**\n   * True if the initial work for a new query state has been completed (i.e., firing initial\n   * page/facet requests). False otherwise.\n   */\n  readonly queryInitialized: boolean;\n\n  /**\n   * A string key compactly representing the current full search state, which can\n   * be used to determine, e.g., when a new search is required or whether an arriving\n   * response is outdated.\n   */\n  readonly pageFetchQueryKey: string;\n\n  /**\n   * Similar to `pageFetchQueryKey`, but excluding properties that do not affect\n   * the validity of a set of facets (e.g., sort).\n   */\n  readonly facetFetchQueryKey: string;\n\n  /**\n   * An object representing any collection- or profile-specific properties to be passed along\n   * to the search service, specifying the exact page/tab to fetch results for.\n   */\n  readonly pageSpecifierParams: PageSpecifierParams | null;\n\n  /**\n   * The Lucene query clause corresponding to the current date range,\n   * e.g. `year:[2000 TO 2020]` or `date:[2020-01 TO 2020-12]`.\n   */\n  readonly dateRangeQueryClause: string | undefined;\n\n  /**\n   * A FilterMap object representing all filters applied to the current search,\n   * including any facets, letter filters, and date ranges.\n   */\n  readonly filterMap: FilterMap;\n\n  /**\n   * The full set of aggregations retrieved for the current search.\n   */\n  readonly aggregations?: Record<string, Aggregation>;\n\n  /**\n   * The `year_histogram` or `date_histogram` aggregation retrieved for the current search.\n   */\n  readonly histogramAggregation?: Aggregation;\n\n  /**\n   * A map from collection identifiers that appear on hits or aggregations for the\n   * current search, to their human-readable collection titles.\n   */\n  readonly collectionTitles: CollectionTitles;\n\n  /**\n   * A map from TV channel names appearing in `creator` aggregations, to their\n   * more human-readable network names.\n   */\n  readonly tvChannelAliases: TVChannelAliases;\n\n  /**\n   * An object holding mappings from channels to networks, and programs to channels.\n   */\n  readonly tvChannelMaps: TVChannelMaps;\n\n  /**\n   * The \"extra info\" package provided by the PPS for collection pages, including details\n   * used to populate the target collection header & About tab content.\n   */\n  readonly collectionExtraInfo?: CollectionExtraInfo;\n\n  /**\n   * The \"extra info\" package provided by the PPS for profile pages, including details\n   * used to populate the profile header.\n   */\n  readonly accountExtraInfo?: AccountExtraInfo;\n\n  /**\n   * Context about the user session that produced the search response, from the PPS.\n   */\n  readonly sessionContext?: SearchResponseSessionContext;\n\n  /**\n   * The set of requested page elements for profile pages, if applicable. These represent\n   * any content specific to the current profile tab.\n   */\n  readonly pageElements?: PageElementMap;\n\n  /**\n   * An array of the current target collection's parent collections. Should include *all*\n   * ancestors in the collection hierarchy, not just the immediate parent.\n   */\n  readonly parentCollections?: string[];\n\n  /**\n   * An object storing result counts for the current search bucketed by letter prefix.\n   * Keys are the result field on which the prefixes are considered (e.g., title/creator)\n   * and values are a Record mapping letters to their counts.\n   */\n  readonly prefixFilterCountMap: Partial<\n    Record<PrefixFilterType, PrefixFilterCounts>\n  >;\n\n  /**\n   * Any error message from the most recent search results response.\n   */\n  readonly queryErrorMessage?: string;\n\n  /**\n   * An array of all the tile models whose management checkboxes are checked\n   */\n  readonly checkedTileModels: TileModel[];\n\n  /**\n   * An array of all the tile models whose management checkboxes are unchecked\n   */\n  readonly uncheckedTileModels: TileModel[];\n\n  /**\n   * A Promise which, after each query change, resolves once the fetches for the initial\n   * search have completed. Waits for *both* the hits and aggregations fetches to finish.\n   *\n   * Ensure you await this component's `updateComplete` promise before awaiting this\n   * one, to ensure you do not await an obsolete promise from the previous update.\n   */\n  readonly initialSearchComplete: Promise<boolean>;\n\n  /**\n   * Resets the data source to its empty state, with no result pages, aggregations, etc.\n   */\n  reset(): void;\n\n  /**\n   * Resets the data source's result pages, keeping other state intact.\n   */\n  resetPages(): void;\n\n  /**\n   * Adds the given page of tile models to the data source.\n   * If the given page number already exists, that page will be overwritten.\n   * This method expects that the provided tiles already fit the configured page size; it\n   * will not split them into multiple pages.\n   * @param pageNum Which page number to add (indexed starting from 1)\n   * @param pageTiles The array of tile models for the new page\n   */\n  addPage(pageNum: number, pageTiles: TileModel[]): void;\n\n  /**\n   * Adds all of the given pages of tile models to the data source, splitting them into\n   * multiple pages according to the configured page size if necessary. Any pages that\n   * have tiles added by this method will have any existing content overwritten.\n   * @param firstPageNum Which page number to start adding pages from (pages are indexed starting from 1)\n   * @param tiles The full array of tile models to add across one or more pages\n   */\n  addMultiplePages(firstPageNum: number, tiles: TileModel[]): void;\n\n  /**\n   * Returns the given page of tile models from the data source.\n   * @param pageNum Which page number to get (indexed starting from 1)\n   */\n  getPage(pageNum: number): TileModel[];\n\n  /**\n   * Returns the full set of paged tile models stored in this data source.\n   */\n  getAllPages(): Record<string, TileModel[]>;\n\n  /**\n   * Whether the data source contains any tiles for the given page number.\n   * @param pageNum Which page number to query (indexed starting from 1)\n   */\n  hasPage(pageNum: number): boolean;\n\n  /**\n   * Returns the single tile model appearing at the given index in the\n   * data source, with respect to the current page size. Returns `undefined` if\n   * the corresponding page is not present on the data source or if it does not\n   * contain a tile model at the corresponding index.\n   * @param index The 0-based index (within the full data source) of the tile to get\n   */\n  getTileModelAt(index: number): TileModel | undefined;\n\n  /**\n   * Returns the first numeric tile index corresponding to the given tile model object,\n   * or -1 if the given tile model is not present.\n   * @param tile The tile model to search for in the data source\n   */\n  indexOf(tile: TileModel): number;\n\n  /**\n   * Requests that the data source fire a backend request for the given page of results.\n   * @param pageNum Which page number to fetch results for\n   * @param numInitialPages How many pages should be batched together on an initial fetch\n   */\n  fetchPage(pageNum: number, numInitialPages?: number): Promise<void>;\n\n  /**\n   * Requests that the data source update its prefix bucket result counts for the given\n   * type of prefix filter.\n   * @param filterType Which prefixable field to update the buckets for (e.g., title/creator)\n   */\n  updatePrefixFilterCounts(filterType: PrefixFilterType): Promise<void>;\n\n  /**\n   * Fetches and caches the prefix filter counts for the current sort type,\n   * provided it is one that permits prefix filtering. (If not, this does nothing).\n   */\n  updatePrefixFiltersForCurrentSort(): Promise<void>;\n\n  /**\n   * Clears the cached letter counts for both title and creator, and\n   * fetches a new set of counts for whichever of them is the currently\n   * selected sort option (which may be neither).\n   *\n   * Call this whenever the counts are invalidated (e.g., by a query change).\n   */\n  refreshLetterCounts(): void;\n\n  /**\n   * Returns the current page size of the data source.\n   */\n  getPageSize(): number;\n\n  /**\n   * Changes the page size used by the data source, discarding any previously-fetched pages.\n   *\n   * **Note: this operation will reset any data stored in the data source!**\n   * @param pageSize\n   */\n  setPageSize(pageSize: number): void;\n\n  /**\n   * Sets the total number of pages that should be batched together on each initial fetch.\n   * @param pages How many initial pages to batch\n   */\n  setNumInitialPages(numPages: number): void;\n\n  /**\n   * Sets the total result count for this data source to the given value.\n   * @param count The number of total results to set\n   */\n  setTotalResultCount(count: number): void;\n\n  /**\n   * Sets whether this data source should suppress further data fetches, i.e. ignore any\n   * future query changes on its host that would trigger a page/facet fetch.\n   * @param suppressed Whether further fetches for this data source should be suppressed\n   */\n  setFetchesSuppressed(suppressed: boolean): void;\n\n  /**\n   * Sets whether the end of the current data has been reached, indicating whether further\n   * pages should be looked up.\n   * @param reached Whether we are at the end of the data for the current query state\n   */\n  setEndOfDataReached(reached: boolean): void;\n\n  /**\n   * Notifies the data source that a query change has occurred, which may trigger a data\n   * reset & new fetches.\n   */\n  handleQueryChange(): Promise<void>;\n\n  /**\n   * Notifies the data source that the readiness state of the facets has been changed, which\n   * may trigger facet fetches if they were previously delayed.\n   */\n  handleFacetReadinessChange(ready: boolean): Promise<void>;\n\n  /**\n   * Applies the given map function to all of the tile models in every page of the data\n   * source.\n   * @param callback A callback function to apply on each tile model, as with Array.map\n   */\n  map(\n    callback: (\n      model: TileModel,\n      index: number,\n      array: TileModel[],\n    ) => TileModel,\n  ): void;\n\n  /**\n   * Checks every tile's management checkbox\n   */\n  checkAllTiles(): void;\n\n  /**\n   * Unchecks every tile's management checkbox\n   */\n  uncheckAllTiles(): void;\n\n  /**\n   * Removes all tile models that are currently checked & adjusts the paging\n   * of the data source to account for any new gaps in the data.\n   */\n  removeCheckedTiles(): void;\n\n  /**\n   * Fires requests to populate the TV channel mappings (chan2network and programs2chan),\n   * or returns the existing Promise for any such request that has already been made.\n   */\n  populateTVChannelMaps(): Promise<TVChannelMaps>;\n}\n"]}

package/dist/src/data-source/collection-browser-data-source.d.ts

@@ -328,7 +328,7 @@ export declare class CollectionBrowserDataSource implements CollectionBrowserDat
      * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
      */
     private get facetQuery();
-    private get dateRangeQueryClause();
+    get dateRangeQueryClause(): string | undefined;
     private get sortFilterQueries();
     /**
      * Returns a query clause identifying the currently selected title filter,

package/dist/src/data-source/collection-browser-data-source.js

@@ -3,6 +3,7 @@ import { prefixFilterAggregationKeys, TileModel, SortField, SORT_OPTIONS, } from
 import { FACETLESS_PAGE_ELEMENTS, } from './models';
 import { sha1 } from '../utils/sha1';
 import { mergeSelectedFacets } from '../utils/facet-utils';
+import { dateFilterField } from '../utils/date-filter-field';
 export class CollectionBrowserDataSource {
     /**
      * @inheritdoc
@@ -559,7 +560,7 @@ export class CollectionBrowserDataSource {
     get filterMap() {
         const builder = new FilterMapBuilder();
         const { minSelectedDate, maxSelectedDate, selectedFacets, internalFilters, selectedTitleFilter, selectedCreatorFilter, } = this.host;
-        const dateField = this.host.searchType === SearchType.TV ? 'date' : 'year';
+        const dateField = dateFilterField(this.host.minSelectedDate, this.host.maxSelectedDate);
         if (minSelectedDate) {
             builder.addFilter(dateField, minSelectedDate, FilterConstraint.GREATER_OR_EQUAL);
         }
@@ -685,7 +686,8 @@ export class CollectionBrowserDataSource {
         if (!this.host.minSelectedDate || !this.host.maxSelectedDate) {
             return undefined;
         }
-        return `year:[${this.host.minSelectedDate} TO ${this.host.maxSelectedDate}]`;
+        const dateField = dateFilterField(this.host.minSelectedDate, this.host.maxSelectedDate);
+        return `${dateField}:[${this.host.minSelectedDate} TO ${this.host.maxSelectedDate}]`;
     }
     get sortFilterQueries() {
         const queries = [this.titleQuery, this.creatorQuery];
@@ -809,10 +811,10 @@ export class CollectionBrowserDataSource {
         }
         const { aggregations, collectionTitles, tvChannelAliases } = success.response;
         this.aggregations = aggregations;
-        this.histogramAggregation =
-            this.host.searchType === SearchType.TV
-                ? aggregations?.date_histogram
-                : aggregations?.year_histogram;
+        const useDateHistogram = this.host.searchType === SearchType.TV || this.host.isTVCollection;
+        this.histogramAggregation = useDateHistogram
+            ? (aggregations?.date_histogram ?? aggregations?.year_histogram)
+            : aggregations?.year_histogram;
         if (collectionTitles) {
             for (const [id, title] of Object.entries(collectionTitles)) {
                 this.collectionTitles.set(id, title);