@internetarchive/collection-browser 0.2.15-0 → 0.2.16-alpha1

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

@@ -0,0 +1,56 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+import type { Aggregation, Bucket, SearchServiceInterface } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { SelectedFacets } from '../models';
+import type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: string;
+    facetAggregationKey?: string;
+    fullQuery?: string;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    collectionNameCache?: CollectionNameCacheInterface;
+    languageCodeHandler?: LanguageCodeHandlerInterface;
+    selectedFacets?: SelectedFacets;
+    aggregations?: Record<string, Aggregation>;
+    castedBuckets?: Bucket[];
+    pageNumber: number;
+    /**
+     * Facets are loading on popup
+     */
+    facetsLoading: boolean;
+    paginationSize: number;
+    private facetsPerPage;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Close more facets modal on Escape click
+     */
+    private setupEscapeListeners;
+    /**
+     * 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>;
+    /**
+     * Filter facets data stored in this.aggregations, eg.
+     * - we don't want to entertain year_histogram data since we using new date-picker
+     * - name of collections needs to be load inside cache using this.collectionNameCache
+     *
+     * this.castedBuckets - hold filtered facets data which will be render in modal
+     */
+    filterFacets(): Promise<void>;
+    private pageNumberClicked;
+    private get getMoreFacetsTemplate();
+    private facetClicked;
+    private get loaderTemplate();
+    private get facetsPaginationTemplate();
+    private get facetsContentTemplate();
+    render(): import("lit-html").TemplateResult<1>;
+    private applySearchFacetsClicked;
+    private cancelClick;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,374 @@
+import { __decorate } from "tslib";
+/* eslint-disable dot-notation */
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { defaultSelectedFacets } from '../models';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+let MoreFacetsContent = class MoreFacetsContent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.castedBuckets = [];
+        this.pageNumber = 1;
+        /**
+         * Facets are loading on popup
+         */
+        this.facetsLoading = true;
+        this.paginationSize = 0;
+        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();
+        }
+    }
+    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: 1000000, // 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;
+        // filter facets data to be rendered in modal-manager
+        await this.filterFacets();
+        this.facetsLoading = false;
+    }
+    /**
+     * Filter facets data stored in this.aggregations, eg.
+     * - we don't want to entertain year_histogram data since we using new date-picker
+     * - name of collections needs to be load inside cache using this.collectionNameCache
+     *
+     * this.castedBuckets - hold filtered facets data which will be render in modal
+     */
+    async filterFacets() {
+        var _a;
+        Object.entries((_a = this.aggregations) !== null && _a !== void 0 ? _a : []).forEach(([key, buckets]) => {
+            var _a, _b;
+            if (key === 'year_histogram')
+                return;
+            this.castedBuckets = buckets['buckets'];
+            if (this.facetKey === 'collection') {
+                // 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
+                const collectionIds = (_a = this.castedBuckets) === null || _a === void 0 ? void 0 : _a.map(option => option.key);
+                const collectionIdsArray = Array.from(new Set(collectionIds));
+                (_b = this.collectionNameCache) === null || _b === void 0 ? void 0 : _b.preloadIdentifiers(collectionIdsArray);
+            }
+        });
+        const { length } = Object.keys(this.castedBuckets);
+        this.paginationSize = Math.ceil(length / this.facetsPerPage);
+    }
+    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);
+        }
+    }
+    get getMoreFacetsTemplate() {
+        var _a;
+        this.facetsLoading = false;
+        // render only items which will be visible as per this.facetsPerPage
+        const currentPageContent = (_a = this.castedBuckets) === null || _a === void 0 ? void 0 : _a.slice((this.pageNumber - 1) * this.facetsPerPage, this.pageNumber * this.facetsPerPage);
+        return html `<ul class="facet-list">
+      ${currentPageContent === null || currentPageContent === void 0 ? void 0 : currentPageContent.map(facet => {
+            var _a, _b;
+            let displayText = facet.key;
+            if (this.facetKey === 'language') {
+                displayText =
+                    (_b = (_a = this.languageCodeHandler) === null || _a === void 0 ? void 0 : _a.getLanguageNameFromCodeString(displayText)) !== null && _b !== void 0 ? _b : displayText;
+            }
+            return html `
+          <li class="facet-row">
+            <div class="facet-checkbox">
+              <input
+                type="checkbox"
+                class="selected-facets"
+                id="${facet.key}"
+                data-facet="${this.facetKey}"
+                .value="${facet.key}"
+                @click=${(e) => {
+                this.facetClicked(e);
+            }}
+              />
+            </div>
+            <label
+              class="facet-info-display"
+              for="${facet.key}"
+              title=${facet.key}
+            >
+              <div class="facet-title">
+                ${this.facetKey !== 'collection'
+                ? html `${displayText}`
+                : html `<async-collection-name
+                      .collectionNameCache=${this.collectionNameCache}
+                      .identifier=${displayText}
+                      placeholder="-"
+                    ></async-collection-name>`}
+              </div>
+              <div class="facet-count">${facet.doc_count}</div>
+            </label>
+          </li>
+        `;
+        })}
+    </ul>`;
+    }
+    facetClicked(e) {
+        const { selectedFacets } = this;
+        const target = e.target;
+        const { checked, value } = target;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        if (checked) {
+            newFacets[this.facetKey][value] = 'selected';
+        }
+        else {
+            delete newFacets[this.facetKey][value];
+        }
+        this.selectedFacets = newFacets;
+    }
+    get loaderTemplate() {
+        return this.facetsLoading
+            ? html `<div class="facets-loader">
+          <ia-activity-indicator .mode="processing"></ia-activity-indicator>
+        </div>`
+            : nothing;
+    }
+    // render pagination if more then 1 page
+    get facetsPaginationTemplate() {
+        return this.paginationSize > 1
+            ? html `<more-facets-pagination
+          .size=${this.paginationSize}
+          @pageNumberClicked=${this.pageNumberClicked}
+        ></more-facets-pagination>`
+            : nothing;
+    }
+    get facetsContentTemplate() {
+        return html `
+      <div class="facets-content">${this.getMoreFacetsTemplate}</div>
+      ${this.paginationSize > 0
+            ? 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>`
+            : html `No result found. please try again later.`}
+    `;
+    }
+    render() {
+        return html `
+      <div id="more-facets-page">
+        <form>
+          ${this.facetsLoading
+            ? this.loaderTemplate
+            : this.facetsContentTemplate}
+        </form>
+      </div>
+    `;
+    }
+    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 `
+      #more-facets-page {
+        margin-bottom: 2rem;
+      }
+
+      .facets-content {
+        -webkit-column-width: 25rem;
+        -moz-column-width: 25rem;
+        column-width: 25rem;
+        font-size: 1.2rem;
+        padding: 0 10px;
+      }
+
+      ul.facet-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul.facet-list li {
+        margin-bottom: 2px;
+      }
+
+      .facet-row {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        font-weight: 500;
+        font-size: 1.2rem;
+      }
+      .facet-row input {
+        margin: 1px 5px 1px 0;
+        vertical-align: middle;
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+      }
+      .facet-title {
+        flex: 1 1 0%;
+      }
+      .facet-count {
+        margin-left: 5px;
+      }
+
+      .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 {
+        text-align: center;
+        margin-bottom: 2rem;
+        height: 7rem;
+        width: 7rem;
+        display: inline-block;
+      }
+
+      .btn {
+        border: none;
+        padding: 10px;
+        margin-bottom: 10px;
+        width: auto;
+        border-radius: 0.4rem;
+        cursor: pointer;
+      }
+      .btn-cancel {
+        background-color: #000;
+        color: white;
+      }
+      .btn-submit {
+        background-color: ${modalSubmitButton};
+        color: white;
+      }
+
+      .footer {
+        margin-top: 10px;
+      }
+    `;
+    }
+};
+__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([
+    state()
+], MoreFacetsContent.prototype, "aggregations", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "castedBuckets", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "pageNumber", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "facetsLoading", void 0);
+__decorate([
+    state()
+], MoreFacetsContent.prototype, "paginationSize", 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 */\nimport {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\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 { SelectedFacets, defaultSelectedFacets } from '../models';\nimport type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport './more-facets-pagination';\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  @state() aggregations?: Record<string, Aggregation>;\n\n  @state() castedBuckets?: Bucket[] = [];\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  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\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: 1000000, // 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    // filter facets data to be rendered in modal-manager\n    await this.filterFacets();\n    this.facetsLoading = false;\n  }\n\n  /**\n   * Filter facets data stored in this.aggregations, eg.\n   * - we don't want to entertain year_histogram data since we using new date-picker\n   * - name of collections needs to be load inside cache using this.collectionNameCache\n   *\n   * this.castedBuckets - hold filtered facets data which will be render in modal\n   */\n  async filterFacets(): Promise<void> {\n    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {\n      if (key === 'year_histogram') return;\n\n      this.castedBuckets = buckets['buckets'] as Bucket[];\n\n      if (this.facetKey === 'collection') {\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        const collectionIds = this.castedBuckets?.map(option => option.key);\n        const collectionIdsArray = Array.from(\n          new Set(collectionIds)\n        ) as string[];\n        this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);\n      }\n    });\n\n    const { length } = Object.keys(this.castedBuckets as []);\n    this.paginationSize = Math.ceil(length / this.facetsPerPage);\n  }\n\n  private pageNumberClicked(e: CustomEvent<{ page: string }>) {\n    const page = e?.detail?.page;\n    if (page) {\n      this.pageNumber = Number(page);\n    }\n  }\n\n  private get getMoreFacetsTemplate() {\n    this.facetsLoading = false;\n\n    // render only items which will be visible as per this.facetsPerPage\n    const currentPageContent = this.castedBuckets?.slice(\n      (this.pageNumber - 1) * this.facetsPerPage,\n      this.pageNumber * this.facetsPerPage\n    );\n\n    return html`<ul class=\"facet-list\">\n      ${currentPageContent?.map(facet => {\n        let displayText = facet.key;\n\n        if (this.facetKey === 'language') {\n          displayText =\n            this.languageCodeHandler?.getLanguageNameFromCodeString(\n              displayText as string\n            ) ?? displayText;\n        }\n\n        return html`\n          <li class=\"facet-row\">\n            <div class=\"facet-checkbox\">\n              <input\n                type=\"checkbox\"\n                class=\"selected-facets\"\n                id=\"${facet.key}\"\n                data-facet=\"${this.facetKey}\"\n                .value=\"${facet.key}\"\n                @click=${(e: Event) => {\n                  this.facetClicked(e);\n                }}\n              />\n            </div>\n            <label\n              class=\"facet-info-display\"\n              for=\"${facet.key}\"\n              title=${facet.key}\n            >\n              <div class=\"facet-title\">\n                ${this.facetKey !== 'collection'\n                  ? html`${displayText}`\n                  : html`<async-collection-name\n                      .collectionNameCache=${this.collectionNameCache}\n                      .identifier=${displayText}\n                      placeholder=\"-\"\n                    ></async-collection-name>`}\n              </div>\n              <div class=\"facet-count\">${facet.doc_count}</div>\n            </label>\n          </li>\n        `;\n      })}\n    </ul>`;\n  }\n\n  private facetClicked(e: Event) {\n    const { selectedFacets } = this;\n\n    const target = e.target as HTMLInputElement;\n    const { checked, value } = target;\n\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = defaultSelectedFacets;\n    }\n\n    if (checked) {\n      newFacets[this.facetKey as keyof typeof newFacets][value] = 'selected';\n    } else {\n      delete newFacets[this.facetKey as keyof typeof newFacets][value];\n    }\n\n    this.selectedFacets = newFacets;\n  }\n\n  private get loaderTemplate() {\n    return this.facetsLoading\n      ? html`<div class=\"facets-loader\">\n          <ia-activity-indicator .mode=\"processing\"></ia-activity-indicator>\n        </div>`\n      : nothing;\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          @pageNumberClicked=${this.pageNumberClicked}\n        ></more-facets-pagination>`\n      : nothing;\n  }\n\n  private get facetsContentTemplate() {\n    return html`\n      <div class=\"facets-content\">${this.getMoreFacetsTemplate}</div>\n      ${this.paginationSize > 0\n        ? 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        : html`No result found. please try again later.`}\n    `;\n  }\n\n  render() {\n    return html`\n      <div id=\"more-facets-page\">\n        <form>\n          ${this.facetsLoading\n            ? this.loaderTemplate\n            : this.facetsContentTemplate}\n        </form>\n      </div>\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      #more-facets-page {\n        margin-bottom: 2rem;\n      }\n\n      .facets-content {\n        -webkit-column-width: 25rem;\n        -moz-column-width: 25rem;\n        column-width: 25rem;\n        font-size: 1.2rem;\n        padding: 0 10px;\n      }\n\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      ul.facet-list li {\n        margin-bottom: 2px;\n      }\n\n      .facet-row {\n        text-align: left;\n        display: flex;\n        align-items: start;\n        font-weight: 500;\n        font-size: 1.2rem;\n      }\n      .facet-row input {\n        margin: 1px 5px 1px 0;\n        vertical-align: middle;\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n      }\n      .facet-title {\n        flex: 1 1 0%;\n      }\n      .facet-count {\n        margin-left: 5px;\n      }\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        text-align: center;\n        margin-bottom: 2rem;\n        height: 7rem;\n        width: 7rem;\n        display: inline-block;\n      }\n\n      .btn {\n        border: none;\n        padding: 10px;\n        margin-bottom: 10px;\n        width: auto;\n        border-radius: 0.4rem;\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\n      .footer {\n        margin-top: 10px;\n      }\n    `;\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { CSSResultGroup, LitElement } from 'lit';
+export declare class MoreFacetsPagination extends LitElement {
+    /**
+     * Total number of pages
+     */
+    size?: any | undefined;
+    /**
+     * Number of pages can be moved in back/forward
+     */
+    step: number;
+    pages?: number[];
+    currentPage: number;
+    firstUpdated(): void;
+    observePageCount(): void;
+    private createFirstNode;
+    private createMiddelNode;
+    private createLastNode;
+    private get getEllipsisTemplate();
+    private emitPageClick;
+    private onRewind;
+    private onForward;
+    private onChange;
+    private getPageTemplate;
+    private get getPagesTemplate();
+    render(): import("lit-html").TemplateResult<1>;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,193 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import arrowLeftIcon from '../assets/img/icons/arrow-left';
+import arrowRightIcon from '../assets/img/icons/arrow-right';
+let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Number of pages can be moved in back/forward
+         */
+        this.step = 2;
+        this.pages = [];
+        this.currentPage = 1;
+    }
+    firstUpdated() {
+        this.observePageCount();
+    }
+    observePageCount() {
+        this.pages = [];
+        let startPage = this.currentPage - this.step;
+        let endPage = this.currentPage + this.step;
+        if (startPage <= 0) {
+            endPage += -startPage + 1;
+            startPage = 1;
+        }
+        if (endPage >= this.size) {
+            startPage = Math.max(startPage - (endPage - this.size), 1);
+            endPage = this.size;
+        }
+        // create first page node
+        this.createFirstNode(startPage);
+        // create middle pages node
+        this.createMiddelNode(startPage, endPage);
+        // create last page node
+        this.createLastNode(endPage);
+    }
+    createFirstNode(startPage) {
+        var _a, _b;
+        if (startPage > 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(1);
+            (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(0); // let's asssume 0 is for ellipsis template
+        }
+    }
+    createMiddelNode(startPage, endPage) {
+        var _a;
+        for (let page = startPage; page <= endPage; page += 1) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(page);
+        }
+    }
+    createLastNode(endPage) {
+        var _a, _b;
+        if (endPage < this.size) {
+            (_a = this.pages) === null || _a === void 0 ? void 0 : _a.push(0); // let's asssume 0 is for ellipsis template
+            (_b = this.pages) === null || _b === void 0 ? void 0 : _b.push(this.size);
+        }
+    }
+    get getEllipsisTemplate() {
+        return html `<i>...</i>`;
+    }
+    emitPageClick() {
+        this.dispatchEvent(new CustomEvent('pageNumberClicked', {
+            detail: { page: this.currentPage },
+        }));
+    }
+    onRewind() {
+        this.currentPage -= 1;
+        if (this.currentPage < 1) {
+            this.currentPage = 1;
+        }
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    onForward() {
+        this.currentPage += 1;
+        if (this.currentPage > this.size) {
+            this.currentPage = this.size;
+        }
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    onChange(page) {
+        this.currentPage = page;
+        this.observePageCount();
+        this.emitPageClick();
+    }
+    getPageTemplate(page) {
+        return html `
+      <button
+        @click="${() => this.onChange(page)}"
+        class="${this.currentPage === page ? 'current' : nothing}"
+      >
+        ${page}
+      </button>
+    `;
+    }
+    get getPagesTemplate() {
+        var _a;
+        return html `
+      ${(_a = this.pages) === null || _a === void 0 ? void 0 : _a.map(page => html `${page !== 0
+            ? this.getPageTemplate(page)
+            : this.getEllipsisTemplate}`)}
+    `;
+    }
+    render() {
+        return html `
+      <div class="facets-pagination">
+        <button class="arrow-icon" @click=${this.onRewind}>
+          <span class="sr-only">Rewind pagination:</span>
+          ${arrowLeftIcon}
+        </button>
+        <div class="page-numbers">${this.getPagesTemplate}</div>
+        <button class="arrow-icon" @click=${this.onForward}>
+          <span class="sr-only">Forward pagination:</span>
+          ${arrowRightIcon}
+        </button>
+      </div>
+    `;
+    }
+    static get styles() {
+        return css `
+      .facets-pagination {
+        user-select: none;
+        margin-top: 10px;
+        background-color: #eee;
+        text-align: center;
+        font-size: 3.2rem;
+      }
+      .facets-pagination button {
+        border: none;
+        background: none;
+      }
+      .facets-pagination .arrow-icon {
+        width: 2.5rem;
+        vertical-align: initial;
+      }
+
+      .facets-pagination button,
+      .facets-pagination i {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        margin: 10px;
+        padding: 5px;
+        font-size: 1.4rem;
+        vertical-align: middle;
+        display: inline-block;
+        min-width: 2.5rem;
+      }
+      .facets-pagination i {
+        cursor: auto;
+        display: inline;
+      }
+      .facets-pagination button.current {
+        background: black;
+        color: white;
+      }
+
+      .page-numbers {
+        display: inline-block;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "size", void 0);
+__decorate([
+    property({ type: Number })
+], MoreFacetsPagination.prototype, "step", void 0);
+__decorate([
+    state()
+], MoreFacetsPagination.prototype, "pages", void 0);
+__decorate([
+    state()
+], MoreFacetsPagination.prototype, "currentPage", void 0);
+MoreFacetsPagination = __decorate([
+    customElement('more-facets-pagination')
+], MoreFacetsPagination);
+export { MoreFacetsPagination };
+//# sourceMappingURL=more-facets-pagination.js.map