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

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

@@ -20,7 +20,6 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
      * the display name, and the count.
      */
     get facetRowTemplate() {
-        var _a, _b, _c, _d;
         const { bucket, facetType } = this;
         if (!bucket || !facetType)
             return nothing;
@@ -32,14 +31,14 @@ let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
         // For collections, we render the collection title as a link.
         // 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 `${bucket.displayText ?? 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}
+            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
           </a> `;
         const bucketCountText = bucket.count > 0 ? bucket.count.toLocaleString() : '';
         const facetHidden = bucket.state === 'hidden';
         const facetSelected = bucket.state === 'selected';
-        const titleText = `${facetType}: ${(_d = bucket.displayText) !== null && _d !== void 0 ? _d : bucket.key}`;
+        const titleText = `${facetType}: ${bucket.displayText ?? bucket.key}`;
         const onlyShowText = facetSelected
             ? `Show all ${facetType}s`
             : `Only show ${titleText}`;

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  /** 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 class=\"hide-facet-container\">\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 {\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  /** 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 class=\"hide-facet-container\">\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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/collection-facets/models.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAC","sourcesContent":["/**\r\n * Maximum number of aggregations to include in the More... facet dialogs.\r\n */\r\nexport const MORE_FACETS__MAX_AGGREGATIONS = 10000;\r\n\r\n/**\r\n * Default number of facets to show per page of the More... facet dialogs.\r\n * Can be overridden via component property.\r\n */\r\nexport const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;\r\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../src/collection-facets/models.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Maximum number of aggregations to include in the More... facet dialogs.\n */\nexport const MORE_FACETS__MAX_AGGREGATIONS = 10000;\n\n/**\n * Default number of facets to show per page of the More... facet dialogs.\n * Can be overridden via component property.\n */\nexport const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;\n"]}

package/dist/src/collection-facets/more-facets-content.js

@@ -70,9 +70,8 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     setupEscapeListeners() {
         if (this.modalManager) {
             document.addEventListener('keydown', (e) => {
-                var _a;
                 if (e.key === 'Escape') {
-                    (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+                    this.modalManager?.closeModal();
                 }
             });
         }
@@ -84,10 +83,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
      * Whether facet requests are for the search_results page type (either defaulted or explicitly).
      */
     get isSearchResultsPage() {
-        var _a;
         // Default page type is search_results when none is specified, so we check
         // for undefined as well.
-        const pageType = (_a = this.pageSpecifierParams) === null || _a === void 0 ? void 0 : _a.pageType;
+        const pageType = this.pageSpecifierParams?.pageType;
         return pageType === undefined || pageType === 'search_results';
     }
     /**
@@ -95,10 +93,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
      * - this.aggregations - hold result of search service and being used for further processing.
      */
     async updateSpecificFacets() {
-        var _a, _b, _c, _d, _e, _f;
         if (!this.facetKey)
             return; // Can't fetch facets if we don't know what type of facets we need!
-        const trimmedQuery = (_a = this.query) === null || _a === void 0 ? void 0 : _a.trim();
+        const trimmedQuery = this.query?.trim();
         if (!trimmedQuery && this.isSearchResultsPage)
             return; // The search page _requires_ a query
         const aggregations = {
@@ -114,13 +111,13 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             aggregationsSize,
             rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
         };
-        const results = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
-        this.aggregations = (_c = results === null || results === void 0 ? void 0 : results.success) === null || _c === void 0 ? void 0 : _c.response.aggregations;
+        const results = await this.searchService?.search(params, this.searchType);
+        this.aggregations = results?.success?.response.aggregations;
         this.facetsLoading = false;
-        const collectionTitles = (_e = (_d = results === null || results === void 0 ? void 0 : results.success) === null || _d === void 0 ? void 0 : _d.response) === null || _e === void 0 ? void 0 : _e.collectionTitles;
+        const collectionTitles = results?.success?.response?.collectionTitles;
         if (collectionTitles) {
             for (const [id, title] of Object.entries(collectionTitles)) {
-                (_f = this.collectionTitles) === null || _f === void 0 ? void 0 : _f.set(id, title);
+                this.collectionTitles?.set(id, title);
             }
         }
     }
@@ -128,12 +125,11 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
      * Handler for page number changes from the pagination widget.
      */
     pageNumberClicked(e) {
-        var _a, _b;
-        const page = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.page;
+        const page = e?.detail?.page;
         if (page) {
             this.pageNumber = Number(page);
         }
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+        this.analyticsHandler?.sendEvent({
             category: analyticsCategories.default,
             action: analyticsActions.moreFacetsPageChange,
             label: `${this.pageNumber}`,
@@ -143,7 +139,6 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
      * Combines the selected facets with the aggregations to create a single list of facets
      */
     get mergedFacets() {
-        var _a;
         if (!this.facetKey || !this.selectedFacets)
             return undefined;
         const { selectedFacetGroup, aggregationFacetGroup } = this;
@@ -151,9 +146,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         if (!aggregationFacetGroup)
             return undefined;
         // Start with either the selected group if we have one, or the aggregate group otherwise
-        const facetGroup = { ...(selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregationFacetGroup) };
+        const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };
         // Attach the counts to the selected buckets
-        const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
+        const bucketsWithCount = selectedFacetGroup?.buckets.map(bucket => {
             const selectedBucket = aggregationFacetGroup.buckets.find(b => b.key === bucket.key);
             return selectedBucket
                 ? {
@@ -161,14 +156,14 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
                     count: selectedBucket.count,
                 }
                 : bucket;
-        })) !== null && _a !== void 0 ? _a : [];
+        }) ?? [];
         // Sort the buckets by selection state
         // We do this *prior* to considering unapplied selections, because we want the facets
         // to remain in position when they are selected/unselected, rather than re-sort themselves.
         sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);
         // Append any additional buckets that were not selected
         aggregationFacetGroup.buckets.forEach(bucket => {
-            const existingBucket = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.find(b => b.key === bucket.key);
+            const existingBucket = selectedFacetGroup?.buckets.find(b => b.key === bucket.key);
             if (existingBucket)
                 return;
             bucketsWithCount.push(bucket);
@@ -176,7 +171,7 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         // Apply any unapplied selections that appear on this page
         const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];
         for (const [index, bucket] of bucketsWithCount.entries()) {
-            const unappliedBucket = unappliedBuckets === null || unappliedBuckets === void 0 ? void 0 : unappliedBuckets[bucket.key];
+            const unappliedBucket = unappliedBuckets?.[bucket.key];
             if (unappliedBucket) {
                 bucketsWithCount[index] = { ...unappliedBucket };
             }
@@ -184,9 +179,8 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         // For TV creator facets, uppercase the display text
         if (this.facetKey === 'creator' && this.isTvSearch) {
             bucketsWithCount.forEach(b => {
-                var _a, _b, _c;
-                b.displayText = (_b = ((_a = b.displayText) !== null && _a !== void 0 ? _a : b.key)) === null || _b === void 0 ? void 0 : _b.toLocaleUpperCase();
-                const channelLabel = (_c = this.tvChannelAliases) === null || _c === void 0 ? void 0 : _c.get(b.displayText);
+                b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
+                const channelLabel = this.tvChannelAliases?.get(b.displayText);
                 if (channelLabel && channelLabel !== b.displayText) {
                     b.extraNote = `(${channelLabel})`;
                 }
@@ -211,8 +205,8 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
             return {
                 displayText,
                 key: value,
-                count: data === null || data === void 0 ? void 0 : data.count,
-                state: data === null || data === void 0 ? void 0 : data.state,
+                count: data?.count,
+                state: data?.state,
             };
         });
         return {
@@ -236,10 +230,9 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         let sortedBuckets = currentAggregation.getSortedBuckets(this.sortedBy);
         if (this.facetKey === 'collection') {
             // we are not showing fav- collections or certain deemphasized collections in facets
-            sortedBuckets = sortedBuckets === null || sortedBuckets === void 0 ? void 0 : sortedBuckets.filter(bucket => {
-                var _a;
-                const bucketKey = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString();
-                return (!suppressedCollections[bucketKey] && !(bucketKey === null || bucketKey === void 0 ? void 0 : bucketKey.startsWith('fav-')));
+            sortedBuckets = sortedBuckets?.filter(bucket => {
+                const bucketKey = bucket?.key?.toString();
+                return (!suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-'));
             });
         }
         // Construct the array of facet buckets from the aggregation buckets
@@ -274,63 +267,62 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         };
     }
     get moreFacetsTemplate() {
-        return html `
-      <facets-template
-        .facetGroup=${this.facetGroupForCurrentPage}
-        .selectedFacets=${this.selectedFacets}
-        .collectionTitles=${this.collectionTitles}
+        return html `
+      <facets-template
+        .facetGroup=${this.facetGroupForCurrentPage}
+        .selectedFacets=${this.selectedFacets}
+        .collectionTitles=${this.collectionTitles}
         @facetClick=${(e) => {
             if (this.facetKey) {
                 this.unappliedFacetChanges = updateSelectedFacetBucket(this.unappliedFacetChanges, this.facetKey, e.detail.bucket);
             }
-        }}
-      ></facets-template>
+        }}
+      ></facets-template>
     `;
     }
     get loaderTemplate() {
-        return html `<div class="facets-loader">
-      <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
+        return html `<div class="facets-loader">
+      <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
     </div> `;
     }
     /**
      * How many pages of facets to show in the modal pagination widget
      */
     get paginationSize() {
-        var _a;
         if (!this.aggregations || !this.facetKey)
             return 0;
         // Calculate the appropriate number of pages to show in the modal pagination widget
-        const length = (_a = this.aggregations[this.facetKey]) === null || _a === void 0 ? void 0 : _a.buckets.length;
+        const length = this.aggregations[this.facetKey]?.buckets.length;
         return Math.ceil(length / this.facetsPerPage);
     }
     // render pagination if more then 1 page
     get facetsPaginationTemplate() {
         return this.paginationSize > 1
-            ? html `<more-facets-pagination
-          .size=${this.paginationSize}
-          .currentPage=${1}
-          @pageNumberClicked=${this.pageNumberClicked}
+            ? html `<more-facets-pagination
+          .size=${this.paginationSize}
+          .currentPage=${1}
+          @pageNumberClicked=${this.pageNumberClicked}
         ></more-facets-pagination>`
             : nothing;
     }
     get footerTemplate() {
         if (this.paginationSize > 0) {
-            return html `${this.facetsPaginationTemplate}
-        <div class="footer">
-          <button
-            class="btn btn-cancel"
-            type="button"
-            @click=${this.cancelClick}
-          >
-            Cancel
-          </button>
-          <button
-            class="btn btn-submit"
-            type="button"
-            @click=${this.applySearchFacetsClicked}
-          >
-            Apply filters
-          </button>
+            return html `${this.facetsPaginationTemplate}
+        <div class="footer">
+          <button
+            class="btn btn-cancel"
+            type="button"
+            @click=${this.cancelClick}
+          >
+            Cancel
+          </button>
+          <button
+            class="btn btn-submit"
+            type="button"
+            @click=${this.applySearchFacetsClicked}
+          >
+            Apply filters
+          </button>
         </div> `;
         }
         return nothing;
@@ -340,44 +332,42 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
     }
     get modalHeaderTemplate() {
-        var _a, _b, _c;
-        const facetSort = (_a = this.sortedBy) !== null && _a !== void 0 ? _a : defaultFacetSort[this.facetKey];
+        const facetSort = this.sortedBy ?? defaultFacetSort[this.facetKey];
         const defaultSwitchSide = facetSort === AggregationSortType.COUNT ? 'left' : 'right';
-        return html `<span class="sr-only">${msg('More facets for:')}</span>
-      <span class="title">
-        ${(_b = this.facetGroup) === null || _b === void 0 ? void 0 : _b.title}
-
-        <label class="sort-label">${msg('Sort by:')}</label>
+        return html `<span class="sr-only">${msg('More facets for:')}</span>
+      <span class="title">
+        ${this.facetGroup?.title}
+
+        <label class="sort-label">${msg('Sort by:')}</label>
         ${this.facetKey
-            ? html `<toggle-switch
-              class="sort-toggle"
-              leftValue=${AggregationSortType.COUNT}
-              leftLabel="Count"
-              rightValue=${valueFacetSort[this.facetKey]}
-              .rightLabel=${(_c = this.facetGroup) === null || _c === void 0 ? void 0 : _c.title}
-              side=${defaultSwitchSide}
+            ? html `<toggle-switch
+              class="sort-toggle"
+              leftValue=${AggregationSortType.COUNT}
+              leftLabel="Count"
+              rightValue=${valueFacetSort[this.facetKey]}
+              .rightLabel=${this.facetGroup?.title}
+              side=${defaultSwitchSide}
               @change=${(e) => {
                 this.sortFacetAggregation(Number(e.detail));
-            }}
+            }}
             ></toggle-switch>`
-            : nothing}
+            : nothing}
       </span>`;
     }
     render() {
-        return html `
+        return html `
       ${this.facetsLoading
             ? this.loaderTemplate
-            : html `
-            <section id="more-facets">
-              <div class="header-content">${this.modalHeaderTemplate}</div>
-              <div class="facets-content">${this.moreFacetsTemplate}</div>
-              ${this.footerTemplate}
-            </section>
-          `}
+            : html `
+            <section id="more-facets">
+              <div class="header-content">${this.modalHeaderTemplate}</div>
+              <div class="facets-content">${this.moreFacetsTemplate}</div>
+              ${this.footerTemplate}
+            </section>
+          `}
     `;
     }
     applySearchFacetsClicked() {
-        var _a, _b;
         const mergedSelections = mergeSelectedFacets(this.selectedFacets, this.unappliedFacetChanges);
         const event = new CustomEvent('facetsChanged', {
             detail: mergedSelections,
@@ -387,19 +377,18 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         this.dispatchEvent(event);
         // Reset the unapplied changes back to default, now that they have been applied
         this.unappliedFacetChanges = getDefaultSelectedFacets();
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+        this.modalManager?.closeModal();
+        this.analyticsHandler?.sendEvent({
             category: analyticsCategories.default,
             action: `${analyticsActions.applyMoreFacetsModal}`,
             label: `${this.facetKey}`,
         });
     }
     cancelClick() {
-        var _a, _b;
         // Reset the unapplied changes back to default
         this.unappliedFacetChanges = getDefaultSelectedFacets();
-        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
-        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+        this.modalManager?.closeModal();
+        this.analyticsHandler?.sendEvent({
             category: analyticsCategories.default,
             action: analyticsActions.closeMoreFacetsModal,
             label: `${this.facetKey}`,
@@ -409,73 +398,73 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
         const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
         return [
             srOnlyStyle,
-            css `
-        section#more-facets {
-          overflow: auto;
-          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
-          --facetsColumnCount: 3;
-        }
-        .header-content .title {
-          display: block;
-          text-align: left;
-          font-size: 1.8rem;
-          padding: 0 10px;
-          font-weight: bold;
-        }
-
-        .sort-label {
-          margin-left: 20px;
-          font-size: 1.3rem;
-        }
-
-        .sort-toggle {
-          font-weight: normal;
-        }
-
-        .facets-content {
-          font-size: 1.2rem;
-          max-height: 300px;
-          overflow: auto;
-          padding: 10px;
-        }
-        .facets-loader {
-          margin-bottom: 20px;
-          width: 70px;
-          display: block;
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .btn {
-          border: none;
-          padding: 10px;
-          margin-bottom: 10px;
-          width: auto;
-          border-radius: 4px;
-          cursor: pointer;
-        }
-        .btn-cancel {
-          background-color: #2c2c2c;
-          color: white;
-        }
-        .btn-submit {
-          background-color: ${modalSubmitButton};
-          color: white;
-        }
-        .footer {
-          text-align: center;
-          margin-top: 10px;
-        }
-
-        @media (max-width: 560px) {
-          section#more-facets {
-            max-height: 450px;
-            --facetsColumnCount: 1;
-          }
-          .facets-content {
-            overflow-y: auto;
-            height: 300px;
-          }
-        }
+            css `
+        section#more-facets {
+          overflow: auto;
+          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
+          --facetsColumnCount: 3;
+        }
+        .header-content .title {
+          display: block;
+          text-align: left;
+          font-size: 1.8rem;
+          padding: 0 10px;
+          font-weight: bold;
+        }
+
+        .sort-label {
+          margin-left: 20px;
+          font-size: 1.3rem;
+        }
+
+        .sort-toggle {
+          font-weight: normal;
+        }
+
+        .facets-content {
+          font-size: 1.2rem;
+          max-height: 300px;
+          overflow: auto;
+          padding: 10px;
+        }
+        .facets-loader {
+          margin-bottom: 20px;
+          width: 70px;
+          display: block;
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .btn {
+          border: none;
+          padding: 10px;
+          margin-bottom: 10px;
+          width: auto;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        .btn-cancel {
+          background-color: #2c2c2c;
+          color: white;
+        }
+        .btn-submit {
+          background-color: ${modalSubmitButton};
+          color: white;
+        }
+        .footer {
+          text-align: center;
+          margin-top: 10px;
+        }
+
+        @media (max-width: 560px) {
+          section#more-facets {
+            max-height: 450px;
+            --facetsColumnCount: 1;
+          }
+          .facets-content {
+            overflow-y: auto;
+            height: 300px;
+          }
+        }
       `,
         ];
     }