@internetarchive/collection-browser 3.3.2 → 3.3.3

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

@@ -0,0 +1,547 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { AggregationSortType, } from '@internetarchive/search-service';
+import { msg } from '@lit/localize';
+import { facetTitles, suppressedCollections, valueFacetSort, defaultFacetSort, getDefaultSelectedFacets, } from '../models';
+import '@internetarchive/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
+import './toggle-switch';
+import { srOnlyStyle } from '../styles/sr-only';
+import { mergeSelectedFacets, sortBucketsBySelectionState, updateSelectedFacetBucket, } from '../utils/facet-utils';
+import { MORE_FACETS__DEFAULT_PAGE_SIZE, MORE_FACETS__MAX_AGGREGATIONS, } from './models';
+let MoreFacetsContent = class MoreFacetsContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Maximum number of facets to show per page within the modal.
+         */
+        this.facetsPerPage = MORE_FACETS__DEFAULT_PAGE_SIZE;
+        /**
+         * Whether we are waiting for facet data to load.
+         * We begin with this set to true so that we show an initial loading indicator.
+         */
+        this.facetsLoading = true;
+        this.sortedBy = AggregationSortType.COUNT;
+        this.isTvSearch = false;
+        /**
+         * 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.
+         */
+        this.unappliedFacetChanges = getDefaultSelectedFacets();
+        /**
+         * Which page of facets we are showing.
+         */
+        this.pageNumber = 1;
+    }
+    willUpdate(changed) {
+        if (changed.has('aggregations') ||
+            changed.has('facetsPerPage') ||
+            changed.has('sortedBy') ||
+            changed.has('selectedFacets') ||
+            changed.has('unappliedFacetChanges')) {
+            // Convert the merged selected facets & aggregations into a facet group, and
+            // store it for reuse across pages.
+            this.facetGroup = this.mergedFacets;
+        }
+    }
+    updated(changed) {
+        // If any of the search properties change, it triggers a facet fetch
+        if (changed.has('facetKey') ||
+            changed.has('query') ||
+            changed.has('searchType') ||
+            changed.has('filterMap')) {
+            this.facetsLoading = true;
+            this.pageNumber = 1;
+            this.sortedBy = defaultFacetSort[this.facetKey];
+            this.updateSpecificFacets();
+        }
+    }
+    firstUpdated() {
+        this.setupEscapeListeners();
+    }
+    /**
+     * Close more facets modal on Escape click
+     */
+    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();
+                }
+            });
+        }
+        else {
+            document.removeEventListener('keydown', () => { });
+        }
+    }
+    /**
+     * 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;
+        return pageType === undefined || pageType === 'search_results';
+    }
+    /**
+     * 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.
+     */
+    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();
+        if (!trimmedQuery && this.isSearchResultsPage)
+            return; // The search page _requires_ a query
+        const aggregations = {
+            simpleParams: [this.facetKey],
+        };
+        const aggregationsSize = MORE_FACETS__MAX_AGGREGATIONS; // Only request the 10K highest-count facets
+        const params = {
+            ...this.pageSpecifierParams,
+            query: trimmedQuery || '',
+            identifiers: this.identifiers,
+            filters: this.filterMap,
+            aggregations,
+            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;
+        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;
+        if (collectionTitles) {
+            for (const [id, title] of Object.entries(collectionTitles)) {
+                (_f = this.collectionTitles) === null || _f === void 0 ? void 0 : _f.set(id, title);
+            }
+        }
+    }
+    /**
+     * 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;
+        if (page) {
+            this.pageNumber = Number(page);
+        }
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
+            category: analyticsCategories.default,
+            action: analyticsActions.moreFacetsPageChange,
+            label: `${this.pageNumber}`,
+        });
+    }
+    /**
+     * 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;
+        // If we don't have any aggregations, then there is nothing to show yet
+        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) };
+        // Attach the counts to the selected buckets
+        const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
+            const selectedBucket = aggregationFacetGroup.buckets.find(b => b.key === bucket.key);
+            return selectedBucket
+                ? {
+                    ...bucket,
+                    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);
+            if (existingBucket)
+                return;
+            bucketsWithCount.push(bucket);
+        });
+        // 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];
+            if (unappliedBucket) {
+                bucketsWithCount[index] = { ...unappliedBucket };
+            }
+        }
+        // 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);
+                if (channelLabel && channelLabel !== b.displayText) {
+                    b.extraNote = `(${channelLabel})`;
+                }
+            });
+        }
+        facetGroup.buckets = bucketsWithCount;
+        return facetGroup;
+    }
+    /**
+     * Converts the selected facets for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    get selectedFacetGroup() {
+        if (!this.selectedFacets || !this.facetKey)
+            return undefined;
+        const selectedFacetsForKey = this.selectedFacets[this.facetKey];
+        if (!selectedFacetsForKey)
+            return undefined;
+        const facetGroupTitle = facetTitles[this.facetKey];
+        const buckets = Object.entries(selectedFacetsForKey).map(([value, data]) => {
+            const displayText = value;
+            return {
+                displayText,
+                key: value,
+                count: data === null || data === void 0 ? void 0 : data.count,
+                state: data === null || data === void 0 ? void 0 : data.state,
+            };
+        });
+        return {
+            title: facetGroupTitle,
+            key: this.facetKey,
+            buckets,
+        };
+    }
+    /**
+     * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
+     * which is easier to work with.
+     */
+    get aggregationFacetGroup() {
+        if (!this.aggregations || !this.facetKey)
+            return undefined;
+        const currentAggregation = this.aggregations[this.facetKey];
+        if (!currentAggregation)
+            return undefined;
+        const facetGroupTitle = facetTitles[this.facetKey];
+        // Order the facets according to the current sort option
+        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-')));
+            });
+        }
+        // Construct the array of facet buckets from the aggregation buckets
+        const facetBuckets = sortedBuckets.map(bucket => {
+            const bucketKeyStr = `${bucket.key}`;
+            return {
+                displayText: `${bucketKeyStr}`,
+                key: `${bucketKeyStr}`,
+                count: bucket.doc_count,
+                state: 'none',
+            };
+        });
+        return {
+            title: facetGroupTitle,
+            key: this.facetKey,
+            buckets: facetBuckets,
+        };
+    }
+    /**
+     * Returns a FacetGroup representing only the current page of facet buckets to show.
+     */
+    get facetGroupForCurrentPage() {
+        const { facetGroup } = this;
+        if (!facetGroup)
+            return undefined;
+        // Slice out only the current page of facet buckets
+        const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
+        const truncatedBuckets = facetGroup.buckets.slice(firstBucketIndexOnPage, firstBucketIndexOnPage + this.facetsPerPage);
+        return {
+            ...facetGroup,
+            buckets: truncatedBuckets,
+        };
+    }
+    get moreFacetsTemplate() {
+        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>
+    `;
+    }
+    get loaderTemplate() {
+        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;
+        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}
+        ></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>
+        </div> `;
+        }
+        return nothing;
+    }
+    sortFacetAggregation(facetSortType) {
+        this.sortedBy = facetSortType;
+        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 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>
+        ${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}
+              @change=${(e) => {
+                this.sortFacetAggregation(Number(e.detail));
+            }}
+            ></toggle-switch>`
+            : nothing}
+      </span>`;
+    }
+    render() {
+        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>
+          `}
+    `;
+    }
+    applySearchFacetsClicked() {
+        var _a, _b;
+        const mergedSelections = mergeSelectedFacets(this.selectedFacets, this.unappliedFacetChanges);
+        const event = new CustomEvent('facetsChanged', {
+            detail: mergedSelections,
+            bubbles: true,
+            composed: true,
+        });
+        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({
+            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({
+            category: analyticsCategories.default,
+            action: analyticsActions.closeMoreFacetsModal,
+            label: `${this.facetKey}`,
+        });
+    }
+    static get styles() {
+        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;
+          }
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "facetKey", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "query", void 0);
+__decorate([
+    property({ type: Array })
+], MoreFacetsContent.prototype, "identifiers", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "filterMap", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsContent.prototype, "searchType", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "pageSpecifierParams", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "collectionTitles", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "tvChannelAliases", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsContent.prototype, "facetsPerPage", void 0);
+__decorate([
+    property({ type: Boolean })
+], MoreFacetsContent.prototype, "facetsLoading", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsContent.prototype, "sortedBy", void 0);
+__decorate([
+    property({ type: Boolean })
+], MoreFacetsContent.prototype, "isTvSearch", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "searchService", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], MoreFacetsContent.prototype, "analyticsHandler", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "aggregations", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetGroup", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "unappliedFacetChanges", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "pageNumber", void 0);
+MoreFacetsContent = __decorate([
+    customElement('more-facets-content')
+], MoreFacetsContent);
+export { MoreFacetsContent };
+//# sourceMappingURL=more-facets-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"more-facets-content.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-content.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  css,\r\n  CSSResultGroup,\r\n  html,\r\n  LitElement,\r\n  nothing,\r\n  PropertyValues,\r\n  TemplateResult,\r\n} from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport {\r\n  Aggregation,\r\n  Bucket,\r\n  SearchServiceInterface,\r\n  SearchParams,\r\n  SearchType,\r\n  AggregationSortType,\r\n  FilterMap,\r\n  PageType,\r\n} from '@internetarchive/search-service';\r\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\r\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\r\nimport { msg } from '@lit/localize';\r\nimport {\r\n  SelectedFacets,\r\n  FacetGroup,\r\n  FacetBucket,\r\n  FacetOption,\r\n  facetTitles,\r\n  suppressedCollections,\r\n  valueFacetSort,\r\n  defaultFacetSort,\r\n  getDefaultSelectedFacets,\r\n  FacetEventDetails,\r\n} from '../models';\r\nimport type {\r\n  CollectionTitles,\r\n  PageSpecifierParams,\r\n  TVChannelAliases,\r\n} from '../data-source/models';\r\nimport '@internetarchive/ia-activity-indicator';\r\nimport './more-facets-pagination';\r\nimport './facets-template';\r\nimport {\r\n  analyticsActions,\r\n  analyticsCategories,\r\n} from '../utils/analytics-events';\r\nimport './toggle-switch';\r\nimport { srOnlyStyle } from '../styles/sr-only';\r\nimport {\r\n  mergeSelectedFacets,\r\n  sortBucketsBySelectionState,\r\n  updateSelectedFacetBucket,\r\n} from '../utils/facet-utils';\r\nimport {\r\n  MORE_FACETS__DEFAULT_PAGE_SIZE,\r\n  MORE_FACETS__MAX_AGGREGATIONS,\r\n} from './models';\r\n\r\n@customElement('more-facets-content')\r\nexport class MoreFacetsContent extends LitElement {\r\n  @property({ type: String }) facetKey?: FacetOption;\r\n\r\n  @property({ type: String }) query?: string;\r\n\r\n  @property({ type: Array }) identifiers?: string[];\r\n\r\n  @property({ type: Object }) filterMap?: FilterMap;\r\n\r\n  @property({ type: Number }) searchType?: SearchType;\r\n\r\n  @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;\r\n\r\n  @property({ type: Object })\r\n  collectionTitles?: CollectionTitles;\r\n\r\n  @property({ type: Object })\r\n  tvChannelAliases?: TVChannelAliases;\r\n\r\n  /**\r\n   * Maximum number of facets to show per page within the modal.\r\n   */\r\n  @property({ type: Number }) facetsPerPage = MORE_FACETS__DEFAULT_PAGE_SIZE;\r\n\r\n  /**\r\n   * Whether we are waiting for facet data to load.\r\n   * We begin with this set to true so that we show an initial loading indicator.\r\n   */\r\n  @property({ type: Boolean }) facetsLoading = true;\r\n\r\n  /**\r\n   * The set of pre-existing facet selections (including both selected & negated facets).\r\n   */\r\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\r\n\r\n  @property({ type: Number }) sortedBy: AggregationSortType =\r\n    AggregationSortType.COUNT;\r\n\r\n  @property({ type: Boolean }) isTvSearch = false;\r\n\r\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\r\n\r\n  @property({ type: Object }) searchService?: SearchServiceInterface;\r\n\r\n  @property({ type: Object, attribute: false })\r\n  analyticsHandler?: AnalyticsManagerInterface;\r\n\r\n  /**\r\n   * The full set of aggregations received from the search service\r\n   */\r\n  @state() private aggregations?: Record<string, Aggregation>;\r\n\r\n  /**\r\n   * A FacetGroup storing the full set of facet buckets to be shown on the dialog.\r\n   */\r\n  @state() private facetGroup?: FacetGroup;\r\n\r\n  /**\r\n   * An object holding any changes the patron has made to their facet selections\r\n   * within the modal dialog but which they have not yet applied. These are\r\n   * eventually merged into the existing `selectedFacets` when the patron applies\r\n   * their changes, or discarded if they cancel/close the dialog.\r\n   */\r\n  @state() private unappliedFacetChanges: SelectedFacets =\r\n    getDefaultSelectedFacets();\r\n\r\n  /**\r\n   * Which page of facets we are showing.\r\n   */\r\n  @state() private pageNumber = 1;\r\n\r\n  willUpdate(changed: PropertyValues): void {\r\n    if (\r\n      changed.has('aggregations') ||\r\n      changed.has('facetsPerPage') ||\r\n      changed.has('sortedBy') ||\r\n      changed.has('selectedFacets') ||\r\n      changed.has('unappliedFacetChanges')\r\n    ) {\r\n      // Convert the merged selected facets & aggregations into a facet group, and\r\n      // store it for reuse across pages.\r\n      this.facetGroup = this.mergedFacets;\r\n    }\r\n  }\r\n\r\n  updated(changed: PropertyValues): void {\r\n    // If any of the search properties change, it triggers a facet fetch\r\n    if (\r\n      changed.has('facetKey') ||\r\n      changed.has('query') ||\r\n      changed.has('searchType') ||\r\n      changed.has('filterMap')\r\n    ) {\r\n      this.facetsLoading = true;\r\n      this.pageNumber = 1;\r\n      this.sortedBy = defaultFacetSort[this.facetKey as FacetOption];\r\n\r\n      this.updateSpecificFacets();\r\n    }\r\n  }\r\n\r\n  firstUpdated(): void {\r\n    this.setupEscapeListeners();\r\n  }\r\n\r\n  /**\r\n   * Close more facets modal on Escape click\r\n   */\r\n  private setupEscapeListeners() {\r\n    if (this.modalManager) {\r\n      document.addEventListener('keydown', (e: KeyboardEvent) => {\r\n        if (e.key === 'Escape') {\r\n          this.modalManager?.closeModal();\r\n        }\r\n      });\r\n    } else {\r\n      document.removeEventListener('keydown', () => {});\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Whether facet requests are for the search_results page type (either defaulted or explicitly).\r\n   */\r\n  private get isSearchResultsPage(): boolean {\r\n    // Default page type is search_results when none is specified, so we check\r\n    // for undefined as well.\r\n    const pageType: PageType | undefined = this.pageSpecifierParams?.pageType;\r\n    return pageType === undefined || pageType === 'search_results';\r\n  }\r\n\r\n  /**\r\n   * Get specific facets data from search-service API based of currently query params\r\n   * - this.aggregations - hold result of search service and being used for further processing.\r\n   */\r\n  async updateSpecificFacets(): Promise<void> {\r\n    if (!this.facetKey) return; // Can't fetch facets if we don't know what type of facets we need!\r\n\r\n    const trimmedQuery = this.query?.trim();\r\n    if (!trimmedQuery && this.isSearchResultsPage) return; // The search page _requires_ a query\r\n\r\n    const aggregations = {\r\n      simpleParams: [this.facetKey],\r\n    };\r\n    const aggregationsSize = MORE_FACETS__MAX_AGGREGATIONS; // Only request the 10K highest-count facets\r\n\r\n    const params: SearchParams = {\r\n      ...this.pageSpecifierParams,\r\n      query: trimmedQuery || '',\r\n      identifiers: this.identifiers,\r\n      filters: this.filterMap,\r\n      aggregations,\r\n      aggregationsSize,\r\n      rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?\r\n    };\r\n\r\n    const results = await this.searchService?.search(params, this.searchType);\r\n    this.aggregations = results?.success?.response.aggregations;\r\n    this.facetsLoading = false;\r\n\r\n    const collectionTitles = results?.success?.response?.collectionTitles;\r\n    if (collectionTitles) {\r\n      for (const [id, title] of Object.entries(collectionTitles)) {\r\n        this.collectionTitles?.set(id, title);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for page number changes from the pagination widget.\r\n   */\r\n  private pageNumberClicked(e: CustomEvent<{ page: number }>) {\r\n    const page = e?.detail?.page;\r\n    if (page) {\r\n      this.pageNumber = Number(page);\r\n    }\r\n\r\n    this.analyticsHandler?.sendEvent({\r\n      category: analyticsCategories.default,\r\n      action: analyticsActions.moreFacetsPageChange,\r\n      label: `${this.pageNumber}`,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Combines the selected facets with the aggregations to create a single list of facets\r\n   */\r\n  private get mergedFacets(): FacetGroup | undefined {\r\n    if (!this.facetKey || !this.selectedFacets) return undefined;\r\n\r\n    const { selectedFacetGroup, aggregationFacetGroup } = this;\r\n\r\n    // If we don't have any aggregations, then there is nothing to show yet\r\n    if (!aggregationFacetGroup) return undefined;\r\n\r\n    // Start with either the selected group if we have one, or the aggregate group otherwise\r\n    const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };\r\n\r\n    // Attach the counts to the selected buckets\r\n    const bucketsWithCount =\r\n      selectedFacetGroup?.buckets.map(bucket => {\r\n        const selectedBucket = aggregationFacetGroup.buckets.find(\r\n          b => b.key === bucket.key,\r\n        );\r\n        return selectedBucket\r\n          ? {\r\n              ...bucket,\r\n              count: selectedBucket.count,\r\n            }\r\n          : bucket;\r\n      }) ?? [];\r\n\r\n    // Sort the buckets by selection state\r\n    // We do this *prior* to considering unapplied selections, because we want the facets\r\n    // to remain in position when they are selected/unselected, rather than re-sort themselves.\r\n    sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);\r\n\r\n    // Append any additional buckets that were not selected\r\n    aggregationFacetGroup.buckets.forEach(bucket => {\r\n      const existingBucket = selectedFacetGroup?.buckets.find(\r\n        b => b.key === bucket.key,\r\n      );\r\n      if (existingBucket) return;\r\n      bucketsWithCount.push(bucket);\r\n    });\r\n\r\n    // Apply any unapplied selections that appear on this page\r\n    const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];\r\n    for (const [index, bucket] of bucketsWithCount.entries()) {\r\n      const unappliedBucket = unappliedBuckets?.[bucket.key];\r\n      if (unappliedBucket) {\r\n        bucketsWithCount[index] = { ...unappliedBucket };\r\n      }\r\n    }\r\n\r\n    // For TV creator facets, uppercase the display text\r\n    if (this.facetKey === 'creator' && this.isTvSearch) {\r\n      bucketsWithCount.forEach(b => {\r\n        b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();\r\n\r\n        const channelLabel = this.tvChannelAliases?.get(b.displayText);\r\n        if (channelLabel && channelLabel !== b.displayText) {\r\n          b.extraNote = `(${channelLabel})`;\r\n        }\r\n      });\r\n    }\r\n\r\n    facetGroup.buckets = bucketsWithCount;\r\n    return facetGroup;\r\n  }\r\n\r\n  /**\r\n   * Converts the selected facets for the current facet key to a `FacetGroup`,\r\n   * which is easier to work with.\r\n   */\r\n  private get selectedFacetGroup(): FacetGroup | undefined {\r\n    if (!this.selectedFacets || !this.facetKey) return undefined;\r\n\r\n    const selectedFacetsForKey = this.selectedFacets[this.facetKey];\r\n    if (!selectedFacetsForKey) return undefined;\r\n\r\n    const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n    const buckets: FacetBucket[] = Object.entries(selectedFacetsForKey).map(\r\n      ([value, data]) => {\r\n        const displayText: string = value;\r\n        return {\r\n          displayText,\r\n          key: value,\r\n          count: data?.count,\r\n          state: data?.state,\r\n        };\r\n      },\r\n    );\r\n\r\n    return {\r\n      title: facetGroupTitle,\r\n      key: this.facetKey,\r\n      buckets,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,\r\n   * which is easier to work with.\r\n   */\r\n  private get aggregationFacetGroup(): FacetGroup | undefined {\r\n    if (!this.aggregations || !this.facetKey) return undefined;\r\n\r\n    const currentAggregation = this.aggregations[this.facetKey];\r\n    if (!currentAggregation) return undefined;\r\n\r\n    const facetGroupTitle = facetTitles[this.facetKey];\r\n\r\n    // Order the facets according to the current sort option\r\n    let sortedBuckets = currentAggregation.getSortedBuckets(\r\n      this.sortedBy,\r\n    ) as Bucket[];\r\n\r\n    if (this.facetKey === 'collection') {\r\n      // we are not showing fav- collections or certain deemphasized collections in facets\r\n      sortedBuckets = sortedBuckets?.filter(bucket => {\r\n        const bucketKey = bucket?.key?.toString();\r\n        return (\r\n          !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\r\n        );\r\n      });\r\n    }\r\n\r\n    // Construct the array of facet buckets from the aggregation buckets\r\n    const facetBuckets: FacetBucket[] = sortedBuckets.map(bucket => {\r\n      const bucketKeyStr = `${bucket.key}`;\r\n      return {\r\n        displayText: `${bucketKeyStr}`,\r\n        key: `${bucketKeyStr}`,\r\n        count: bucket.doc_count,\r\n        state: 'none',\r\n      };\r\n    });\r\n\r\n    return {\r\n      title: facetGroupTitle,\r\n      key: this.facetKey,\r\n      buckets: facetBuckets,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns a FacetGroup representing only the current page of facet buckets to show.\r\n   */\r\n  private get facetGroupForCurrentPage(): FacetGroup | undefined {\r\n    const { facetGroup } = this;\r\n    if (!facetGroup) return undefined;\r\n\r\n    // Slice out only the current page of facet buckets\r\n    const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;\r\n    const truncatedBuckets = facetGroup.buckets.slice(\r\n      firstBucketIndexOnPage,\r\n      firstBucketIndexOnPage + this.facetsPerPage,\r\n    );\r\n\r\n    return {\r\n      ...facetGroup,\r\n      buckets: truncatedBuckets,\r\n    };\r\n  }\r\n\r\n  private get moreFacetsTemplate(): TemplateResult {\r\n    return html`\r\n      <facets-template\r\n        .facetGroup=${this.facetGroupForCurrentPage}\r\n        .selectedFacets=${this.selectedFacets}\r\n        .collectionTitles=${this.collectionTitles}\r\n        @facetClick=${(e: CustomEvent<FacetEventDetails>) => {\r\n          if (this.facetKey) {\r\n            this.unappliedFacetChanges = updateSelectedFacetBucket(\r\n              this.unappliedFacetChanges,\r\n              this.facetKey,\r\n              e.detail.bucket,\r\n            );\r\n          }\r\n        }}\r\n      ></facets-template>\r\n    `;\r\n  }\r\n\r\n  private get loaderTemplate(): TemplateResult {\r\n    return html`<div class=\"facets-loader\">\r\n      <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>\r\n    </div> `;\r\n  }\r\n\r\n  /**\r\n   * How many pages of facets to show in the modal pagination widget\r\n   */\r\n  private get paginationSize(): number {\r\n    if (!this.aggregations || !this.facetKey) return 0;\r\n\r\n    // Calculate the appropriate number of pages to show in the modal pagination widget\r\n    const length = this.aggregations[this.facetKey]?.buckets.length;\r\n    return Math.ceil(length / this.facetsPerPage);\r\n  }\r\n\r\n  // render pagination if more then 1 page\r\n  private get facetsPaginationTemplate() {\r\n    return this.paginationSize > 1\r\n      ? html`<more-facets-pagination\r\n          .size=${this.paginationSize}\r\n          .currentPage=${1}\r\n          @pageNumberClicked=${this.pageNumberClicked}\r\n        ></more-facets-pagination>`\r\n      : nothing;\r\n  }\r\n\r\n  private get footerTemplate() {\r\n    if (this.paginationSize > 0) {\r\n      return html`${this.facetsPaginationTemplate}\r\n        <div class=\"footer\">\r\n          <button\r\n            class=\"btn btn-cancel\"\r\n            type=\"button\"\r\n            @click=${this.cancelClick}\r\n          >\r\n            Cancel\r\n          </button>\r\n          <button\r\n            class=\"btn btn-submit\"\r\n            type=\"button\"\r\n            @click=${this.applySearchFacetsClicked}\r\n          >\r\n            Apply filters\r\n          </button>\r\n        </div> `;\r\n    }\r\n\r\n    return nothing;\r\n  }\r\n\r\n  private sortFacetAggregation(facetSortType: AggregationSortType) {\r\n    this.sortedBy = facetSortType;\r\n    this.dispatchEvent(\r\n      new CustomEvent('sortedFacets', { detail: this.sortedBy }),\r\n    );\r\n  }\r\n\r\n  private get modalHeaderTemplate(): TemplateResult {\r\n    const facetSort =\r\n      this.sortedBy ?? defaultFacetSort[this.facetKey as FacetOption];\r\n    const defaultSwitchSide =\r\n      facetSort === AggregationSortType.COUNT ? 'left' : 'right';\r\n\r\n    return html`<span class=\"sr-only\">${msg('More facets for:')}</span>\r\n      <span class=\"title\">\r\n        ${this.facetGroup?.title}\r\n\r\n        <label class=\"sort-label\">${msg('Sort by:')}</label>\r\n        ${this.facetKey\r\n          ? html`<toggle-switch\r\n              class=\"sort-toggle\"\r\n              leftValue=${AggregationSortType.COUNT}\r\n              leftLabel=\"Count\"\r\n              rightValue=${valueFacetSort[this.facetKey]}\r\n              .rightLabel=${this.facetGroup?.title}\r\n              side=${defaultSwitchSide}\r\n              @change=${(e: CustomEvent<string>) => {\r\n                this.sortFacetAggregation(\r\n                  Number(e.detail) as AggregationSortType,\r\n                );\r\n              }}\r\n            ></toggle-switch>`\r\n          : nothing}\r\n      </span>`;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      ${this.facetsLoading\r\n        ? this.loaderTemplate\r\n        : html`\r\n            <section id=\"more-facets\">\r\n              <div class=\"header-content\">${this.modalHeaderTemplate}</div>\r\n              <div class=\"facets-content\">${this.moreFacetsTemplate}</div>\r\n              ${this.footerTemplate}\r\n            </section>\r\n          `}\r\n    `;\r\n  }\r\n\r\n  private applySearchFacetsClicked() {\r\n    const mergedSelections = mergeSelectedFacets(\r\n      this.selectedFacets,\r\n      this.unappliedFacetChanges,\r\n    );\r\n\r\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\r\n      detail: mergedSelections,\r\n      bubbles: true,\r\n      composed: true,\r\n    });\r\n    this.dispatchEvent(event);\r\n\r\n    // Reset the unapplied changes back to default, now that they have been applied\r\n    this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n    this.modalManager?.closeModal();\r\n    this.analyticsHandler?.sendEvent({\r\n      category: analyticsCategories.default,\r\n      action: `${analyticsActions.applyMoreFacetsModal}`,\r\n      label: `${this.facetKey}`,\r\n    });\r\n  }\r\n\r\n  private cancelClick() {\r\n    // Reset the unapplied changes back to default\r\n    this.unappliedFacetChanges = getDefaultSelectedFacets();\r\n\r\n    this.modalManager?.closeModal();\r\n    this.analyticsHandler?.sendEvent({\r\n      category: analyticsCategories.default,\r\n      action: analyticsActions.closeMoreFacetsModal,\r\n      label: `${this.facetKey}`,\r\n    });\r\n  }\r\n\r\n  static get styles(): CSSResultGroup {\r\n    const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\r\n\r\n    return [\r\n      srOnlyStyle,\r\n      css`\r\n        section#more-facets {\r\n          overflow: auto;\r\n          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */\r\n          --facetsColumnCount: 3;\r\n        }\r\n        .header-content .title {\r\n          display: block;\r\n          text-align: left;\r\n          font-size: 1.8rem;\r\n          padding: 0 10px;\r\n          font-weight: bold;\r\n        }\r\n\r\n        .sort-label {\r\n          margin-left: 20px;\r\n          font-size: 1.3rem;\r\n        }\r\n\r\n        .sort-toggle {\r\n          font-weight: normal;\r\n        }\r\n\r\n        .facets-content {\r\n          font-size: 1.2rem;\r\n          max-height: 300px;\r\n          overflow: auto;\r\n          padding: 10px;\r\n        }\r\n        .facets-loader {\r\n          margin-bottom: 20px;\r\n          width: 70px;\r\n          display: block;\r\n          margin-left: auto;\r\n          margin-right: auto;\r\n        }\r\n        .btn {\r\n          border: none;\r\n          padding: 10px;\r\n          margin-bottom: 10px;\r\n          width: auto;\r\n          border-radius: 4px;\r\n          cursor: pointer;\r\n        }\r\n        .btn-cancel {\r\n          background-color: #2c2c2c;\r\n          color: white;\r\n        }\r\n        .btn-submit {\r\n          background-color: ${modalSubmitButton};\r\n          color: white;\r\n        }\r\n        .footer {\r\n          text-align: center;\r\n          margin-top: 10px;\r\n        }\r\n\r\n        @media (max-width: 560px) {\r\n          section#more-facets {\r\n            max-height: 450px;\r\n            --facetsColumnCount: 1;\r\n          }\r\n          .facets-content {\r\n            overflow-y: auto;\r\n            height: 300px;\r\n          }\r\n        }\r\n      `,\r\n    ];\r\n  }\r\n}\r\n"]}

package/dist/src/collection-facets/more-facets-pagination.d.ts

@@ -0,0 +1,36 @@
+import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+export declare class MoreFacetsPagination extends LitElement {
+    /**
+     * Total number of pages
+     */
+    size: number;
+    /**
+     * Number of pages can be moved in back/forward
+     */
+    step: number;
+    currentPage: number;
+    pages?: number[];
+    firstUpdated(): void;
+    updated(changed: Map<string, any>): void;
+    /** creates `this.pages` array that notes which pages to draw
+     * - `0` is elipses marker
+     * - rule: selected page is centered between -2/+2 pages
+     * - outlier: first page selected, show _1_ 2 3 ... N
+     * - outlier: second page selected, show 1 _2_ 3 4 ... N
+     * - outlier: last page selected, show 1 ... N-2 N-1 _N_
+     * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
+     */
+    observePageCount(): void;
+    private createFirstNode;
+    private createMiddelNode;
+    private createLastNode;
+    private get getEllipsisTemplate();
+    emitPageClick(): void;
+    private onRewind;
+    private onForward;
+    private onChange;
+    private getPageTemplate;
+    private get getPagesTemplate();
+    render(): TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}