@internetarchive/collection-browser 0.2.21 → 0.2.22-rc1

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

@@ -0,0 +1,475 @@
+import { __decorate } from "tslib";
+/* eslint-disable dot-notation */
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { facetTitles, } from '../models';
+import { getFacetOptionFromKey } from './facets-util';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+let MoreFacetsContent = class MoreFacetsContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.sortedBy = 'count'; // count | alpha
+        this.facetGroup = [];
+        this.facetGroupTitle = '';
+        this.pageNumber = 1;
+        /**
+         * Facets are loading on popup
+         */
+        this.facetsLoading = true;
+        this.paginationSize = 0;
+        this.facetsType = 'modal';
+        this.facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
+    }
+    updated(changed) {
+        if (changed.has('facetKey')) {
+            this.facetsLoading = true;
+            this.pageNumber = 1;
+            this.updateSpecificFacets();
+        }
+        if (changed.has('pageNumber')) {
+            this.facetGroup = this.aggregationFacetGroups;
+        }
+    }
+    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', () => { });
+        }
+    }
+    /**
+     * 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;
+        const aggregations = {
+            advancedParams: [
+                {
+                    field: this.facetAggregationKey,
+                    size: 65535, // todo - do we want to have all the records at once?
+                },
+            ],
+        };
+        const params = {
+            query: this.fullQuery,
+            fields: ['identifier'],
+            aggregations,
+            rows: 1, // todo - do we want server-side pagination with offset/page/limit flag?
+        };
+        const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params));
+        this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
+        this.facetGroup = this.aggregationFacetGroups;
+        this.facetsLoading = false;
+    }
+    pageNumberClicked(e) {
+        var _a;
+        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);
+        }
+    }
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    get mergedFacets() {
+        var _a;
+        const facetGroups = [];
+        const selectedFacetGroup = this.selectedFacetGroups.find(group => group.key === this.facetKey);
+        const aggregateFacetGroup = this.aggregationFacetGroups.find(group => group.key === this.facetKey);
+        // if the user selected a facet, but it's not in the aggregation, we add it as-is
+        if (selectedFacetGroup && !aggregateFacetGroup) {
+            facetGroups.push(selectedFacetGroup);
+            return facetGroups;
+        }
+        // if we don't have an aggregate facet group, don't add this to the list
+        if (!aggregateFacetGroup)
+            return facetGroups;
+        // start with either the selected group if we have one, or the aggregate group
+        const facetGroup = selectedFacetGroup !== null && selectedFacetGroup !== void 0 ? selectedFacetGroup : aggregateFacetGroup;
+        // attach the counts to the selected buckets
+        const bucketsWithCount = (_a = selectedFacetGroup === null || selectedFacetGroup === void 0 ? void 0 : selectedFacetGroup.buckets.map(bucket => {
+            const selectedBucket = aggregateFacetGroup.buckets.find(b => b.key === bucket.key);
+            return selectedBucket
+                ? {
+                    ...bucket,
+                    count: selectedBucket.count,
+                }
+                : bucket;
+        })) !== null && _a !== void 0 ? _a : [];
+        // append any additional buckets that were not selected
+        aggregateFacetGroup.buckets.forEach(bucket => {
+            const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
+            if (existingBucket)
+                return;
+            bucketsWithCount.push(bucket);
+        });
+        facetGroup.buckets = bucketsWithCount;
+        facetGroups.push(facetGroup);
+        return facetGroups;
+    }
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    get selectedFacetGroups() {
+        if (!this.selectedFacets)
+            return [];
+        const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
+            const option = key;
+            const title = facetTitles[option];
+            const buckets = Object.entries(selectedFacets).map(([value, data]) => {
+                var _a, _b;
+                let displayText = value;
+                // for selected languages, we store the language code instead of the
+                // display name, so look up the name from the mapping
+                if (option === 'language') {
+                    displayText =
+                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(value)) !== null && _b !== void 0 ? _b : 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,
+                key: option,
+                buckets,
+            };
+        });
+        return facetGroups;
+    }
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    get aggregationFacetGroups() {
+        var _a;
+        const facetGroups = [];
+        Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, buckets]) => {
+            // the year_histogram data is in a different format so can't be handled here
+            if (key === 'year_histogram')
+                return;
+            const option = getFacetOptionFromKey(key);
+            this.facetGroupTitle = facetTitles[option];
+            let castedBuckets = buckets.buckets;
+            // we are not showing fav- items in facets
+            castedBuckets = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.filter(bucket => { var _a, _b; return ((_b = (_a = bucket === null || bucket === void 0 ? void 0 : bucket.key) === null || _a === void 0 ? void 0 : _a.toString()) === null || _b === void 0 ? void 0 : _b.startsWith('fav-')) === false; });
+            // sort facets in specific order
+            castedBuckets = this.sortedFacets(castedBuckets);
+            // find length and pagination size for modal pagination
+            const { length } = Object.keys(castedBuckets);
+            this.paginationSize = Math.ceil(length / this.facetsPerPage);
+            // asynchronously load the collection name
+            if (option === 'collection') {
+                this.preloadCollectionNames(castedBuckets);
+            }
+            // render only items which will be visible as per this.facetsPerPage
+            const bucketsMaxSix = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
+            const facetBucket = bucketsMaxSix.map(bucket => {
+                var _a, _b;
+                let bucketKey = bucket.key;
+                // for languages, we need to search by language code instead of the
+                // display name, which is what we get from the search engine result
+                if (option === 'language') {
+                    bucketKey =
+                        (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getCodeStringFromLanguageName(`${bucket.key}`)) !== null && _b !== void 0 ? _b : bucket.key;
+                }
+                return {
+                    displayText: `${bucket.key}`,
+                    key: `${bucketKey}`,
+                    count: bucket.doc_count,
+                    state: 'none',
+                };
+            });
+            const group = {
+                title: this.facetGroupTitle,
+                key: option,
+                buckets: facetBucket,
+            };
+            facetGroups.push(group);
+        });
+        return facetGroups;
+    }
+    /**
+     * for collections, we need to asynchronously load the collection name
+     * so we use the `async-collection-name` widget and for the rest, we have a static value to use
+     *
+     * @param castedBuckets
+     */
+    preloadCollectionNames(castedBuckets) {
+        var _a;
+        const collectionIds = castedBuckets === null || castedBuckets === void 0 ? void 0 : castedBuckets.map(option => option.key);
+        const collectionIdsArray = Array.from(new Set(collectionIds));
+        (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
+    }
+    /**
+     * sort the facets on modal
+     * - alpha sort perform in ascending order
+     * - count/frequency sort perform in descending order
+     *
+     * @param facetBucket as Bucket[]
+     *
+     * @return sortedFacetBucket as Bucket
+     */
+    sortedFacets(facetBucket) {
+        let sortedFacetBucket = facetBucket;
+        if (this.sortedBy === 'alpha') {
+            // sort by alphabetic in ascending order. eg. a,b,c,...
+            sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => (a.key > b.key ? 1 : -1));
+        }
+        else {
+            // sort by frequency/count in descending order. eg 100,99,98,...
+            sortedFacetBucket = facetBucket === null || facetBucket === void 0 ? void 0 : facetBucket.sort((a, b) => a.doc_count < b.doc_count ? 1 : -1);
+        }
+        return sortedFacetBucket;
+    }
+    get getMoreFacetsTemplate() {
+        var _a;
+        return html `
+      <facets-template
+        .facetGroup=${(_a = this.mergedFacets) === null || _a === void 0 ? void 0 : _a.shift()}
+        .selectedFacets=${this.selectedFacets}
+        .renderOn=${'modal'}
+        .collectionNameCache=${this.collectionNameCache}
+        @selectedFacetsChanged=${(e) => {
+            this.selectedFacets = e.detail;
+        }}
+      ></facets-template>
+    `;
+    }
+    get loaderTemplate() {
+        return html `<div class="facets-loader">
+      <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>
+    </div> `;
+    }
+    // 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() {
+        this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';
+        this.dispatchEvent(new CustomEvent('sortedFacets', { detail: this.sortedBy }));
+    }
+    get getModalHeaderTemplate() {
+        const title = this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';
+        const image = this.sortedBy === 'alpha'
+            ? 'https://archive.org/images/filter-alpha.png'
+            : 'https://archive.org/images/filter-count.png';
+        return html `<span class="sr-only">More facets for:</span>
+      <span class="title">
+        ${this.facetGroupTitle}
+        <input
+          class="sorting-icon"
+          type="image"
+          @click=${() => this.sortFacetAggregation()}
+          src="${image}"
+          title=${title}
+          alt="sort facets"
+        />
+      </span> `;
+    }
+    render() {
+        return html `
+      ${this.facetsLoading
+            ? this.loaderTemplate
+            : html `
+            <div class="header-content">${this.getModalHeaderTemplate}</div>
+            <div class="scrollable-content">
+              <div class="facets-content">${this.getMoreFacetsTemplate}</div>
+            </div>
+            ${this.footerTemplate}
+          `}
+    `;
+    }
+    applySearchFacetsClicked() {
+        var _a;
+        const event = new CustomEvent('facetsChanged', {
+            detail: this.selectedFacets,
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+    }
+    cancelClick() {
+        var _a;
+        (_a = this.modalManager) === null || _a === void 0 ? void 0 : _a.closeModal();
+    }
+    static get styles() {
+        const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
+        return css `
+      .header-content .title {
+        display: block;
+        text-align: left;
+        font-size: 1.8rem;
+        padding: 0 10px;
+        font-weight: bold;
+      }
+      .scrollable-content {
+        overflow-y: auto;
+        max-height: 65vh;
+      }
+      .facets-content {
+        font-size: 1.2rem;
+        margin: 10px;
+      }
+      .page-number {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        margin: 10px;
+        font-size: 1.4rem;
+        vertical-align: middle;
+      }
+      .current-page {
+        background: black;
+        color: white;
+      }
+      .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: #000;
+        color: white;
+      }
+      .btn-submit {
+        background-color: ${modalSubmitButton};
+        color: white;
+      }
+      .footer {
+        text-align: center;
+        margin-top: 10px;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+      .sorting-icon {
+        height: 15px;
+        vertical-align: baseline;
+        cursor: pointer;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "facetKey", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "facetAggregationKey", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "fullQuery", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "modalManager", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "searchService", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "languageCodeHandler", void 0);
+__decorate([
+    property({ type: Object })
+], MoreFacetsContent.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: String })
+], MoreFacetsContent.prototype, "sortedBy", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "aggregations", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetGroup", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetGroupTitle", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "pageNumber", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetsLoading", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "paginationSize", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetsType", 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":["/* eslint-disable dot-notation */\n/* eslint-disable lit-a11y/click-events-have-key-events */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type {\n  Aggregation,\n  Bucket,\n  SearchServiceInterface,\n  SearchParams,\n} from '@internetarchive/search-service';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport {\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  FacetOption,\n  facetTitles,\n} from '../models';\nimport type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';\nimport { getFacetOptionFromKey } from './facets-util';\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport './more-facets-pagination';\nimport './facets-template';\n\n@customElement('more-facets-content')\nexport class MoreFacetsContent extends LitElement {\n  @property({ type: String }) facetKey?: string;\n\n  @property({ type: String }) facetAggregationKey?: string;\n\n  @property({ type: String }) fullQuery?: string;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object })\n  languageCodeHandler?: LanguageCodeHandlerInterface;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) sortedBy = 'count'; // count | alpha\n\n  @state() aggregations?: Record<string, Aggregation>;\n\n  @state() facetGroup?: FacetGroup[] = [];\n\n  @state() facetGroupTitle?: String = '';\n\n  @state() pageNumber = 1;\n\n  /**\n   * Facets are loading on popup\n   */\n  @state() facetsLoading = true;\n\n  @state() paginationSize = 0;\n\n  @state() facetsType = 'modal';\n\n  private facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view\n\n  updated(changed: PropertyValues) {\n    if (changed.has('facetKey')) {\n      this.facetsLoading = true;\n      this.pageNumber = 1;\n\n      this.updateSpecificFacets();\n    }\n\n    if (changed.has('pageNumber')) {\n      this.facetGroup = this.aggregationFacetGroups;\n    }\n  }\n\n  firstUpdated() {\n    this.setupEscapeListeners();\n  }\n\n  /**\n   * Close more facets modal on Escape click\n   */\n  private setupEscapeListeners() {\n    if (this.modalManager) {\n      document.addEventListener('keydown', (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          this.modalManager?.closeModal();\n        }\n      });\n    } else {\n      document.removeEventListener('keydown', () => {});\n    }\n  }\n\n  /**\n   * Get specific facets data from search-service API based of currently query params\n   * - this.aggregations - hold result of search service and being used for further processing.\n   */\n  async updateSpecificFacets(): Promise<void> {\n    const aggregations = {\n      advancedParams: [\n        {\n          field: this.facetAggregationKey as string,\n          size: 65535, // todo - do we want to have all the records at once?\n        },\n      ],\n    };\n\n    const params: SearchParams = {\n      query: this.fullQuery as string,\n      fields: ['identifier'],\n      aggregations,\n      rows: 1, // todo - do we want server-side pagination with offset/page/limit flag?\n    };\n\n    const results = await this.searchService?.search(params);\n    this.aggregations = results?.success?.response.aggregations as any;\n\n    this.facetGroup = this.aggregationFacetGroups;\n    this.facetsLoading = false;\n  }\n\n  private pageNumberClicked(e: CustomEvent<{ page: number }>) {\n    const page = e?.detail?.page;\n    if (page) {\n      this.pageNumber = Number(page);\n    }\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] | void {\n    const facetGroups: FacetGroup[] = [];\n\n    const selectedFacetGroup = this.selectedFacetGroups.find(\n      group => group.key === this.facetKey\n    );\n    const aggregateFacetGroup = this.aggregationFacetGroups.find(\n      group => group.key === this.facetKey\n    );\n\n    // if the user selected a facet, but it's not in the aggregation, we add it as-is\n    if (selectedFacetGroup && !aggregateFacetGroup) {\n      facetGroups.push(selectedFacetGroup);\n      return facetGroups;\n    }\n\n    // if we don't have an aggregate facet group, don't add this to the list\n    if (!aggregateFacetGroup) return facetGroups;\n\n    // start with either the selected group if we have one, or the aggregate group\n    const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n    // attach the counts to the selected buckets\n    const bucketsWithCount =\n      selectedFacetGroup?.buckets.map(bucket => {\n        const selectedBucket = aggregateFacetGroup.buckets.find(\n          b => b.key === bucket.key\n        );\n        return selectedBucket\n          ? {\n              ...bucket,\n              count: selectedBucket.count,\n            }\n          : bucket;\n      }) ?? [];\n\n    // append any additional buckets that were not selected\n    aggregateFacetGroup.buckets.forEach(bucket => {\n      const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n      if (existingBucket) return;\n      bucketsWithCount.push(bucket);\n    });\n    facetGroup.buckets = bucketsWithCount;\n\n    facetGroups.push(facetGroup);\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, data]) => {\n            let displayText = value;\n            // for selected languages, we store the language code instead of the\n            // display name, so look up the name from the mapping\n            if (option === 'language') {\n              displayText =\n                this.languageCodeHandler?.getLanguageNameFromCodeString(\n                  value\n                ) ?? value;\n            }\n            return {\n              displayText,\n              key: value,\n              count: data?.count,\n              state: data?.state,\n            };\n          }\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {\n      // the year_histogram data is in a different format so can't be handled here\n      if (key === 'year_histogram') return;\n\n      const option = getFacetOptionFromKey(key);\n      this.facetGroupTitle = facetTitles[option];\n      let castedBuckets = buckets.buckets as Bucket[];\n\n      // we are not showing fav- items in facets\n      castedBuckets = castedBuckets?.filter(\n        bucket => bucket?.key?.toString()?.startsWith('fav-') === false\n      );\n\n      // sort facets in specific order\n      castedBuckets = this.sortedFacets(castedBuckets) as Bucket[];\n\n      // find length and pagination size for modal pagination\n      const { length } = Object.keys(castedBuckets as []);\n      this.paginationSize = Math.ceil(length / this.facetsPerPage);\n\n      // asynchronously load the collection name\n      if (option === 'collection') {\n        this.preloadCollectionNames(castedBuckets);\n      }\n\n      // render only items which will be visible as per this.facetsPerPage\n      const bucketsMaxSix = castedBuckets?.slice(\n        (this.pageNumber - 1) * this.facetsPerPage,\n        this.pageNumber * this.facetsPerPage\n      );\n\n      const facetBucket: FacetBucket[] = bucketsMaxSix.map(bucket => {\n        let bucketKey = bucket.key;\n        // for languages, we need to search by language code instead of the\n        // display name, which is what we get from the search engine result\n        if (option === 'language') {\n          bucketKey =\n            this.languageCodeHandler?.getCodeStringFromLanguageName(\n              `${bucket.key}`\n            ) ?? bucket.key;\n        }\n        return {\n          displayText: `${bucket.key}`,\n          key: `${bucketKey}`,\n          count: bucket.doc_count,\n          state: 'none',\n        };\n      });\n      const group: FacetGroup = {\n        title: this.facetGroupTitle as string,\n        key: option,\n        buckets: facetBucket,\n      };\n      facetGroups.push(group);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * for collections, we need to asynchronously load the collection name\n   * so we use the `async-collection-name` widget and for the rest, we have a static value to use\n   *\n   * @param castedBuckets\n   */\n  private preloadCollectionNames(castedBuckets: any[]) {\n    const collectionIds = castedBuckets?.map(option => option.key);\n    const collectionIdsArray = Array.from(new Set(collectionIds)) as string[];\n\n    this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);\n  }\n\n  /**\n   * sort the facets on modal\n   * - alpha sort perform in ascending order\n   * - count/frequency sort perform in descending order\n   *\n   * @param facetBucket as Bucket[]\n   *\n   * @return sortedFacetBucket as Bucket\n   */\n  private sortedFacets(facetBucket: Bucket[]) {\n    let sortedFacetBucket = facetBucket;\n    if (this.sortedBy === 'alpha') {\n      // sort by alphabetic in ascending order. eg. a,b,c,...\n      sortedFacetBucket = facetBucket?.sort((a, b) => (a.key > b.key ? 1 : -1));\n    } else {\n      // sort by frequency/count in descending order. eg 100,99,98,...\n      sortedFacetBucket = facetBucket?.sort((a, b) =>\n        a.doc_count < b.doc_count ? 1 : -1\n      );\n    }\n\n    return sortedFacetBucket;\n  }\n\n  private get getMoreFacetsTemplate(): TemplateResult {\n    return html`\n      <facets-template\n        .facetGroup=${this.mergedFacets?.shift()}\n        .selectedFacets=${this.selectedFacets}\n        .renderOn=${'modal'}\n        .collectionNameCache=${this.collectionNameCache}\n        @selectedFacetsChanged=${(e: CustomEvent) => {\n          this.selectedFacets = e.detail;\n        }}\n      ></facets-template>\n    `;\n  }\n\n  private get loaderTemplate(): TemplateResult {\n    return html`<div class=\"facets-loader\">\n      <ia-activity-indicator .mode=${'processing'}></ia-activity-indicator>\n    </div> `;\n  }\n\n  // render pagination if more then 1 page\n  private get facetsPaginationTemplate() {\n    return this.paginationSize > 1\n      ? html`<more-facets-pagination\n          .size=${this.paginationSize}\n          .currentPage=${1}\n          @pageNumberClicked=${this.pageNumberClicked}\n        ></more-facets-pagination>`\n      : nothing;\n  }\n\n  private get footerTemplate() {\n    if (this.paginationSize > 0) {\n      return html`${this.facetsPaginationTemplate}\n        <div class=\"footer\">\n          <button\n            class=\"btn btn-cancel\"\n            type=\"button\"\n            @click=${this.cancelClick}\n          >\n            Cancel\n          </button>\n          <button\n            class=\"btn btn-submit\"\n            type=\"button\"\n            @click=${this.applySearchFacetsClicked}\n          >\n            Apply filters\n          </button>\n        </div> `;\n    }\n\n    return nothing;\n  }\n\n  private sortFacetAggregation() {\n    this.sortedBy = this.sortedBy === 'count' ? 'alpha' : 'count';\n    this.dispatchEvent(\n      new CustomEvent('sortedFacets', { detail: this.sortedBy })\n    );\n  }\n\n  private get getModalHeaderTemplate(): TemplateResult {\n    const title =\n      this.sortedBy === 'alpha' ? 'Sort by count' : 'Sort by alphabetically';\n\n    const image =\n      this.sortedBy === 'alpha'\n        ? 'https://archive.org/images/filter-alpha.png'\n        : 'https://archive.org/images/filter-count.png';\n\n    return html`<span class=\"sr-only\">More facets for:</span>\n      <span class=\"title\">\n        ${this.facetGroupTitle}\n        <input\n          class=\"sorting-icon\"\n          type=\"image\"\n          @click=${() => this.sortFacetAggregation()}\n          src=\"${image}\"\n          title=${title}\n          alt=\"sort facets\"\n        />\n      </span> `;\n  }\n\n  render() {\n    return html`\n      ${this.facetsLoading\n        ? this.loaderTemplate\n        : html`\n            <div class=\"header-content\">${this.getModalHeaderTemplate}</div>\n            <div class=\"scrollable-content\">\n              <div class=\"facets-content\">${this.getMoreFacetsTemplate}</div>\n            </div>\n            ${this.footerTemplate}\n          `}\n    `;\n  }\n\n  private applySearchFacetsClicked() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n    this.modalManager?.closeModal();\n  }\n\n  private cancelClick() {\n    this.modalManager?.closeModal();\n  }\n\n  static get styles(): CSSResultGroup {\n    const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\n\n    return css`\n      .header-content .title {\n        display: block;\n        text-align: left;\n        font-size: 1.8rem;\n        padding: 0 10px;\n        font-weight: bold;\n      }\n      .scrollable-content {\n        overflow-y: auto;\n        max-height: 65vh;\n      }\n      .facets-content {\n        font-size: 1.2rem;\n        margin: 10px;\n      }\n      .page-number {\n        background: none;\n        border: 0;\n        cursor: pointer;\n        border-radius: 100%;\n        width: 25px;\n        height: 25px;\n        margin: 10px;\n        font-size: 1.4rem;\n        vertical-align: middle;\n      }\n      .current-page {\n        background: black;\n        color: white;\n      }\n      .facets-loader {\n        margin-bottom: 20px;\n        width: 70px;\n        display: block;\n        margin-left: auto;\n        margin-right: auto;\n      }\n      .btn {\n        border: none;\n        padding: 10px;\n        margin-bottom: 10px;\n        width: auto;\n        border-radius: 4px;\n        cursor: pointer;\n      }\n      .btn-cancel {\n        background-color: #000;\n        color: white;\n      }\n      .btn-submit {\n        background-color: ${modalSubmitButton};\n        color: white;\n      }\n      .footer {\n        text-align: center;\n        margin-top: 10px;\n      }\n\n      .sr-only {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        border: 0;\n      }\n      .sorting-icon {\n        height: 15px;\n        vertical-align: baseline;\n        cursor: pointer;\n      }\n    `;\n  }\n}\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;
+}