@internetarchive/collection-browser 3.3.2 → 3.3.3

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

@@ -0,0 +1,265 @@
+var FacetRow_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import { srOnlyStyle } from '../styles/sr-only';
+let FacetRow = FacetRow_1 = class FacetRow extends LitElement {
+    //
+    // COMPONENT LIFECYCLE METHODS
+    //
+    render() {
+        return html `${this.facetRowTemplate}`;
+    }
+    //
+    // TEMPLATE GETTERS
+    //
+    /**
+     * Template for the full facet row, including the positive/negative checks,
+     * the display name, and the count.
+     */
+    get facetRowTemplate() {
+        var _a, _b, _c, _d;
+        const { bucket, facetType } = this;
+        if (!bucket || !facetType)
+            return nothing;
+        const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
+        const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
+        const extraNoteSpan = bucket.extraNote
+            ? html `<span class="facet-note">${bucket.extraNote}</span>`
+            : nothing;
+        // 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 `<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';
+        const titleText = `${facetType}: ${(_d = bucket.displayText) !== null && _d !== void 0 ? _d : bucket.key}`;
+        const onlyShowText = facetSelected
+            ? `Show all ${facetType}s`
+            : `Only show ${titleText}`;
+        const hideText = `Hide ${titleText}`;
+        const unhideText = `Unhide ${titleText}`;
+        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}
+            @click=${(e) => {
+            this.facetClicked(e, false);
+        }}
+            .checked=${facetSelected}
+            class="select-facet-checkbox"
+            title=${onlyShowText}
+            id=${showOnlyCheckboxId}
+            data-testid=${showOnlyCheckboxId}
+          />
+          <div class="hide-facet-container">
+            <input
+              type="checkbox"
+              id=${negativeCheckboxId}
+              .name=${facetType}
+              .value=${bucket.key}
+              @click=${(e) => {
+            this.facetClicked(e, true);
+        }}
+              .checked=${facetHidden}
+              class="hide-facet-checkbox"
+            />
+            <label
+              for=${negativeCheckboxId}
+              class="hide-facet-icon${facetHidden ? ' active' : ''}"
+              title=${showHideText}
+              data-testid=${negativeCheckboxId}
+            >
+              <span class="sr-only">${showHideText}</span>
+              <span class="eye eye-open">${eyeIcon}</span>
+              <span class="eye eye-closed">${eyeClosedIcon}</span>
+            </label>
+          </div>
+        </div>
+        <label
+          for=${showOnlyCheckboxId}
+          class="facet-info-display"
+          title=${onlyShowText}
+          aria-label=${ariaLabel}
+        >
+          <div class="facet-title">${bucketTextDisplay}</div>
+          <div class="facet-count">${bucket.count.toLocaleString()}</div>
+        </label>
+      </div>
+    `;
+    }
+    //
+    // EVENT HANDLERS & DISPATCHERS
+    //
+    /**
+     * Handler for whenever this facet is clicked & its state changes
+     */
+    facetClicked(e, negative) {
+        const { bucket, facetType } = this;
+        if (!bucket || !facetType)
+            return;
+        const target = e.target;
+        const { checked } = target;
+        this.bucket = {
+            ...bucket,
+            state: FacetRow_1.getFacetState(checked, negative),
+        };
+        this.dispatchFacetClickEvent({
+            facetType,
+            bucket: this.bucket,
+            negative,
+        });
+    }
+    /**
+     * Emits a `facetClick` event with details about this facet & its current state
+     */
+    dispatchFacetClickEvent(detail) {
+        const event = new CustomEvent('facetClick', {
+            detail,
+        });
+        this.dispatchEvent(event);
+    }
+    //
+    // OTHER METHODS
+    //
+    /**
+     * Returns the composed facet state corresponding to a positive or negative facet's checked state
+     */
+    static getFacetState(checked, negative) {
+        let state;
+        if (checked) {
+            state = negative ? 'hidden' : 'selected';
+        }
+        else {
+            state = 'none';
+        }
+        return state;
+    }
+    //
+    // STYLES
+    //
+    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)`;
+        const checkboxHeight = css `15px`;
+        const ownCss = css `
+      .facet-checkboxes {
+        margin: 0 5px 0 0;
+        display: flex;
+        height: ${checkboxHeight};
+      }
+      .facet-checkboxes input:first-child {
+        margin-right: 5px;
+      }
+      .facet-checkboxes input {
+        height: ${checkboxHeight};
+        width: ${checkboxHeight};
+        margin: 0;
+      }
+      .facet-row-container {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+        margin: 0 auto;
+        padding: 0.25rem 0;
+        height: auto;
+        border-top: ${facetRowBorderTop};
+        border-bottom: ${facetRowBorderBottom};
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+        flex-wrap: wrap;
+      }
+      .facet-title {
+        word-break: break-word;
+        display: inline-block;
+        flex: 1 1 0%;
+      }
+      .facet-note {
+        color: #bbb;
+      }
+      .facet-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        position: absolute;
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+      }
+      .hide-facet-checkbox:focus-visible + .hide-facet-icon {
+        outline-style: auto;
+        outline-offset: 2px;
+      }
+      .hide-facet-icon {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        cursor: pointer;
+        display: flex;
+      }
+      .eye {
+        width: ${checkboxHeight};
+        height: ${checkboxHeight};
+        opacity: 0.3;
+      }
+      .hide-facet-icon:hover .eye,
+      .active .eye {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye-open,
+      .hide-facet-icon .eye-closed {
+        display: none;
+      }
+      .hide-facet-icon:hover .eye-closed,
+      .hide-facet-icon.active .eye-closed {
+        display: inline;
+      }
+      .hide-facet-icon.active .eye-open {
+        display: none;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+        return [srOnlyStyle, ownCss];
+    }
+};
+__decorate([
+    property({ type: String })
+], FacetRow.prototype, "facetType", void 0);
+__decorate([
+    property({ type: Object })
+], FacetRow.prototype, "bucket", void 0);
+__decorate([
+    property({ type: Object })
+], FacetRow.prototype, "collectionTitles", void 0);
+FacetRow = FacetRow_1 = __decorate([
+    customElement('facet-row')
+], FacetRow);
+export { FacetRow };
+//# sourceMappingURL=facet-row.js.map

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

@@ -0,0 +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';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('facet-row')\nexport class FacetRow extends LitElement {\n  //\n  // UI STATE\n  //\n\n  /** The name of the facet group to which this facet belongs (e.g., \"mediatype\") */\n  @property({ type: String }) facetType?: FacetOption;\n\n  /** The facet bucket containing details about the state, count, and key for this row */\n  @property({ type: Object }) bucket?: FacetBucket;\n\n  /** 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          <div class=\"hide-facet-container\">\n            <input\n              type=\"checkbox\"\n              id=${negativeCheckboxId}\n              .name=${facetType}\n              .value=${bucket.key}\n              @click=${(e: Event) => {\n                this.facetClicked(e, true);\n              }}\n              .checked=${facetHidden}\n              class=\"hide-facet-checkbox\"\n            />\n            <label\n              for=${negativeCheckboxId}\n              class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n              title=${showHideText}\n              data-testid=${negativeCheckboxId}\n            >\n              <span class=\"sr-only\">${showHideText}</span>\n              <span class=\"eye eye-open\">${eyeIcon}</span>\n              <span class=\"eye eye-closed\">${eyeClosedIcon}</span>\n            </label>\n          </div>\n        </div>\n        <label\n          for=${showOnlyCheckboxId}\n          class=\"facet-info-display\"\n          title=${onlyShowText}\n          aria-label=${ariaLabel}\n        >\n          <div class=\"facet-title\">${bucketTextDisplay}</div>\n          <div class=\"facet-count\">${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    const checkboxHeight = css`15px`;\n\n    const ownCss = css`\n      .facet-checkboxes {\n        margin: 0 5px 0 0;\n        display: flex;\n        height: ${checkboxHeight};\n      }\n      .facet-checkboxes input:first-child {\n        margin-right: 5px;\n      }\n      .facet-checkboxes input {\n        height: ${checkboxHeight};\n        width: ${checkboxHeight};\n        margin: 0;\n      }\n      .facet-row-container {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n        margin: 0 auto;\n        padding: 0.25rem 0;\n        height: auto;\n        border-top: ${facetRowBorderTop};\n        border-bottom: ${facetRowBorderBottom};\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n        flex-wrap: wrap;\n      }\n      .facet-title {\n        word-break: break-word;\n        display: inline-block;\n        flex: 1 1 0%;\n      }\n      .facet-note {\n        color: #bbb;\n      }\n      .facet-count {\n        text-align: right;\n      }\n      .select-facet-checkbox {\n        cursor: pointer;\n        display: inline-block;\n      }\n      .hide-facet-checkbox {\n        position: absolute;\n        clip: rect(0, 0, 0, 0);\n        pointer-events: none;\n      }\n      .hide-facet-checkbox:focus-visible + .hide-facet-icon {\n        outline-style: auto;\n        outline-offset: 2px;\n      }\n      .hide-facet-icon {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        cursor: pointer;\n        display: flex;\n      }\n      .eye {\n        width: ${checkboxHeight};\n        height: ${checkboxHeight};\n        opacity: 0.3;\n      }\n      .hide-facet-icon:hover .eye,\n      .active .eye {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye-open,\n      .hide-facet-icon .eye-closed {\n        display: none;\n      }\n      .hide-facet-icon:hover .eye-closed,\n      .hide-facet-icon.active .eye-closed {\n        display: inline;\n      }\n      .hide-facet-icon.active .eye-open {\n        display: none;\n      }\n      .sorting-icon {\n        cursor: pointer;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n\n    return [srOnlyStyle, ownCss];\n  }\n}\n"]}

package/dist/src/collection-facets/facet-tombstone-row.d.ts

@@ -0,0 +1,5 @@
+import { LitElement, CSSResultGroup } from 'lit';
+export declare class FacetTombstoneRow extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,43 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let FacetTombstoneRow = class FacetTombstoneRow extends LitElement {
+    render() {
+        return html `
+      <div id="row">
+        <input type="checkbox" disabled />
+        <div class="tombstone-line"></div>
+        <div class="tombstone-line"></div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      #row {
+        display: grid;
+        grid-template-columns: 15px 1fr 36px;
+        grid-gap: 9px 6px;
+        align-items: center;
+        margin: 2.5px auto;
+        border: 1px solid transparent;
+      }
+
+      .tombstone-line {
+        background: #ddd;
+        height: 6px;
+        border-radius: 50px;
+      }
+
+      input[type='checkbox'] {
+        width: 15px;
+        height: 15px;
+        margin: 0;
+      }
+    `;
+    }
+};
+FacetTombstoneRow = __decorate([
+    customElement('facet-tombstone-row')
+], FacetTombstoneRow);
+export { FacetTombstoneRow };
+//# sourceMappingURL=facet-tombstone-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"facet-tombstone-row.js","sourceRoot":"","sources":["../../../src/collection-facets/facet-tombstone-row.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAC/C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnCY,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmC7B","sourcesContent":["import { css, html, LitElement, CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('facet-tombstone-row')\nexport class FacetTombstoneRow extends LitElement {\n  render() {\n    return html`\n      <div id=\"row\">\n        <input type=\"checkbox\" disabled />\n        <div class=\"tombstone-line\"></div>\n        <div class=\"tombstone-line\"></div>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #row {\n        display: grid;\n        grid-template-columns: 15px 1fr 36px;\n        grid-gap: 9px 6px;\n        align-items: center;\n        margin: 2.5px auto;\n        border: 1px solid transparent;\n      }\n\n      .tombstone-line {\n        background: #ddd;\n        height: 6px;\n        border-radius: 50px;\n      }\n\n      input[type='checkbox'] {\n        width: 15px;\n        height: 15px;\n        margin: 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/facets-template.d.ts

@@ -0,0 +1,13 @@
+import { LitElement, TemplateResult, CSSResultGroup } from 'lit';
+import type { FacetGroup } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import './facet-row';
+export declare class FacetsTemplate extends LitElement {
+    facetGroup?: FacetGroup;
+    collectionTitles?: CollectionTitles;
+    private facetClicked;
+    private dispatchFacetClickEvent;
+    private get facetsTemplate();
+    render(): TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,68 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import './facet-row';
+let FacetsTemplate = class FacetsTemplate extends LitElement {
+    facetClicked(e) {
+        this.dispatchFacetClickEvent(e.detail);
+    }
+    dispatchFacetClickEvent(detail) {
+        const event = new CustomEvent('facetClick', {
+            detail,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    get facetsTemplate() {
+        const { facetGroup } = this;
+        if (!facetGroup)
+            return nothing;
+        const facetBuckets = facetGroup.buckets;
+        // Added data-testid for Playwright testing
+        // Using className and aria-labels is not ideal for Playwright locator
+        return html `
+      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
+        ${repeat(facetBuckets, bucket => `${facetGroup.key}:${bucket.key}`, bucket => html `<facet-row
+              .facetType=${facetGroup.key}
+              .bucket=${bucket}
+              .collectionTitles=${this.collectionTitles}
+              @facetClick=${this.facetClicked}
+            ></facet-row>`)}
+      </div>
+    `;
+    }
+    render() {
+        return html `${this.facetsTemplate}`;
+    }
+    static get styles() {
+        const columnCount = css `var(--facetsColumnCount, 1)`;
+        const columnGap = css `var(--facetsColumnGap, 15px)`;
+        return css `
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "facetGroup", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "collectionTitles", void 0);
+FacetsTemplate = __decorate([
+    customElement('facets-template')
+], FacetsTemplate);
+export { FacetsTemplate };
+//# sourceMappingURL=facets-template.js.map

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

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

package/dist/src/collection-facets/models.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Maximum number of aggregations to include in the More... facet dialogs.
+ */
+export declare const MORE_FACETS__MAX_AGGREGATIONS = 10000;
+/**
+ * Default number of facets to show per page of the More... facet dialogs.
+ * Can be overridden via component property.
+ */
+export declare const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;

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

@@ -0,0 +1,10 @@
+/**
+ * Maximum number of aggregations to include in the More... facet dialogs.
+ */
+export const MORE_FACETS__MAX_AGGREGATIONS = 10000;
+/**
+ * Default number of facets to show per page of the More... facet dialogs.
+ * Can be overridden via component property.
+ */
+export const MORE_FACETS__DEFAULT_PAGE_SIZE = 35;
+//# sourceMappingURL=models.js.map

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

@@ -0,0 +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":["/**\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.d.ts

@@ -0,0 +1,109 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { SearchServiceInterface, SearchType, AggregationSortType, FilterMap } from '@internetarchive/search-service';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { SelectedFacets, FacetOption } from '../models';
+import type { CollectionTitles, PageSpecifierParams, TVChannelAliases } from '../data-source/models';
+import '@internetarchive/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+import './toggle-switch';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: FacetOption;
+    query?: string;
+    identifiers?: string[];
+    filterMap?: FilterMap;
+    searchType?: SearchType;
+    pageSpecifierParams?: PageSpecifierParams;
+    collectionTitles?: CollectionTitles;
+    tvChannelAliases?: TVChannelAliases;
+    /**
+     * Maximum number of facets to show per page within the modal.
+     */
+    facetsPerPage: number;
+    /**
+     * Whether we are waiting for facet data to load.
+     * We begin with this set to true so that we show an initial loading indicator.
+     */
+    facetsLoading: boolean;
+    /**
+     * The set of pre-existing facet selections (including both selected & negated facets).
+     */
+    selectedFacets?: SelectedFacets;
+    sortedBy: AggregationSortType;
+    isTvSearch: boolean;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    /**
+     * The full set of aggregations received from the search service
+     */
+    private aggregations?;
+    /**
+     * A FacetGroup storing the full set of facet buckets to be shown on the dialog.
+     */
+    private facetGroup?;
+    /**
+     * An object holding any changes the patron has made to their facet selections
+     * within the modal dialog but which they have not yet applied. These are
+     * eventually merged into the existing `selectedFacets` when the patron applies
+     * their changes, or discarded if they cancel/close the dialog.
+     */
+    private unappliedFacetChanges;
+    /**
+     * Which page of facets we are showing.
+     */
+    private pageNumber;
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Close more facets modal on Escape click
+     */
+    private setupEscapeListeners;
+    /**
+     * Whether facet requests are for the search_results page type (either defaulted or explicitly).
+     */
+    private get isSearchResultsPage();
+    /**
+     * Get specific facets data from search-service API based of currently query params
+     * - this.aggregations - hold result of search service and being used for further processing.
+     */
+    updateSpecificFacets(): Promise<void>;
+    /**
+     * Handler for page number changes from the pagination widget.
+     */
+    private pageNumberClicked;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    private get selectedFacetGroup();
+    /**
+     * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    private get aggregationFacetGroup();
+    /**
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     */
+    private get facetGroupForCurrentPage();
+    private get moreFacetsTemplate();
+    private get loaderTemplate();
+    /**
+     * How many pages of facets to show in the modal pagination widget
+     */
+    private get paginationSize();
+    private get facetsPaginationTemplate();
+    private get footerTemplate();
+    private sortFacetAggregation;
+    private get modalHeaderTemplate();
+    render(): TemplateResult<1>;
+    private applySearchFacetsClicked;
+    private cancelClick;
+    static get styles(): CSSResultGroup;
+}