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

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

@@ -32,8 +32,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 `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key} ${extraNoteSpan}`
-            : html `<a href="/details/${bucket.key}">
-            ${(_c = (_b = this.collectionTitles) === null || _b === void 0 ? void 0 : _b.get(bucket.key)) !== null && _c !== void 0 ? _c : bucket.key}
+            : html `<a href="/details/${bucket.key}">
+            ${(_c = (_b = this.collectionTitles) === null || _b === void 0 ? void 0 : _b.get(bucket.key)) !== null && _c !== void 0 ? _c : bucket.key}
           </a> `;
         const facetHidden = bucket.state === 'hidden';
         const facetSelected = bucket.state === 'selected';
@@ -46,53 +46,53 @@ 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}
-          />
-          <input
-            type="checkbox"
-            id=${negativeCheckboxId}
-            .name=${facetType}
-            .value=${bucket.key}
+        }}
+            .checked=${facetSelected}
+            class="select-facet-checkbox"
+            title=${onlyShowText}
+            id=${showOnlyCheckboxId}
+            data-testid=${showOnlyCheckboxId}
+          />
+          <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="eye">${eyeIcon}</span>
-            <span class="eye-closed">${eyeClosedIcon}</span>
-          </label>
-        </div>
-        <label
-          for=${showOnlyCheckboxId}
-          class="facet-info-display"
-          title=${onlyShowText}
-          aria-label=${ariaLabel}
-        >
-          <div class="facet-title">${bucketTextDisplay}</div>
-          <div class="facet-count">${bucket.count.toLocaleString()}</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="eye">${eyeIcon}</span>
+            <span class="eye-closed">${eyeClosedIcon}</span>
+          </label>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucket.count.toLocaleString()}</div>
+        </label>
+      </div>
     `;
     }
     //
@@ -148,91 +148,91 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
     static get styles() {
         const facetRowBorderTop = css `var(--facet-row-border-top, 1px solid transparent)`;
         const facetRowBorderBottom = css `var(--facet-row-border-bottom, 1px solid transparent)`;
-        return css `
-      async-collection-name {
-        display: contents;
-      }
-      .facet-checkboxes {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: 15px;
-      }
-      .facet-checkboxes input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkboxes input {
-        height: 15px;
-        width: 15px;
-        margin: 0;
-      }
-      .facet-row-container {
-        display: flex;
-        font-weight: 500;
-        font-size: 1.2rem;
-        margin: 2.5px auto;
-        height: auto;
-        border-top: ${facetRowBorderTop};
-        border-bottom: ${facetRowBorderBottom};
-        overflow: hidden;
-      }
-      .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 {
-        display: none;
-      }
-      .hide-facet-icon {
-        width: 15px;
-        height: 15px;
-        cursor: pointer;
-        opacity: 0.3;
-        display: inline-block;
-      }
-      .hide-facet-icon:hover,
-      .active {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye,
-      .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 {
-        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 css `
+      async-collection-name {
+        display: contents;
+      }
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: 15px;
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: 15px;
+        width: 15px;
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 2.5px auto;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+        overflow: hidden;
+      }
+      .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 {
+        display: none;
+      }
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+        opacity: 0.3;
+        display: inline-block;
+      }
+      .hide-facet-icon:hover,
+      .active {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye,
+      .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 {
+        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;
+      }
     `;
     }
 };

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 {\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';\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  /** 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 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          <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=\"eye\">${eyeIcon}</span>\n            <span class=\"eye-closed\">${eyeClosedIcon}</span>\n          </label>\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\">${bucket.count.toLocaleString()}</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\n    return css`\n      async-collection-name {\n        display: contents;\n      }\n      .facet-checkboxes {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: 15px;\n      }\n      .facet-checkboxes input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkboxes input {\n        height: 15px;\n        width: 15px;\n        margin: 0;\n      }\n      .facet-row-container {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 2.5px auto;\n        height: auto;\n        border-top: ${facetRowBorderTop};\n        border-bottom: ${facetRowBorderBottom};\n        overflow: hidden;\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        display: none;\n      }\n      .hide-facet-icon {\n        width: 15px;\n        height: 15px;\n        cursor: pointer;\n        opacity: 0.3;\n        display: inline-block;\n      }\n      .hide-facet-icon:hover,\n      .active {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye,\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 {\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}\n"]}
+{"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\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  /** 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 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          <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=\"eye\">${eyeIcon}</span>\r\n            <span class=\"eye-closed\">${eyeClosedIcon}</span>\r\n          </label>\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\">${bucket.count.toLocaleString()}</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\r\n    return css`\r\n      async-collection-name {\r\n        display: contents;\r\n      }\r\n      .facet-checkboxes {\r\n        margin: 0 5px 0 0;\r\n        display: flex;\r\n        height: 15px;\r\n      }\r\n      .facet-checkboxes input:first-child {\r\n        margin-right: 5px;\r\n      }\r\n      .facet-checkboxes input {\r\n        height: 15px;\r\n        width: 15px;\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: 2.5px auto;\r\n        height: auto;\r\n        border-top: ${facetRowBorderTop};\r\n        border-bottom: ${facetRowBorderBottom};\r\n        overflow: hidden;\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        display: none;\r\n      }\r\n      .hide-facet-icon {\r\n        width: 15px;\r\n        height: 15px;\r\n        cursor: pointer;\r\n        opacity: 0.3;\r\n        display: inline-block;\r\n      }\r\n      .hide-facet-icon:hover,\r\n      .active {\r\n        opacity: 1;\r\n      }\r\n      .hide-facet-icon:hover .eye,\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 {\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}\r\n"]}

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js

@@ -33,14 +33,14 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
         if (!this.query)
             return nothing;
         const shouldShowLabel = !!this.label && this.smartFacets.length > 0;
-        return html `
-      <div id="smart-facets-container">
-        ${this.filtersToggleTemplate}
+        return html `
+      <div id="smart-facets-container">
+        ${this.filtersToggleTemplate}
         ${shouldShowLabel
             ? html `<p id="filters-label">${this.label}</p>`
-            : nothing}
-        ${repeat(this.smartFacets, f => `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`, facet => this.makeSmartFacet(facet))}
-      </div>
+            : nothing}
+        ${repeat(this.smartFacets, f => `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`, facet => this.makeSmartFacet(facet))}
+      </div>
     `;
     }
     willUpdate(changed) {
@@ -99,38 +99,38 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
     }
     smartFacetButton(facet) {
         var _a;
-        return html `
-      <smart-facet-button
-        .facetInfo=${facet}
-        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}
-        .selected=${(_a = facet.selected) !== null && _a !== void 0 ? _a : false}
-        @facetClick=${this.facetClicked}
-      ></smart-facet-button>
+        return html `
+      <smart-facet-button
+        .facetInfo=${facet}
+        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}
+        .selected=${(_a = facet.selected) !== null && _a !== void 0 ? _a : false}
+        @facetClick=${this.facetClicked}
+      ></smart-facet-button>
     `;
     }
     smartFacetDropdown(facets) {
-        return html `
-      <smart-facet-dropdown
-        .facetInfo=${facets}
-        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
-        .activeFacetRef=${facets[0].facets[0]}
-        @facetClick=${this.dropdownOptionClicked}
-        @dropdownClick=${this.dropdownClicked}
-      ></smart-facet-dropdown>
+        return html `
+      <smart-facet-dropdown
+        .facetInfo=${facets}
+        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
+        .activeFacetRef=${facets[0].facets[0]}
+        @facetClick=${this.dropdownOptionClicked}
+        @dropdownClick=${this.dropdownClicked}
+      ></smart-facet-dropdown>
     `;
     }
     get filtersToggleTemplate() {
         if (!this.filterToggleShown)
             return nothing;
-        return html `
-      <button
-        id="filters-toggle"
-        class=${this.filterToggleActive ? 'active' : ''}
-        title="${this.filterToggleActive ? 'Hide' : 'Show'} filters pane"
-        @click=${this.filterToggleClicked}
-      >
-        ${filterIcon}
-      </button>
+        return html `
+      <button
+        id="filters-toggle"
+        class=${this.filterToggleActive ? 'active' : ''}
+        title="${this.filterToggleActive ? 'Hide' : 'Show'} filters pane"
+        @click=${this.filterToggleClicked}
+      >
+        ${filterIcon}
+      </button>
     `;
     }
     get facetsToDisplay() {
@@ -298,51 +298,51 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
     // STYLES
     //
     static get styles() {
-        return css `
-      #smart-facets-container {
-        display: flex;
-        align-items: center;
-        gap: 5px 10px;
-        padding: 10px 0;
-        white-space: nowrap;
-        overflow: scroll hidden;
-        scrollbar-width: none;
-      }
-
-      #filters-toggle {
-        margin: 0;
-        border: 0;
-        padding: 5px 8px;
-        border-radius: 5px;
-        background: white;
-        color: #2c2c2c;
-        border: 1px solid #194880;
-        font-size: 1.4rem;
-        font-family: inherit;
-        text-decoration: none;
-        cursor: pointer;
-      }
-
-      #filters-toggle.active {
-        background: #194880;
-        color: white;
-      }
-
-      #filters-toggle > svg {
-        width: 12px;
-        filter: invert(0.16667);
-        vertical-align: -1px;
-      }
-
-      #filters-toggle.active > svg {
-        filter: invert(1);
-      }
-
-      #filters-label {
-        font-size: 1.4rem;
-        font-weight: var(--smartFacetLabelFontWeight, normal);
-        margin: 0 -5px 0 0;
-      }
+        return css `
+      #smart-facets-container {
+        display: flex;
+        align-items: center;
+        gap: 5px 10px;
+        padding: 10px 0;
+        white-space: nowrap;
+        overflow: scroll hidden;
+        scrollbar-width: none;
+      }
+
+      #filters-toggle {
+        margin: 0;
+        border: 0;
+        padding: 5px 8px;
+        border-radius: 5px;
+        background: white;
+        color: #2c2c2c;
+        border: 1px solid #194880;
+        font-size: 1.4rem;
+        font-family: inherit;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      #filters-toggle.active {
+        background: #194880;
+        color: white;
+      }
+
+      #filters-toggle > svg {
+        width: 12px;
+        filter: invert(0.16667);
+        vertical-align: -1px;
+      }
+
+      #filters-toggle.active > svg {
+        filter: invert(1);
+      }
+
+      #filters-label {
+        font-size: 1.4rem;
+        font-weight: var(--smartFacetLabelFontWeight, normal);
+        margin: 0 -5px 0 0;
+      }
     `;
     }
 };

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type {\n  FacetEventDetails,\n  FacetOption,\n  FacetState,\n  SelectedFacets,\n} from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n  collection: 'Collection: ',\n  creator: 'By: ',\n  subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  /** The map from collection identifiers to their titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @property({ type: Boolean }) filterToggleShown = false;\n\n  @property({ type: Boolean }) filterToggleActive = false;\n\n  @property({ type: String }) label?: string;\n\n  @state() private heuristicRecs: SmartFacet[] = [];\n\n  @state() private smartFacets: SmartFacet[][] = [];\n\n  @state() private lastAggregations?: Record<string, Aggregation>;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    if (!this.query) return nothing;\n\n    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\n    return html`\n      <div id=\"smart-facets-container\">\n        ${this.filtersToggleTemplate}\n        ${shouldShowLabel\n          ? html`<p id=\"filters-label\">${this.label}</p>`\n          : nothing}\n        ${repeat(\n          this.smartFacets,\n          f =>\n            `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\n          facet => this.makeSmartFacet(facet),\n        )}\n      </div>\n    `;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    let shouldUpdateSmartFacets = false;\n\n    if (changed.has('query')) {\n      log('query change', changed.get('query'), this.query);\n      this.lastAggregations = undefined;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (\n      changed.has('aggregations') &&\n      !this.lastAggregations &&\n      this.aggregations &&\n      Object.keys(this.aggregations).length > 0\n    ) {\n      log('aggs change', changed.get('aggregations'), this.aggregations);\n      this.lastAggregations = this.aggregations;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (shouldUpdateSmartFacets) {\n      log('should update smart facets, doing so...');\n      this.updateSmartFacets();\n    }\n  }\n\n  refresh(): void {\n    this.lastAggregations = this.aggregations;\n    this.updateSmartFacets();\n  }\n\n  deselectAll(): void {\n    for (const sf of this.smartFacets) {\n      for (const facet of sf) {\n        facet.selected = false;\n      }\n    }\n    this.requestUpdate();\n  }\n\n  private async updateSmartFacets(): Promise<void> {\n    log('updating smart facets');\n    if (this.query) {\n      this.heuristicRecs =\n        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n      log('heuristic recs are', this.heuristicRecs);\n      this.smartFacets = dedupe(this.facetsToDisplay);\n      log('smart facets are', this.smartFacets);\n    }\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private makeSmartFacet(facets: SmartFacet[]) {\n    if (facets.length === 0) {\n      return nothing;\n    }\n    if (facets.length === 1) {\n      return this.smartFacetButton(facets[0]);\n    }\n    return this.smartFacetDropdown(facets);\n  }\n\n  private smartFacetButton(facet: SmartFacet) {\n    return html`\n      <smart-facet-button\n        .facetInfo=${facet}\n        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n        .selected=${facet.selected ?? false}\n        @facetClick=${this.facetClicked}\n      ></smart-facet-button>\n    `;\n  }\n\n  private smartFacetDropdown(facets: SmartFacet[]) {\n    return html`\n      <smart-facet-dropdown\n        .facetInfo=${facets}\n        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n        .activeFacetRef=${facets[0].facets[0]}\n        @facetClick=${this.dropdownOptionClicked}\n        @dropdownClick=${this.dropdownClicked}\n      ></smart-facet-dropdown>\n    `;\n  }\n\n  private get filtersToggleTemplate(): TemplateResult | typeof nothing {\n    if (!this.filterToggleShown) return nothing;\n\n    return html`\n      <button\n        id=\"filters-toggle\"\n        class=${this.filterToggleActive ? 'active' : ''}\n        title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n        @click=${this.filterToggleClicked}\n      >\n        ${filterIcon}\n      </button>\n    `;\n  }\n\n  private get facetsToDisplay(): SmartFacet[][] {\n    const facets: SmartFacet[][] = [];\n\n    if (this.heuristicRecs.length > 0) {\n      for (const rec of this.heuristicRecs) {\n        // Suppress mediatype-only facets for now.\n        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n          continue;\n\n        facets.push([rec]);\n      }\n    }\n\n    if (this.lastAggregations) {\n      const keys = [\n        'mediatype',\n        'year',\n        'language',\n        'creator',\n        'subject',\n        'collection',\n      ];\n      for (const key of keys) {\n        const agg = this.lastAggregations[key];\n        if (!agg) continue;\n        if (agg.buckets.length === 0) continue;\n        if (['lending', 'year_histogram', 'date_histogram'].includes(key))\n          continue;\n        if (typeof agg.buckets[0] === 'number') continue;\n\n        if (\n          key === 'mediatype' &&\n          this.selectedFacets &&\n          Object.values(this.selectedFacets.mediatype ?? {}).some(\n            bucket => bucket.state !== 'none',\n          )\n        ) {\n          continue;\n        }\n\n        const facetType = key as FacetOption;\n        const buckets = agg.buckets as Bucket[];\n\n        const unusedBuckets = buckets.filter(b => {\n          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n          if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n            return false;\n          }\n          return true;\n        });\n\n        if (facetType === 'mediatype') {\n          continue;\n          // Don't include mediatype bubbles\n        } else if (facetType === 'collection' || facetType === 'subject') {\n          const topBuckets = unusedBuckets.slice(0, 5);\n          facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n        } else {\n          facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n        }\n      }\n    }\n\n    return facets;\n  }\n\n  private toSmartFacet(\n    facetType: FacetOption,\n    buckets: Bucket[],\n    // prefix = true\n  ): SmartFacet {\n    return {\n      facets: buckets.map(bucket => {\n        let displayText = capitalize(bucket.key.toString());\n        if (facetType === 'collection') {\n          const title = this.collectionTitles?.get(bucket.key.toString());\n          if (title) displayText = title;\n        }\n\n        return {\n          facetType,\n          bucketKey: bucket.key.toString(),\n          displayText,\n        };\n      }),\n    } as SmartFacet;\n  }\n\n  /**\n   * Toggles the state of the given smart facet, and updates the selected facets accordingly.\n   */\n  private toggleSmartFacet(\n    facet: SmartFacet,\n    details: FacetEventDetails[],\n  ): void {\n    let newState: FacetState;\n    if (facet.selected) {\n      // When deselected, leave the smart facet where it is\n      newState = 'none';\n      this.smartFacets = this.smartFacets.map(f => {\n        if (f[0] === facet) return [{ ...facet, selected: false }];\n        return f;\n      });\n    } else {\n      // When selected, move the toggled smart facet to the front of the list\n      newState = 'selected';\n      this.smartFacets = [\n        [{ ...facet, selected: true }],\n        ...this.smartFacets.filter(f => f[0] !== facet),\n      ];\n    }\n\n    this.updateSelectedFacets(\n      details.map(facet => ({\n        ...facet,\n        bucket: {\n          ...facet.bucket,\n          state: newState,\n        },\n      })),\n    );\n  }\n\n  /**\n   * Updates the selected facet buckets for each of the given facets,\n   * and emits a `facetsChanged` event to notify parent components of\n   * the new state.\n   */\n  private updateSelectedFacets(facets: FacetEventDetails[]): void {\n    for (const facet of facets) {\n      this.selectedFacets = updateSelectedFacetBucket(\n        this.selectedFacets,\n        facet.facetType,\n        facet.bucket,\n        true,\n      );\n    }\n\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Handler for when a smart facet button is clicked\n   */\n  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n    this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);\n  }\n\n  /**\n   * Handler for when an option in a smart facet dropdown menu is selected\n   */\n  private dropdownOptionClicked(e: CustomEvent<SmartFacetEvent>): void {\n    const existingFacet = this.smartFacets.find(\n      sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),\n    );\n    if (existingFacet) {\n      // The facet already exists outside the dropdown, so just select it there\n      this.toggleSmartFacet(existingFacet[0], e.detail.details);\n      return;\n    }\n\n    // Otherwise, prepend a new smart facet for the selected option\n    this.smartFacets = [\n      [{ ...e.detail.smartFacet, selected: true }],\n      ...this.smartFacets,\n    ];\n\n    this.updateSelectedFacets(e.detail.details);\n  }\n\n  /**\n   * Handler for when any dropdown is clicked (whether button, caret, or menu item)\n   */\n  private dropdownClicked(e: CustomEvent<SmartFacetDropdown>): void {\n    log('smart bar: onDropdownClick', e.detail);\n    this.shadowRoot\n      ?.querySelectorAll('smart-facet-dropdown')\n      .forEach(dropdown => {\n        if (dropdown !== e.detail) {\n          log('closing', dropdown);\n          (dropdown as SmartFacetDropdown).close();\n        }\n      });\n  }\n\n  private filterToggleClicked(): void {\n    this.dispatchEvent(new CustomEvent('filtersToggled'));\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #smart-facets-container {\n        display: flex;\n        align-items: center;\n        gap: 5px 10px;\n        padding: 10px 0;\n        white-space: nowrap;\n        overflow: scroll hidden;\n        scrollbar-width: none;\n      }\n\n      #filters-toggle {\n        margin: 0;\n        border: 0;\n        padding: 5px 8px;\n        border-radius: 5px;\n        background: white;\n        color: #2c2c2c;\n        border: 1px solid #194880;\n        font-size: 1.4rem;\n        font-family: inherit;\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      #filters-toggle.active {\n        background: #194880;\n        color: white;\n      }\n\n      #filters-toggle > svg {\n        width: 12px;\n        filter: invert(0.16667);\n        vertical-align: -1px;\n      }\n\n      #filters-toggle.active > svg {\n        filter: invert(1);\n      }\n\n      #filters-label {\n        font-size: 1.4rem;\n        font-weight: var(--smartFacetLabelFontWeight, normal);\n        margin: 0 -5px 0 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.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  PropertyValues,\r\n} from 'lit';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\r\nimport type { CollectionTitles } from '../../data-source/models';\r\nimport type {\r\n  FacetEventDetails,\r\n  FacetOption,\r\n  FacetState,\r\n  SelectedFacets,\r\n} from '../../models';\r\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\r\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\r\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\r\nimport type { SmartFacet, SmartFacetEvent } from './models';\r\nimport { smartFacetEquals } from './smart-facet-equals';\r\nimport { dedupe } from './dedupe';\r\nimport { log } from '../../utils/log';\r\nimport filterIcon from '../../assets/img/icons/filter';\r\n\r\nimport './smart-facet-button';\r\nimport './smart-facet-dropdown';\r\n\r\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\r\n  collection: 'Collection: ',\r\n  creator: 'By: ',\r\n  subject: 'About: ',\r\n};\r\n\r\nfunction capitalize(str: string) {\r\n  return str.charAt(0).toUpperCase() + str.slice(1);\r\n}\r\n\r\n@customElement('smart-facet-bar')\r\nexport class SmartFacetBar extends LitElement {\r\n  @property({ type: String }) query?: string;\r\n\r\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\r\n\r\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n  /** The map from collection identifiers to their titles */\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @property({ type: Boolean }) filterToggleShown = false;\r\n\r\n  @property({ type: Boolean }) filterToggleActive = false;\r\n\r\n  @property({ type: String }) label?: string;\r\n\r\n  @state() private heuristicRecs: SmartFacet[] = [];\r\n\r\n  @state() private smartFacets: SmartFacet[][] = [];\r\n\r\n  @state() private lastAggregations?: Record<string, Aggregation>;\r\n\r\n  //\r\n  // COMPONENT LIFECYCLE METHODS\r\n  //\r\n\r\n  render() {\r\n    if (!this.query) return nothing;\r\n\r\n    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\r\n    return html`\r\n      <div id=\"smart-facets-container\">\r\n        ${this.filtersToggleTemplate}\r\n        ${shouldShowLabel\r\n          ? html`<p id=\"filters-label\">${this.label}</p>`\r\n          : nothing}\r\n        ${repeat(\r\n          this.smartFacets,\r\n          f =>\r\n            `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\r\n          facet => this.makeSmartFacet(facet),\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  protected willUpdate(changed: PropertyValues): void {\r\n    let shouldUpdateSmartFacets = false;\r\n\r\n    if (changed.has('query')) {\r\n      log('query change', changed.get('query'), this.query);\r\n      this.lastAggregations = undefined;\r\n      shouldUpdateSmartFacets = true;\r\n    }\r\n\r\n    if (\r\n      changed.has('aggregations') &&\r\n      !this.lastAggregations &&\r\n      this.aggregations &&\r\n      Object.keys(this.aggregations).length > 0\r\n    ) {\r\n      log('aggs change', changed.get('aggregations'), this.aggregations);\r\n      this.lastAggregations = this.aggregations;\r\n      shouldUpdateSmartFacets = true;\r\n    }\r\n\r\n    if (shouldUpdateSmartFacets) {\r\n      log('should update smart facets, doing so...');\r\n      this.updateSmartFacets();\r\n    }\r\n  }\r\n\r\n  refresh(): void {\r\n    this.lastAggregations = this.aggregations;\r\n    this.updateSmartFacets();\r\n  }\r\n\r\n  deselectAll(): void {\r\n    for (const sf of this.smartFacets) {\r\n      for (const facet of sf) {\r\n        facet.selected = false;\r\n      }\r\n    }\r\n    this.requestUpdate();\r\n  }\r\n\r\n  private async updateSmartFacets(): Promise<void> {\r\n    log('updating smart facets');\r\n    if (this.query) {\r\n      this.heuristicRecs =\r\n        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\r\n      log('heuristic recs are', this.heuristicRecs);\r\n      this.smartFacets = dedupe(this.facetsToDisplay);\r\n      log('smart facets are', this.smartFacets);\r\n    }\r\n  }\r\n\r\n  //\r\n  // OTHER METHODS\r\n  //\r\n\r\n  private makeSmartFacet(facets: SmartFacet[]) {\r\n    if (facets.length === 0) {\r\n      return nothing;\r\n    }\r\n    if (facets.length === 1) {\r\n      return this.smartFacetButton(facets[0]);\r\n    }\r\n    return this.smartFacetDropdown(facets);\r\n  }\r\n\r\n  private smartFacetButton(facet: SmartFacet) {\r\n    return html`\r\n      <smart-facet-button\r\n        .facetInfo=${facet}\r\n        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\r\n        .selected=${facet.selected ?? false}\r\n        @facetClick=${this.facetClicked}\r\n      ></smart-facet-button>\r\n    `;\r\n  }\r\n\r\n  private smartFacetDropdown(facets: SmartFacet[]) {\r\n    return html`\r\n      <smart-facet-dropdown\r\n        .facetInfo=${facets}\r\n        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\r\n        .activeFacetRef=${facets[0].facets[0]}\r\n        @facetClick=${this.dropdownOptionClicked}\r\n        @dropdownClick=${this.dropdownClicked}\r\n      ></smart-facet-dropdown>\r\n    `;\r\n  }\r\n\r\n  private get filtersToggleTemplate(): TemplateResult | typeof nothing {\r\n    if (!this.filterToggleShown) return nothing;\r\n\r\n    return html`\r\n      <button\r\n        id=\"filters-toggle\"\r\n        class=${this.filterToggleActive ? 'active' : ''}\r\n        title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\r\n        @click=${this.filterToggleClicked}\r\n      >\r\n        ${filterIcon}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  private get facetsToDisplay(): SmartFacet[][] {\r\n    const facets: SmartFacet[][] = [];\r\n\r\n    if (this.heuristicRecs.length > 0) {\r\n      for (const rec of this.heuristicRecs) {\r\n        // Suppress mediatype-only facets for now.\r\n        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\r\n          continue;\r\n\r\n        facets.push([rec]);\r\n      }\r\n    }\r\n\r\n    if (this.lastAggregations) {\r\n      const keys = [\r\n        'mediatype',\r\n        'year',\r\n        'language',\r\n        'creator',\r\n        'subject',\r\n        'collection',\r\n      ];\r\n      for (const key of keys) {\r\n        const agg = this.lastAggregations[key];\r\n        if (!agg) continue;\r\n        if (agg.buckets.length === 0) continue;\r\n        if (['lending', 'year_histogram', 'date_histogram'].includes(key))\r\n          continue;\r\n        if (typeof agg.buckets[0] === 'number') continue;\r\n\r\n        if (\r\n          key === 'mediatype' &&\r\n          this.selectedFacets &&\r\n          Object.values(this.selectedFacets.mediatype ?? {}).some(\r\n            bucket => bucket.state !== 'none',\r\n          )\r\n        ) {\r\n          continue;\r\n        }\r\n\r\n        const facetType = key as FacetOption;\r\n        const buckets = agg.buckets as Bucket[];\r\n\r\n        const unusedBuckets = buckets.filter(b => {\r\n          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\r\n          if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\r\n            return false;\r\n          }\r\n          return true;\r\n        });\r\n\r\n        if (facetType === 'mediatype') {\r\n          continue;\r\n          // Don't include mediatype bubbles\r\n        } else if (facetType === 'collection' || facetType === 'subject') {\r\n          const topBuckets = unusedBuckets.slice(0, 5);\r\n          facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\r\n        } else {\r\n          facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\r\n        }\r\n      }\r\n    }\r\n\r\n    return facets;\r\n  }\r\n\r\n  private toSmartFacet(\r\n    facetType: FacetOption,\r\n    buckets: Bucket[],\r\n    // prefix = true\r\n  ): SmartFacet {\r\n    return {\r\n      facets: buckets.map(bucket => {\r\n        let displayText = capitalize(bucket.key.toString());\r\n        if (facetType === 'collection') {\r\n          const title = this.collectionTitles?.get(bucket.key.toString());\r\n          if (title) displayText = title;\r\n        }\r\n\r\n        return {\r\n          facetType,\r\n          bucketKey: bucket.key.toString(),\r\n          displayText,\r\n        };\r\n      }),\r\n    } as SmartFacet;\r\n  }\r\n\r\n  /**\r\n   * Toggles the state of the given smart facet, and updates the selected facets accordingly.\r\n   */\r\n  private toggleSmartFacet(\r\n    facet: SmartFacet,\r\n    details: FacetEventDetails[],\r\n  ): void {\r\n    let newState: FacetState;\r\n    if (facet.selected) {\r\n      // When deselected, leave the smart facet where it is\r\n      newState = 'none';\r\n      this.smartFacets = this.smartFacets.map(f => {\r\n        if (f[0] === facet) return [{ ...facet, selected: false }];\r\n        return f;\r\n      });\r\n    } else {\r\n      // When selected, move the toggled smart facet to the front of the list\r\n      newState = 'selected';\r\n      this.smartFacets = [\r\n        [{ ...facet, selected: true }],\r\n        ...this.smartFacets.filter(f => f[0] !== facet),\r\n      ];\r\n    }\r\n\r\n    this.updateSelectedFacets(\r\n      details.map(facet => ({\r\n        ...facet,\r\n        bucket: {\r\n          ...facet.bucket,\r\n          state: newState,\r\n        },\r\n      })),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Updates the selected facet buckets for each of the given facets,\r\n   * and emits a `facetsChanged` event to notify parent components of\r\n   * the new state.\r\n   */\r\n  private updateSelectedFacets(facets: FacetEventDetails[]): void {\r\n    for (const facet of facets) {\r\n      this.selectedFacets = updateSelectedFacetBucket(\r\n        this.selectedFacets,\r\n        facet.facetType,\r\n        facet.bucket,\r\n        true,\r\n      );\r\n    }\r\n\r\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\r\n      detail: this.selectedFacets,\r\n    });\r\n    this.dispatchEvent(event);\r\n  }\r\n\r\n  /**\r\n   * Handler for when a smart facet button is clicked\r\n   */\r\n  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\r\n    this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);\r\n  }\r\n\r\n  /**\r\n   * Handler for when an option in a smart facet dropdown menu is selected\r\n   */\r\n  private dropdownOptionClicked(e: CustomEvent<SmartFacetEvent>): void {\r\n    const existingFacet = this.smartFacets.find(\r\n      sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),\r\n    );\r\n    if (existingFacet) {\r\n      // The facet already exists outside the dropdown, so just select it there\r\n      this.toggleSmartFacet(existingFacet[0], e.detail.details);\r\n      return;\r\n    }\r\n\r\n    // Otherwise, prepend a new smart facet for the selected option\r\n    this.smartFacets = [\r\n      [{ ...e.detail.smartFacet, selected: true }],\r\n      ...this.smartFacets,\r\n    ];\r\n\r\n    this.updateSelectedFacets(e.detail.details);\r\n  }\r\n\r\n  /**\r\n   * Handler for when any dropdown is clicked (whether button, caret, or menu item)\r\n   */\r\n  private dropdownClicked(e: CustomEvent<SmartFacetDropdown>): void {\r\n    log('smart bar: onDropdownClick', e.detail);\r\n    this.shadowRoot\r\n      ?.querySelectorAll('smart-facet-dropdown')\r\n      .forEach(dropdown => {\r\n        if (dropdown !== e.detail) {\r\n          log('closing', dropdown);\r\n          (dropdown as SmartFacetDropdown).close();\r\n        }\r\n      });\r\n  }\r\n\r\n  private filterToggleClicked(): void {\r\n    this.dispatchEvent(new CustomEvent('filtersToggled'));\r\n  }\r\n\r\n  //\r\n  // STYLES\r\n  //\r\n\r\n  static get styles(): CSSResultGroup {\r\n    return css`\r\n      #smart-facets-container {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px 10px;\r\n        padding: 10px 0;\r\n        white-space: nowrap;\r\n        overflow: scroll hidden;\r\n        scrollbar-width: none;\r\n      }\r\n\r\n      #filters-toggle {\r\n        margin: 0;\r\n        border: 0;\r\n        padding: 5px 8px;\r\n        border-radius: 5px;\r\n        background: white;\r\n        color: #2c2c2c;\r\n        border: 1px solid #194880;\r\n        font-size: 1.4rem;\r\n        font-family: inherit;\r\n        text-decoration: none;\r\n        cursor: pointer;\r\n      }\r\n\r\n      #filters-toggle.active {\r\n        background: #194880;\r\n        color: white;\r\n      }\r\n\r\n      #filters-toggle > svg {\r\n        width: 12px;\r\n        filter: invert(0.16667);\r\n        vertical-align: -1px;\r\n      }\r\n\r\n      #filters-toggle.active > svg {\r\n        filter: invert(1);\r\n      }\r\n\r\n      #filters-label {\r\n        font-size: 1.4rem;\r\n        font-weight: var(--smartFacetLabelFontWeight, normal);\r\n        margin: 0 -5px 0 0;\r\n      }\r\n    `;\r\n  }\r\n}\r\n"]}