@internetarchive/collection-browser 0.4.18 → 0.4.20

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

@@ -10,6 +10,7 @@ import './more-facets-pagination';
 import './facets-template';
 import { analyticsActions, analyticsCategories, } from '../utils/analytics-events';
 import './toggle-switch';
+import { srOnlyStyle } from '../styles/sr-only';
 let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     constructor() {
         super(...arguments);
@@ -337,82 +338,74 @@ let MoreFacetsContent = class MoreFacetsContent extends LitElement {
     }
     static get styles() {
         const modalSubmitButton = css `var(--primaryButtonBGColor, #194880)`;
-        return css `
-      @media (max-width: 560px) {
+        return [
+            srOnlyStyle,
+            css `
+        @media (max-width: 560px) {
+          section#more-facets {
+            max-height: 450px;
+          }
+          .facets-content {
+            overflow-y: auto;
+            height: 300px;
+          }
+        }
         section#more-facets {
-          max-height: 450px;
+          overflow: auto;
+          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
         }
-        .facets-content {
-          overflow-y: auto;
-          height: 300px;
+        .header-content .title {
+          display: block;
+          text-align: left;
+          font-size: 1.8rem;
+          padding: 0 10px;
+          font-weight: bold;
         }
-      }
-      section#more-facets {
-        overflow: auto;
-        padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
-      }
-      .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;
-      }
+        .sort-label {
+          margin-left: 20px;
+          font-size: 1.3rem;
+        }
 
-      .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;
-      }
+        .sort-toggle {
+          font-weight: normal;
+        }
 
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-      }
-    `;
+        .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;
+        }
+      `,
+        ];
     }
 };
 __decorate([

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

@@ -1 +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 {\n  Aggregation,\n  Bucket,\n  SearchServiceInterface,\n  SearchParams,\n  SearchType,\n  AggregationSortType,\n  FilterMap,\n} from '@internetarchive/search-service';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  FacetOption,\n  facetTitles,\n  suppressedCollections,\n  valueFacetSort,\n  defaultFacetSort,\n} from '../models';\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport './more-facets-pagination';\nimport './facets-template';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from '../utils/analytics-events';\nimport './toggle-switch';\n\n@customElement('more-facets-content')\nexport class MoreFacetsContent extends LitElement {\n  @property({ type: String }) facetKey?: FacetOption;\n\n  @property({ type: String }) facetAggregationKey?: FacetOption;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) sortedBy: AggregationSortType =\n    AggregationSortType.COUNT;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\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 = 35;\n\n  updated(changed: PropertyValues) {\n    if (\n      changed.has('facetKey') ||\n      changed.has('facetAggregationKey') ||\n      changed.has('query') ||\n      changed.has('searchType') ||\n      changed.has('filterMap')\n    ) {\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 trimmedQuery = this.query?.trim();\n    if (!trimmedQuery) return;\n\n    const aggregations = {\n      simpleParams: [this.facetAggregationKey as string],\n    };\n    const aggregationsSize = 65535; // todo - do we want to have all the records at once?\n\n    const params: SearchParams = {\n      query: trimmedQuery,\n      filters: this.filterMap,\n      aggregations,\n      aggregationsSize,\n      rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?\n    };\n\n    const results = await this.searchService?.search(params, this.searchType);\n    this.aggregations = results?.success?.response.aggregations;\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    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.moreFacetsPageChange,\n      label: `${this.pageNumber}`,\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            const displayText: string = value;\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, aggregation]) => {\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 = key as FacetOption;\n      this.facetGroupTitle = facetTitles[option];\n\n      // sort facets in specific order\n      let castedBuckets = aggregation.getSortedBuckets(\n        this.sortedBy\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n\n        // asynchronously load the collection name\n        this.preloadCollectionNames(castedBuckets);\n      }\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      // 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        const bucketKey = bucket.key;\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  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(facetSortType: AggregationSortType) {\n    this.sortedBy = facetSortType;\n    this.dispatchEvent(\n      new CustomEvent('sortedFacets', { detail: this.sortedBy })\n    );\n  }\n\n  private get getModalHeaderTemplate(): TemplateResult {\n    const facetSort = defaultFacetSort[this.facetKey as FacetOption];\n    const defaultSwitchSide =\n      facetSort === AggregationSortType.COUNT ? 'left' : 'right';\n\n    return html`<span class=\"sr-only\">More facets for:</span>\n      <span class=\"title\">\n        ${this.facetGroupTitle}\n\n        <label class=\"sort-label\">Sort by:</label>\n        ${this.facetKey\n          ? html`<toggle-switch\n              class=\"sort-toggle\"\n              leftValue=${AggregationSortType.COUNT}\n              leftLabel=\"Count\"\n              rightValue=${valueFacetSort[this.facetKey]}\n              rightLabel=${this.facetGroupTitle}\n              side=${defaultSwitchSide}\n              @change=${(e: CustomEvent<string>) => {\n                this.sortFacetAggregation(\n                  Number(e.detail) as AggregationSortType\n                );\n              }}\n            ></toggle-switch>`\n          : nothing}\n      </span>`;\n  }\n\n  render() {\n    return html`\n      ${this.facetsLoading\n        ? this.loaderTemplate\n        : html`\n            <section id=\"more-facets\">\n              <div class=\"header-content\">${this.getModalHeaderTemplate}</div>\n              <div class=\"facets-content\">${this.getMoreFacetsTemplate}</div>\n              ${this.footerTemplate}\n            </section>\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    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: `${analyticsActions.applyMoreFacetsModal}`,\n      label: `${this.facetKey}`,\n    });\n  }\n\n  private cancelClick() {\n    this.modalManager?.closeModal();\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.closeMoreFacetsModal,\n      label: `${this.facetKey}`,\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\n\n    return css`\n      @media (max-width: 560px) {\n        section#more-facets {\n          max-height: 450px;\n        }\n        .facets-content {\n          overflow-y: auto;\n          height: 300px;\n        }\n      }\n      section#more-facets {\n        overflow: auto;\n        padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */\n      }\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\n      .sort-label {\n        margin-left: 20px;\n        font-size: 1.3rem;\n      }\n\n      .sort-toggle {\n        font-weight: normal;\n      }\n\n      .facets-content {\n        font-size: 1.2rem;\n        max-height: 300px;\n        overflow: auto;\n        padding: 10px;\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: #2c2c2c;\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    `;\n  }\n}\n"]}
+{"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 {\n  Aggregation,\n  Bucket,\n  SearchServiceInterface,\n  SearchParams,\n  SearchType,\n  AggregationSortType,\n  FilterMap,\n} from '@internetarchive/search-service';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport {\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  FacetOption,\n  facetTitles,\n  suppressedCollections,\n  valueFacetSort,\n  defaultFacetSort,\n} from '../models';\nimport '@internetarchive/ia-activity-indicator/ia-activity-indicator';\nimport './more-facets-pagination';\nimport './facets-template';\nimport {\n  analyticsActions,\n  analyticsCategories,\n} from '../utils/analytics-events';\nimport './toggle-switch';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('more-facets-content')\nexport class MoreFacetsContent extends LitElement {\n  @property({ type: String }) facetKey?: FacetOption;\n\n  @property({ type: String }) facetAggregationKey?: FacetOption;\n\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) filterMap?: FilterMap;\n\n  @property({ type: Object }) modalManager?: ModalManagerInterface;\n\n  @property({ type: Object }) searchService?: SearchServiceInterface;\n\n  @property({ type: String }) searchType?: SearchType;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) sortedBy: AggregationSortType =\n    AggregationSortType.COUNT;\n\n  @property({ type: Object, attribute: false })\n  analyticsHandler?: AnalyticsManagerInterface;\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 = 35;\n\n  updated(changed: PropertyValues) {\n    if (\n      changed.has('facetKey') ||\n      changed.has('facetAggregationKey') ||\n      changed.has('query') ||\n      changed.has('searchType') ||\n      changed.has('filterMap')\n    ) {\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 trimmedQuery = this.query?.trim();\n    if (!trimmedQuery) return;\n\n    const aggregations = {\n      simpleParams: [this.facetAggregationKey as string],\n    };\n    const aggregationsSize = 65535; // todo - do we want to have all the records at once?\n\n    const params: SearchParams = {\n      query: trimmedQuery,\n      filters: this.filterMap,\n      aggregations,\n      aggregationsSize,\n      rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?\n    };\n\n    const results = await this.searchService?.search(params, this.searchType);\n    this.aggregations = results?.success?.response.aggregations;\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    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.moreFacetsPageChange,\n      label: `${this.pageNumber}`,\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            const displayText: string = value;\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, aggregation]) => {\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 = key as FacetOption;\n      this.facetGroupTitle = facetTitles[option];\n\n      // sort facets in specific order\n      let castedBuckets = aggregation.getSortedBuckets(\n        this.sortedBy\n      ) as Bucket[];\n\n      if (option === 'collection') {\n        // we are not showing fav- collections or certain deemphasized collections in facets\n        castedBuckets = castedBuckets?.filter(bucket => {\n          const bucketKey = bucket?.key?.toString();\n          return (\n            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')\n          );\n        });\n\n        // asynchronously load the collection name\n        this.preloadCollectionNames(castedBuckets);\n      }\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      // 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        const bucketKey = bucket.key;\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  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(facetSortType: AggregationSortType) {\n    this.sortedBy = facetSortType;\n    this.dispatchEvent(\n      new CustomEvent('sortedFacets', { detail: this.sortedBy })\n    );\n  }\n\n  private get getModalHeaderTemplate(): TemplateResult {\n    const facetSort = defaultFacetSort[this.facetKey as FacetOption];\n    const defaultSwitchSide =\n      facetSort === AggregationSortType.COUNT ? 'left' : 'right';\n\n    return html`<span class=\"sr-only\">More facets for:</span>\n      <span class=\"title\">\n        ${this.facetGroupTitle}\n\n        <label class=\"sort-label\">Sort by:</label>\n        ${this.facetKey\n          ? html`<toggle-switch\n              class=\"sort-toggle\"\n              leftValue=${AggregationSortType.COUNT}\n              leftLabel=\"Count\"\n              rightValue=${valueFacetSort[this.facetKey]}\n              rightLabel=${this.facetGroupTitle}\n              side=${defaultSwitchSide}\n              @change=${(e: CustomEvent<string>) => {\n                this.sortFacetAggregation(\n                  Number(e.detail) as AggregationSortType\n                );\n              }}\n            ></toggle-switch>`\n          : nothing}\n      </span>`;\n  }\n\n  render() {\n    return html`\n      ${this.facetsLoading\n        ? this.loaderTemplate\n        : html`\n            <section id=\"more-facets\">\n              <div class=\"header-content\">${this.getModalHeaderTemplate}</div>\n              <div class=\"facets-content\">${this.getMoreFacetsTemplate}</div>\n              ${this.footerTemplate}\n            </section>\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    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: `${analyticsActions.applyMoreFacetsModal}`,\n      label: `${this.facetKey}`,\n    });\n  }\n\n  private cancelClick() {\n    this.modalManager?.closeModal();\n    this.analyticsHandler?.sendEvent({\n      category: analyticsCategories.default,\n      action: analyticsActions.closeMoreFacetsModal,\n      label: `${this.facetKey}`,\n    });\n  }\n\n  static get styles(): CSSResultGroup {\n    const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;\n\n    return [\n      srOnlyStyle,\n      css`\n        @media (max-width: 560px) {\n          section#more-facets {\n            max-height: 450px;\n          }\n          .facets-content {\n            overflow-y: auto;\n            height: 300px;\n          }\n        }\n        section#more-facets {\n          overflow: auto;\n          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */\n        }\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\n        .sort-label {\n          margin-left: 20px;\n          font-size: 1.3rem;\n        }\n\n        .sort-toggle {\n          font-weight: normal;\n        }\n\n        .facets-content {\n          font-size: 1.2rem;\n          max-height: 300px;\n          overflow: auto;\n          padding: 10px;\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: #2c2c2c;\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    ];\n  }\n}\n"]}

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

@@ -3,6 +3,7 @@ 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';
+import { srOnlyStyle } from '../styles/sr-only';
 let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
     constructor() {
         super(...arguments);
@@ -193,61 +194,54 @@ let MoreFacetsPagination = class MoreFacetsPagination extends LitElement {
     `;
     }
     static get styles() {
-        return css `
-      .facets-pagination {
-        user-select: none;
-        margin-top: 10px;
-        background-color: #eee;
-        text-align: center;
-      }
-      .facets-pagination button {
-        border: none;
-        background: none;
-      }
-      .facets-pagination .arrow-icon {
-        width: 2.5rem;
-        vertical-align: middle;
-      }
-      .facets-pagination .arrow-icon svg {
-        height: 14px;
-        fill: #2c2c2c;
-      }
-      .facets-pagination button,
-      .facets-pagination i {
-        background: none;
-        border: 0;
-        cursor: pointer;
-        border-radius: 4px;
-        margin: 10px 5px;
-        padding: 5px;
-        font-size: 1.4rem;
-        color: inherit;
-        vertical-align: baseline;
-        display: inline-block;
-        min-width: 2.5rem;
-      }
-      .facets-pagination i {
-        cursor: auto;
-        display: inline;
-      }
-      .facets-pagination button.current {
-        background: #2c2c2c;
-        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;
-      }
-    `;
+        return [
+            srOnlyStyle,
+            css `
+        .facets-pagination {
+          user-select: none;
+          margin-top: 10px;
+          background-color: #eee;
+          text-align: center;
+        }
+        .facets-pagination button {
+          border: none;
+          background: none;
+        }
+        .facets-pagination .arrow-icon {
+          width: 2.5rem;
+          vertical-align: middle;
+        }
+        .facets-pagination .arrow-icon svg {
+          height: 14px;
+          fill: #2c2c2c;
+        }
+        .facets-pagination button,
+        .facets-pagination i {
+          background: none;
+          border: 0;
+          cursor: pointer;
+          border-radius: 4px;
+          margin: 10px 5px;
+          padding: 5px;
+          font-size: 1.4rem;
+          color: inherit;
+          vertical-align: baseline;
+          display: inline-block;
+          min-width: 2.5rem;
+        }
+        .facets-pagination i {
+          cursor: auto;
+          display: inline;
+        }
+        .facets-pagination button.current {
+          background: #2c2c2c;
+          color: white;
+        }
+        .page-numbers {
+          display: inline-block;
+        }
+      `,
+        ];
     }
 };
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"more-facets-pagination.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport arrowLeftIcon from '../assets/img/icons/arrow-left';\nimport arrowRightIcon from '../assets/img/icons/arrow-right';\n\n@customElement('more-facets-pagination')\nexport class MoreFacetsPagination extends LitElement {\n  /**\n   * Total number of pages\n   */\n  @property({ type: Number }) size!: number;\n\n  /**\n   * Number of pages can be moved in back/forward\n   */\n  @property({ type: Number }) step = 2;\n\n  @property({ type: Number }) currentPage: number = 1;\n\n  @state() pages?: number[] = [];\n\n  firstUpdated() {\n    this.observePageCount();\n  }\n\n  override updated(changed: Map<string, any>) {\n    if (changed.has('size')) {\n      this.observePageCount();\n    }\n    if (changed.has('currentPage')) {\n      this.observePageCount();\n      this.emitPageClick();\n    }\n  }\n\n  /** creates `this.pages` array that notes which pages to draw\n   * - `0` is elipses marker\n   * - rule: selected page is centered between -2/+2 pages\n   * - outlier: first page selected, show _1_ 2 3 ... N\n   * - outlier: second page selected, show 1 _2_ 3 4 ... N\n   * - outlier: last page selected, show 1 ... N-2 N-1 _N_\n   * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages\n   */\n  observePageCount() {\n    this.pages = []; /* `0` is elipses marker */\n\n    const paginatorMaxPagesToShow = 7;\n    const atMinThreshold = this.size <= paginatorMaxPagesToShow;\n\n    /** Display outliers  */\n    if (this.size <= 5) {\n      // display all pages\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    if (this.size === paginatorMaxPagesToShow) {\n      // edge: 7 pages\n      if (this.currentPage === 2) {\n        this.pages = [1, 2, 3, 4, 0, this.size];\n        return;\n      }\n\n      if (this.currentPage === this.size - 1) {\n        this.pages = [1, 0, 4, 5, this.size - 1, this.size];\n        return;\n      }\n    }\n\n    if (this.currentPage === 1) {\n      // first page\n      this.pages = [1, 2, 3, 0, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size) {\n      // last page\n      this.pages = [1, 0, this.size - 2, this.size - 1, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size - 1) {\n      // second last page\n      this.pages = [\n        1,\n        0,\n        this.size - 3,\n        this.size - 2,\n        this.size - 1,\n        this.size,\n      ];\n      return;\n    }\n\n    if (\n      atMinThreshold &&\n      this.currentPage > 1 &&\n      this.currentPage < paginatorMaxPagesToShow\n    ) {\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    /* The rest here calculates the range to display in \"page window\" */\n    let startPage = this.currentPage - this.step;\n    let endPage = this.currentPage + this.step;\n\n    if (startPage <= 0) {\n      endPage += -startPage + 1;\n      startPage = 1;\n    }\n\n    if (endPage >= this.size) {\n      startPage = Math.max(startPage - (endPage - this.size), 1);\n      endPage = this.size;\n    }\n\n    if (startPage === 2) {\n      endPage -= 1;\n    }\n\n    if (endPage === this.size - 1) {\n      startPage += 1;\n    }\n\n    // create first page node\n    this.createFirstNode(startPage);\n\n    // create middle pages node\n    this.createMiddelNode(startPage, endPage);\n\n    // create last page node\n    this.createLastNode(endPage);\n  }\n\n  private createFirstNode(startPage: number) {\n    if (startPage > 1) {\n      this.pages?.push(1);\n    }\n    if (startPage > 2) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n  }\n\n  private createMiddelNode(startPage: number, endPage: number) {\n    for (let page = startPage; page <= endPage; page += 1) {\n      this.pages?.push(page);\n    }\n  }\n\n  private createLastNode(endPage: number) {\n    if (endPage < this.size - 1) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n    if (endPage < this.size) {\n      this.pages?.push(this.size);\n    }\n  }\n\n  private get getEllipsisTemplate() {\n    return html`<i class=\"ellipses\">...</i>`;\n  }\n\n  emitPageClick() {\n    this.dispatchEvent(\n      new CustomEvent('pageNumberClicked', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private onRewind() {\n    this.currentPage -= 1;\n    if (this.currentPage < 1) {\n      this.currentPage = 1;\n    }\n  }\n\n  private onForward() {\n    this.currentPage += 1;\n    if (this.currentPage > this.size) {\n      this.currentPage = this.size;\n    }\n  }\n\n  private onChange(page: number) {\n    this.currentPage = page;\n  }\n\n  private getPageTemplate(page: number) {\n    return html`\n      <button\n        @click=${() => this.onChange(page)}\n        class=${this.currentPage === page ? 'current' : ''}\n        data-page=${page}\n      >\n        ${page}\n      </button>\n    `;\n  }\n\n  private get getPagesTemplate(): TemplateResult | typeof nothing {\n    if (!this.pages || !this.pages.length) {\n      return nothing;\n    }\n\n    return html`\n      ${this.pages?.map(\n        page =>\n          html`${page !== 0\n            ? this.getPageTemplate(page)\n            : this.getEllipsisTemplate}`\n      )}\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"facets-pagination\">\n        <button class=\"arrow-icon rewind\" @click=${this.onRewind}>\n          <span class=\"sr-only\">Rewind pagination:</span>\n          ${arrowLeftIcon}\n        </button>\n        <div class=\"page-numbers\">${this.getPagesTemplate}</div>\n        <button class=\"arrow-icon forward\" @click=${this.onForward}>\n          <span class=\"sr-only\">Forward pagination:</span>\n          ${arrowRightIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .facets-pagination {\n        user-select: none;\n        margin-top: 10px;\n        background-color: #eee;\n        text-align: center;\n      }\n      .facets-pagination button {\n        border: none;\n        background: none;\n      }\n      .facets-pagination .arrow-icon {\n        width: 2.5rem;\n        vertical-align: middle;\n      }\n      .facets-pagination .arrow-icon svg {\n        height: 14px;\n        fill: #2c2c2c;\n      }\n      .facets-pagination button,\n      .facets-pagination i {\n        background: none;\n        border: 0;\n        cursor: pointer;\n        border-radius: 4px;\n        margin: 10px 5px;\n        padding: 5px;\n        font-size: 1.4rem;\n        color: inherit;\n        vertical-align: baseline;\n        display: inline-block;\n        min-width: 2.5rem;\n      }\n      .facets-pagination i {\n        cursor: auto;\n        display: inline;\n      }\n      .facets-pagination button.current {\n        background: #2c2c2c;\n        color: white;\n      }\n      .page-numbers {\n        display: inline-block;\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    `;\n  }\n}\n"]}
+{"version":3,"file":"more-facets-pagination.js","sourceRoot":"","sources":["../../../src/collection-facets/more-facets-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport arrowLeftIcon from '../assets/img/icons/arrow-left';\nimport arrowRightIcon from '../assets/img/icons/arrow-right';\nimport { srOnlyStyle } from '../styles/sr-only';\n\n@customElement('more-facets-pagination')\nexport class MoreFacetsPagination extends LitElement {\n  /**\n   * Total number of pages\n   */\n  @property({ type: Number }) size!: number;\n\n  /**\n   * Number of pages can be moved in back/forward\n   */\n  @property({ type: Number }) step = 2;\n\n  @property({ type: Number }) currentPage: number = 1;\n\n  @state() pages?: number[] = [];\n\n  firstUpdated() {\n    this.observePageCount();\n  }\n\n  override updated(changed: Map<string, any>) {\n    if (changed.has('size')) {\n      this.observePageCount();\n    }\n    if (changed.has('currentPage')) {\n      this.observePageCount();\n      this.emitPageClick();\n    }\n  }\n\n  /** creates `this.pages` array that notes which pages to draw\n   * - `0` is elipses marker\n   * - rule: selected page is centered between -2/+2 pages\n   * - outlier: first page selected, show _1_ 2 3 ... N\n   * - outlier: second page selected, show 1 _2_ 3 4 ... N\n   * - outlier: last page selected, show 1 ... N-2 N-1 _N_\n   * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages\n   */\n  observePageCount() {\n    this.pages = []; /* `0` is elipses marker */\n\n    const paginatorMaxPagesToShow = 7;\n    const atMinThreshold = this.size <= paginatorMaxPagesToShow;\n\n    /** Display outliers  */\n    if (this.size <= 5) {\n      // display all pages\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    if (this.size === paginatorMaxPagesToShow) {\n      // edge: 7 pages\n      if (this.currentPage === 2) {\n        this.pages = [1, 2, 3, 4, 0, this.size];\n        return;\n      }\n\n      if (this.currentPage === this.size - 1) {\n        this.pages = [1, 0, 4, 5, this.size - 1, this.size];\n        return;\n      }\n    }\n\n    if (this.currentPage === 1) {\n      // first page\n      this.pages = [1, 2, 3, 0, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size) {\n      // last page\n      this.pages = [1, 0, this.size - 2, this.size - 1, this.size];\n      return;\n    }\n\n    if (this.currentPage === this.size - 1) {\n      // second last page\n      this.pages = [\n        1,\n        0,\n        this.size - 3,\n        this.size - 2,\n        this.size - 1,\n        this.size,\n      ];\n      return;\n    }\n\n    if (\n      atMinThreshold &&\n      this.currentPage > 1 &&\n      this.currentPage < paginatorMaxPagesToShow\n    ) {\n      this.pages = [...Array(this.size).keys()].map(i => i + 1);\n      return;\n    }\n\n    /* The rest here calculates the range to display in \"page window\" */\n    let startPage = this.currentPage - this.step;\n    let endPage = this.currentPage + this.step;\n\n    if (startPage <= 0) {\n      endPage += -startPage + 1;\n      startPage = 1;\n    }\n\n    if (endPage >= this.size) {\n      startPage = Math.max(startPage - (endPage - this.size), 1);\n      endPage = this.size;\n    }\n\n    if (startPage === 2) {\n      endPage -= 1;\n    }\n\n    if (endPage === this.size - 1) {\n      startPage += 1;\n    }\n\n    // create first page node\n    this.createFirstNode(startPage);\n\n    // create middle pages node\n    this.createMiddelNode(startPage, endPage);\n\n    // create last page node\n    this.createLastNode(endPage);\n  }\n\n  private createFirstNode(startPage: number) {\n    if (startPage > 1) {\n      this.pages?.push(1);\n    }\n    if (startPage > 2) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n  }\n\n  private createMiddelNode(startPage: number, endPage: number) {\n    for (let page = startPage; page <= endPage; page += 1) {\n      this.pages?.push(page);\n    }\n  }\n\n  private createLastNode(endPage: number) {\n    if (endPage < this.size - 1) {\n      this.pages?.push(0); // let's asssume 0 is for ellipsis template\n    }\n    if (endPage < this.size) {\n      this.pages?.push(this.size);\n    }\n  }\n\n  private get getEllipsisTemplate() {\n    return html`<i class=\"ellipses\">...</i>`;\n  }\n\n  emitPageClick() {\n    this.dispatchEvent(\n      new CustomEvent('pageNumberClicked', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private onRewind() {\n    this.currentPage -= 1;\n    if (this.currentPage < 1) {\n      this.currentPage = 1;\n    }\n  }\n\n  private onForward() {\n    this.currentPage += 1;\n    if (this.currentPage > this.size) {\n      this.currentPage = this.size;\n    }\n  }\n\n  private onChange(page: number) {\n    this.currentPage = page;\n  }\n\n  private getPageTemplate(page: number) {\n    return html`\n      <button\n        @click=${() => this.onChange(page)}\n        class=${this.currentPage === page ? 'current' : ''}\n        data-page=${page}\n      >\n        ${page}\n      </button>\n    `;\n  }\n\n  private get getPagesTemplate(): TemplateResult | typeof nothing {\n    if (!this.pages || !this.pages.length) {\n      return nothing;\n    }\n\n    return html`\n      ${this.pages?.map(\n        page =>\n          html`${page !== 0\n            ? this.getPageTemplate(page)\n            : this.getEllipsisTemplate}`\n      )}\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"facets-pagination\">\n        <button class=\"arrow-icon rewind\" @click=${this.onRewind}>\n          <span class=\"sr-only\">Rewind pagination:</span>\n          ${arrowLeftIcon}\n        </button>\n        <div class=\"page-numbers\">${this.getPagesTemplate}</div>\n        <button class=\"arrow-icon forward\" @click=${this.onForward}>\n          <span class=\"sr-only\">Forward pagination:</span>\n          ${arrowRightIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      srOnlyStyle,\n      css`\n        .facets-pagination {\n          user-select: none;\n          margin-top: 10px;\n          background-color: #eee;\n          text-align: center;\n        }\n        .facets-pagination button {\n          border: none;\n          background: none;\n        }\n        .facets-pagination .arrow-icon {\n          width: 2.5rem;\n          vertical-align: middle;\n        }\n        .facets-pagination .arrow-icon svg {\n          height: 14px;\n          fill: #2c2c2c;\n        }\n        .facets-pagination button,\n        .facets-pagination i {\n          background: none;\n          border: 0;\n          cursor: pointer;\n          border-radius: 4px;\n          margin: 10px 5px;\n          padding: 5px;\n          font-size: 1.4rem;\n          color: inherit;\n          vertical-align: baseline;\n          display: inline-block;\n          min-width: 2.5rem;\n        }\n        .facets-pagination i {\n          cursor: auto;\n          display: inline;\n        }\n        .facets-pagination button.current {\n          background: #2c2c2c;\n          color: white;\n        }\n        .page-numbers {\n          display: inline-block;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/collection-facets/toggle-switch.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { srOnlyStyle } from '../styles/sr-only';
 let ToggleSwitch = class ToggleSwitch extends LitElement {
     constructor() {
         super(...arguments);
@@ -94,69 +95,58 @@ let ToggleSwitch = class ToggleSwitch extends LitElement {
         const knobColor = css `var(--knobColor, white)`;
         const knobTransitionDuration = css `var(--knobTransitionDuration, 0.25s)`;
         const knobTransitionFn = css `var(--knobTransitionFn, ease)`;
-        return css `
-      #container {
-        display: inline-flex;
-        align-items: center;
-        flex-wrap: nowrap;
-        font-size: ${labelFontSize};
-      }
-
-      #switch-button {
-        width: ${switchWidth};
-        height: ${switchHeight};
-        margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
-        padding: 0;
-        border: ${switchBorderWidth} solid ${switchBorderColor};
-        border-radius: ${switchHeight};
-        box-sizing: content-box;
-        background: ${switchBgColor};
-        appearance: none;
-        cursor: pointer;
-      }
-
-      #switch-button.left #knob {
-        transform: translateX(0);
-      }
+        return [
+            srOnlyStyle,
+            css `
+        #container {
+          display: inline-flex;
+          align-items: center;
+          flex-wrap: nowrap;
+          font-size: ${labelFontSize};
+        }
 
-      #switch-button.right #knob {
-        transform: translateX(calc(${switchWidth} - ${switchHeight}));
-      }
+        #switch-button {
+          width: ${switchWidth};
+          height: ${switchHeight};
+          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
+          padding: 0;
+          border: ${switchBorderWidth} solid ${switchBorderColor};
+          border-radius: ${switchHeight};
+          box-sizing: content-box;
+          background: ${switchBgColor};
+          appearance: none;
+          cursor: pointer;
+        }
 
-      #switch-button:focus-visible {
-        outline: 2px solid black;
-        outline-offset: 2px;
-      }
+        #switch-button.left #knob {
+          transform: translateX(0);
+        }
 
-      #knob {
-        display: block;
-        width: ${switchHeight};
-        height: ${switchHeight};
-        border-radius: 50%;
-        background: ${knobColor};
-        transition: transform ${knobTransitionDuration} ${knobTransitionFn};
-      }
+        #switch-button.right #knob {
+          transform: translateX(calc(${switchWidth} - ${switchHeight}));
+        }
 
-      .sr-only {
-        position: absolute !important;
-        width: 1px !important;
-        height: 1px !important;
-        margin: -1px !important;
-        padding: 0 !important;
-        border: 0 !important;
-        overflow: hidden !important;
-        white-space: nowrap !important;
-        clip: rect(1px, 1px, 1px, 1px) !important;
-        -webkit-clip-path: inset(50%) !important;
-        clip-path: inset(50%) !important;
-      }
+        #switch-button:focus-visible {
+          outline: 2px solid black;
+          outline-offset: 2px;
+        }
 
-      @media (prefers-reduced-motion: reduce) {
         #knob {
-          transition-duration: 0.001s !important; /* Imperceptibly fast */
+          display: block;
+          width: ${switchHeight};
+          height: ${switchHeight};
+          border-radius: 50%;
+          background: ${knobColor};
+          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
         }
-      }
-    `;
+
+        @media (prefers-reduced-motion: reduce) {
+          #knob {
+            transition-duration: 0.001s !important; /* Imperceptibly fast */
+          }
+        }
+      `,
+        ];
     }
 };
 __decorate([

package/dist/src/collection-facets/toggle-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/collection-facets/toggle-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nexport type Side = 'left' | 'right';\n\n@customElement('toggle-switch')\nexport class ToggleSwitch extends LitElement {\n  /**\n   * The value this switch should have when toggled to the left.\n   */\n  @property({ type: String, attribute: true }) leftValue: string = '';\n\n  /**\n   * The human-readable label to display on the left side of this switch.\n   * If none is provided, `leftValue` is used.\n   */\n  @property({ type: String, attribute: true }) leftLabel?: string;\n\n  /**\n   * The value this switch should have when toggled to the right.\n   */\n  @property({ type: String, attribute: true }) rightValue: string = '';\n\n  /**\n   * The human-readable label to display on the right side of this switch.\n   * If none is provided, `rightValue` is used.\n   */\n  @property({ type: String, attribute: true }) rightLabel?: string;\n\n  /**\n   * Which side of the switch is selected (`'left'` or `'right'`).\n   */\n  @property({ type: String, attribute: true }) side: Side = 'left';\n\n  @query('#switch-left')\n  private leftRadio!: HTMLInputElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <label for=\"switch-left\">${this.leftLabel ?? this.leftValue}</label>\n        <input\n          type=\"radio\"\n          id=\"switch-left\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.leftValue}\n          .checked=${this.side === 'left'}\n          @change=${this.handleRadioChange}\n        />\n        <input\n          type=\"radio\"\n          id=\"switch-right\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.rightValue}\n          .checked=${this.side === 'right'}\n          @change=${this.handleRadioChange}\n        />\n        <button\n          id=\"switch-button\"\n          class=${this.side}\n          aria-hidden=\"true\"\n          @click=${this.handleClick}\n        >\n          <div id=\"knob\"></div>\n        </button>\n        <label for=\"switch-right\">${this.rightLabel ?? this.rightValue}</label>\n      </div>\n    `;\n  }\n\n  /**\n   * The currently selected value of this switch.\n   */\n  get value(): string {\n    return this.side === 'left' ? this.leftValue : this.rightValue;\n  }\n\n  /**\n   * The label for the currently selected value of this switch.\n   * Falls back to the current value if its label is not defined.\n   */\n  get selectedLabel(): string {\n    return this.side === 'left'\n      ? this.leftLabel ?? this.leftValue\n      : this.rightLabel ?? this.rightValue;\n  }\n\n  private handleClick(): void {\n    this.side = this.side === 'left' ? 'right' : 'left';\n    this.emitChangeEvent();\n  }\n\n  private handleRadioChange(): void {\n    this.side = this.leftRadio.checked ? 'left' : 'right';\n    this.emitChangeEvent();\n  }\n\n  private emitChangeEvent(): void {\n    const event = new CustomEvent<string>('change', {\n      detail: this.value,\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const switchWidth = css`var(--switchWidth, 30px)`;\n    const switchHeight = css`var(--switchHeight, 14px)`;\n    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;\n    const switchMarginRight = css`var(--switchMarginRight, 5px)`;\n    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;\n    const switchBgColor = css`var(--switchBgColor, #194880)`;\n    const switchBorderColor = css`var(--switchBorderColor, #194880)`;\n    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;\n    const knobColor = css`var(--knobColor, white)`;\n    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;\n    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;\n\n    return css`\n      #container {\n        display: inline-flex;\n        align-items: center;\n        flex-wrap: nowrap;\n        font-size: ${labelFontSize};\n      }\n\n      #switch-button {\n        width: ${switchWidth};\n        height: ${switchHeight};\n        margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};\n        padding: 0;\n        border: ${switchBorderWidth} solid ${switchBorderColor};\n        border-radius: ${switchHeight};\n        box-sizing: content-box;\n        background: ${switchBgColor};\n        appearance: none;\n        cursor: pointer;\n      }\n\n      #switch-button.left #knob {\n        transform: translateX(0);\n      }\n\n      #switch-button.right #knob {\n        transform: translateX(calc(${switchWidth} - ${switchHeight}));\n      }\n\n      #switch-button:focus-visible {\n        outline: 2px solid black;\n        outline-offset: 2px;\n      }\n\n      #knob {\n        display: block;\n        width: ${switchHeight};\n        height: ${switchHeight};\n        border-radius: 50%;\n        background: ${knobColor};\n        transition: transform ${knobTransitionDuration} ${knobTransitionFn};\n      }\n\n      .sr-only {\n        position: absolute !important;\n        width: 1px !important;\n        height: 1px !important;\n        margin: -1px !important;\n        padding: 0 !important;\n        border: 0 !important;\n        overflow: hidden !important;\n        white-space: nowrap !important;\n        clip: rect(1px, 1px, 1px, 1px) !important;\n        -webkit-clip-path: inset(50%) !important;\n        clip-path: inset(50%) !important;\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        #knob {\n          transition-duration: 0.001s !important; /* Imperceptibly fast */\n        }\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../../../src/collection-facets/toggle-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { srOnlyStyle } from '../styles/sr-only';\n\nexport type Side = 'left' | 'right';\n\n@customElement('toggle-switch')\nexport class ToggleSwitch extends LitElement {\n  /**\n   * The value this switch should have when toggled to the left.\n   */\n  @property({ type: String, attribute: true }) leftValue: string = '';\n\n  /**\n   * The human-readable label to display on the left side of this switch.\n   * If none is provided, `leftValue` is used.\n   */\n  @property({ type: String, attribute: true }) leftLabel?: string;\n\n  /**\n   * The value this switch should have when toggled to the right.\n   */\n  @property({ type: String, attribute: true }) rightValue: string = '';\n\n  /**\n   * The human-readable label to display on the right side of this switch.\n   * If none is provided, `rightValue` is used.\n   */\n  @property({ type: String, attribute: true }) rightLabel?: string;\n\n  /**\n   * Which side of the switch is selected (`'left'` or `'right'`).\n   */\n  @property({ type: String, attribute: true }) side: Side = 'left';\n\n  @query('#switch-left')\n  private leftRadio!: HTMLInputElement;\n\n  render() {\n    return html`\n      <div id=\"container\">\n        <label for=\"switch-left\">${this.leftLabel ?? this.leftValue}</label>\n        <input\n          type=\"radio\"\n          id=\"switch-left\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.leftValue}\n          .checked=${this.side === 'left'}\n          @change=${this.handleRadioChange}\n        />\n        <input\n          type=\"radio\"\n          id=\"switch-right\"\n          class=\"sr-only\"\n          name=\"switch\"\n          .value=${this.rightValue}\n          .checked=${this.side === 'right'}\n          @change=${this.handleRadioChange}\n        />\n        <button\n          id=\"switch-button\"\n          class=${this.side}\n          aria-hidden=\"true\"\n          @click=${this.handleClick}\n        >\n          <div id=\"knob\"></div>\n        </button>\n        <label for=\"switch-right\">${this.rightLabel ?? this.rightValue}</label>\n      </div>\n    `;\n  }\n\n  /**\n   * The currently selected value of this switch.\n   */\n  get value(): string {\n    return this.side === 'left' ? this.leftValue : this.rightValue;\n  }\n\n  /**\n   * The label for the currently selected value of this switch.\n   * Falls back to the current value if its label is not defined.\n   */\n  get selectedLabel(): string {\n    return this.side === 'left'\n      ? this.leftLabel ?? this.leftValue\n      : this.rightLabel ?? this.rightValue;\n  }\n\n  private handleClick(): void {\n    this.side = this.side === 'left' ? 'right' : 'left';\n    this.emitChangeEvent();\n  }\n\n  private handleRadioChange(): void {\n    this.side = this.leftRadio.checked ? 'left' : 'right';\n    this.emitChangeEvent();\n  }\n\n  private emitChangeEvent(): void {\n    const event = new CustomEvent<string>('change', {\n      detail: this.value,\n    });\n    this.dispatchEvent(event);\n  }\n\n  static get styles(): CSSResultGroup {\n    const switchWidth = css`var(--switchWidth, 30px)`;\n    const switchHeight = css`var(--switchHeight, 14px)`;\n    const switchMarginLeft = css`var(--switchMarginLeft, 5px)`;\n    const switchMarginRight = css`var(--switchMarginRight, 5px)`;\n    const switchBorderWidth = css`var(--switchBorderWidth, 3px)`;\n    const switchBgColor = css`var(--switchBgColor, #194880)`;\n    const switchBorderColor = css`var(--switchBorderColor, #194880)`;\n    const labelFontSize = css`var(--labelFontSize, 1.3rem)`;\n    const knobColor = css`var(--knobColor, white)`;\n    const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;\n    const knobTransitionFn = css`var(--knobTransitionFn, ease)`;\n\n    return [\n      srOnlyStyle,\n      css`\n        #container {\n          display: inline-flex;\n          align-items: center;\n          flex-wrap: nowrap;\n          font-size: ${labelFontSize};\n        }\n\n        #switch-button {\n          width: ${switchWidth};\n          height: ${switchHeight};\n          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};\n          padding: 0;\n          border: ${switchBorderWidth} solid ${switchBorderColor};\n          border-radius: ${switchHeight};\n          box-sizing: content-box;\n          background: ${switchBgColor};\n          appearance: none;\n          cursor: pointer;\n        }\n\n        #switch-button.left #knob {\n          transform: translateX(0);\n        }\n\n        #switch-button.right #knob {\n          transform: translateX(calc(${switchWidth} - ${switchHeight}));\n        }\n\n        #switch-button:focus-visible {\n          outline: 2px solid black;\n          outline-offset: 2px;\n        }\n\n        #knob {\n          display: block;\n          width: ${switchHeight};\n          height: ${switchHeight};\n          border-radius: 50%;\n          background: ${knobColor};\n          transition: transform ${knobTransitionDuration} ${knobTransitionFn};\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          #knob {\n            transition-duration: 0.001s !important; /* Imperceptibly fast */\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -75,5 +75,5 @@ export declare class CollectionFacets extends LitElement {
      * Generate the list template for each bucket in a facet group
      */
     private getFacetTemplate;
-    static get styles(): import("lit").CSSResult;
+    static get styles(): import("lit").CSSResult[];
 }