@internetarchive/collection-browser 0.4.11 → 0.4.12

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":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAG7D,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QAME;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;QAET,gBAAW,GAAW,CAAC,CAAC;QAE3C,UAAK,GAAc,EAAE,CAAC;IA8QjC,CAAC;IA5QC,YAAY;QACV,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEQ,OAAO,CAAC,OAAyB;QACxC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAED;;;;;;;OAOG;IACH,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,2BAA2B;QAE5C,MAAM,uBAAuB,GAAG,CAAC,CAAC;QAClC,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,IAAI,uBAAuB,CAAC;QAE5D,wBAAwB;QACxB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,EAAE;YAClB,oBAAoB;YACpB,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC1D,OAAO;SACR;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,uBAAuB,EAAE;YACzC,gBAAgB;YAChB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;gBAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACxC,OAAO;aACR;YAED,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;gBACtC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpD,OAAO;aACR;SACF;QAED,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;YAC1B,aAAa;YACb,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,EAAE;YAClC,YAAY;YACZ,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC7D,OAAO;SACR;QAED,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;YACtC,mBAAmB;YACnB,IAAI,CAAC,KAAK,GAAG;gBACX,CAAC;gBACD,CAAC;gBACD,IAAI,CAAC,IAAI,GAAG,CAAC;gBACb,IAAI,CAAC,IAAI,GAAG,CAAC;gBACb,IAAI,CAAC,IAAI,GAAG,CAAC;gBACb,IAAI,CAAC,IAAI;aACV,CAAC;YACF,OAAO;SACR;QAED,IACE,cAAc;YACd,IAAI,CAAC,WAAW,GAAG,CAAC;YACpB,IAAI,CAAC,WAAW,GAAG,uBAAuB,EAC1C;YACA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAC1D,OAAO;SACR;QAED,oEAAoE;QACpE,IAAI,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAC7C,IAAI,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;QAE3C,IAAI,SAAS,IAAI,CAAC,EAAE;YAClB,OAAO,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YAC1B,SAAS,GAAG,CAAC,CAAC;SACf;QAED,IAAI,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YACxB,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YAC3D,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;SACrB;QAED,IAAI,SAAS,KAAK,CAAC,EAAE;YACnB,OAAO,IAAI,CAAC,CAAC;SACd;QAED,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;YAC7B,SAAS,IAAI,CAAC,CAAC;SAChB;QAED,yBAAyB;QACzB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAEhC,2BAA2B;QAC3B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAE1C,wBAAwB;QACxB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,CAAC;IAEO,eAAe,CAAC,SAAiB;;QACvC,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,CAAC;SACrB;QACD,IAAI,SAAS,GAAG,CAAC,EAAE;YACjB,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,2CAA2C;SACjE;IACH,CAAC;IAEO,gBAAgB,CAAC,SAAiB,EAAE,OAAe;;QACzD,KAAK,IAAI,IAAI,GAAG,SAAS,EAAE,IAAI,IAAI,OAAO,EAAE,IAAI,IAAI,CAAC,EAAE;YACrD,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB;IACH,CAAC;IAEO,cAAc,CAAC,OAAe;;QACpC,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;YAC3B,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,2CAA2C;SACjE;QACD,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE;YACvB,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC7B;IACH,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA,6BAA6B,CAAC;IAC3C,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;YACxB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACtB;IACH,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;SAC9B;IACH,CAAC;IAEO,QAAQ,CAAC,IAAY;QAC3B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,eAAe,CAAC,IAAY;QAClC,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAC1B,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;oBACtC,IAAI;;UAEd,IAAI;;KAET,CAAC;IACJ,CAAC;IAED,IAAY,gBAAgB;;QAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACrC,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;QACP,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CACf,IAAI,CAAC,EAAE,CACL,IAAI,CAAA,GAAG,IAAI,KAAK,CAAC;YACf,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CACjC;KACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;mDAEoC,IAAI,CAAC,QAAQ;;YAEpD,aAAa;;oCAEW,IAAI,CAAC,gBAAgB;oDACL,IAAI,CAAC,SAAS;;YAEtD,cAAc;;;KAGrB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDT,CAAC;IACJ,CAAC;CACF,CAAA;AAvR6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAe;AAKd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAU;AAET;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAyB;AAE3C;IAAR,KAAK,EAAE;mDAAuB;AAbpB,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CA2RhC;SA3RY,oBAAoB","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      }\n      .facets-pagination button,\n      .facets-pagination i {\n        background: none;\n        border: 0;\n        cursor: pointer;\n        border-radius: 100%;\n        margin: 10px 5px;\n        padding: 5px;\n        font-size: 1.4rem;\n        vertical-align: middle;\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: black;\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';\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"]}

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

@@ -0,0 +1,41 @@
+import { LitElement, CSSResultGroup } from 'lit';
+export declare type Side = 'left' | 'right';
+export declare class ToggleSwitch extends LitElement {
+    /**
+     * The value this switch should have when toggled to the left.
+     */
+    leftValue: string;
+    /**
+     * The human-readable label to display on the left side of this switch.
+     * If none is provided, `leftValue` is used.
+     */
+    leftLabel?: string;
+    /**
+     * The value this switch should have when toggled to the right.
+     */
+    rightValue: string;
+    /**
+     * The human-readable label to display on the right side of this switch.
+     * If none is provided, `rightValue` is used.
+     */
+    rightLabel?: string;
+    /**
+     * Which side of the switch is selected (`'left'` or `'right'`).
+     */
+    side: Side;
+    private leftRadio;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * The currently selected value of this switch.
+     */
+    get value(): string;
+    /**
+     * The label for the currently selected value of this switch.
+     * Falls back to the current value if its label is not defined.
+     */
+    get selectedLabel(): string;
+    private handleClick;
+    private handleRadioChange;
+    private emitChangeEvent;
+    static get styles(): CSSResultGroup;
+}

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

@@ -0,0 +1,184 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let ToggleSwitch = class ToggleSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value this switch should have when toggled to the left.
+         */
+        this.leftValue = '';
+        /**
+         * The value this switch should have when toggled to the right.
+         */
+        this.rightValue = '';
+        /**
+         * Which side of the switch is selected (`'left'` or `'right'`).
+         */
+        this.side = 'left';
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div id="container">
+        <label for="switch-left">${(_a = this.leftLabel) !== null && _a !== void 0 ? _a : this.leftValue}</label>
+        <input
+          type="radio"
+          id="switch-left"
+          class="sr-only"
+          name="switch"
+          .value=${this.leftValue}
+          .checked=${this.side === 'left'}
+          @change=${this.handleRadioChange}
+        />
+        <input
+          type="radio"
+          id="switch-right"
+          class="sr-only"
+          name="switch"
+          .value=${this.rightValue}
+          .checked=${this.side === 'right'}
+          @change=${this.handleRadioChange}
+        />
+        <button
+          id="switch-button"
+          class=${this.side}
+          aria-hidden="true"
+          @click=${this.handleClick}
+        >
+          <div id="knob"></div>
+        </button>
+        <label for="switch-right">${(_b = this.rightLabel) !== null && _b !== void 0 ? _b : this.rightValue}</label>
+      </div>
+    `;
+    }
+    /**
+     * The currently selected value of this switch.
+     */
+    get value() {
+        return this.side === 'left' ? this.leftValue : this.rightValue;
+    }
+    /**
+     * The label for the currently selected value of this switch.
+     * Falls back to the current value if its label is not defined.
+     */
+    get selectedLabel() {
+        var _a, _b;
+        return this.side === 'left'
+            ? (_a = this.leftLabel) !== null && _a !== void 0 ? _a : this.leftValue
+            : (_b = this.rightLabel) !== null && _b !== void 0 ? _b : this.rightValue;
+    }
+    handleClick() {
+        this.side = this.side === 'left' ? 'right' : 'left';
+        this.emitChangeEvent();
+    }
+    handleRadioChange() {
+        this.side = this.leftRadio.checked ? 'left' : 'right';
+        this.emitChangeEvent();
+    }
+    emitChangeEvent() {
+        const event = new CustomEvent('change', {
+            detail: this.value,
+        });
+        this.dispatchEvent(event);
+    }
+    static get styles() {
+        const switchWidth = css `var(--switchWidth, 30px)`;
+        const switchHeight = css `var(--switchHeight, 14px)`;
+        const switchMarginLeft = css `var(--switchMarginLeft, 5px)`;
+        const switchMarginRight = css `var(--switchMarginRight, 5px)`;
+        const switchBorderWidth = css `var(--switchBorderWidth, 3px)`;
+        const switchBgColor = css `var(--switchBgColor, #194880)`;
+        const switchBorderColor = css `var(--switchBorderColor, #194880)`;
+        const labelFontSize = css `var(--labelFontSize, 1.3rem)`;
+        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);
+      }
+
+      #switch-button.right #knob {
+        transform: translateX(calc(${switchWidth} - ${switchHeight}));
+      }
+
+      #switch-button:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+      }
+
+      #knob {
+        display: block;
+        width: ${switchHeight};
+        height: ${switchHeight};
+        border-radius: 50%;
+        background: ${knobColor};
+        transition: transform ${knobTransitionDuration} ${knobTransitionFn};
+      }
+
+      .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;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #knob {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "leftValue", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "leftLabel", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "rightValue", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "rightLabel", void 0);
+__decorate([
+    property({ type: String, attribute: true })
+], ToggleSwitch.prototype, "side", void 0);
+__decorate([
+    query('#switch-left')
+], ToggleSwitch.prototype, "leftRadio", void 0);
+ToggleSwitch = __decorate([
+    customElement('toggle-switch')
+], ToggleSwitch);
+export { ToggleSwitch };
+//# sourceMappingURL=toggle-switch.js.map

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

@@ -0,0 +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"]}

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

@@ -1,81 +1,81 @@
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import type { Aggregation, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
-import '@internetarchive/histogram-date-range';
-import '@internetarchive/feature-feedback';
-import '@internetarchive/collection-name-cache';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { ModalManagerInterface } from '@internetarchive/modal-manager';
-import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
-import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import { FacetOption, SelectedFacets, FacetGroup } from './models';
-import './collection-facets/more-facets-content';
-import './collection-facets/facets-template';
-import './collection-facets/facet-tombstone-row';
-export declare class CollectionFacets extends LitElement {
-    searchService?: SearchServiceInterface;
-    searchType?: SearchType;
-    aggregations?: Record<string, Aggregation>;
-    fullYearsHistogramAggregation?: Aggregation;
-    minSelectedDate?: string;
-    maxSelectedDate?: string;
-    moreLinksVisible: boolean;
-    facetsLoading: boolean;
-    fullYearAggregationLoading: boolean;
-    selectedFacets?: SelectedFacets;
-    collapsableFacets: boolean;
-    showHistogramDatePicker: boolean;
-    query?: string;
-    filterMap?: FilterMap;
-    modalManager?: ModalManagerInterface;
-    resizeObserver?: SharedResizeObserverInterface;
-    featureFeedbackService?: FeatureFeedbackServiceInterface;
-    recaptchaManager?: RecaptchaManagerInterface;
-    analyticsHandler?: AnalyticsManagerInterface;
-    collectionNameCache?: CollectionNameCacheInterface;
-    /** Fires when a facet is clicked */
-    onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
-    openFacets: Record<FacetOption, boolean>;
-    /**
-     * Maximum # of facet buckets to render per facet group
-     */
-    private allowedFacetCount;
-    render(): TemplateResult<1>;
-    updated(changed: PropertyValues): void;
-    private dispatchFacetsChangedEvent;
-    private get currentYearsHistogramAggregation();
-    private get histogramTemplate();
-    private histogramDateRangeUpdated;
-    /**
-     * Combines the selected facets with the aggregations to create a single list of facets
-     */
-    private get mergedFacets();
-    /**
-     * Converts the selected facets to a `FacetGroup` array,
-     * which is easier to work with
-     */
-    private get selectedFacetGroups();
-    /**
-     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-     */
-    private get aggregationFacetGroups();
-    /**
-     * Generate the template for a facet group with a header and the collapsible
-     * chevron for the mobile view
-     */
-    private getFacetGroupTemplate;
-    private getTombstoneFacetGroupTemplate;
-    /**
-     * Generate the More... link button just below the facets group
-     *
-     * TODO: want to fire analytics?
-     */
-    private searchMoreFacetsLink;
-    showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
-    /**
-     * Generate the list template for each bucket in a facet group
-     */
-    private getFacetTemplate;
-    static get styles(): import("lit").CSSResult;
-}
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { Aggregation, FilterMap, SearchServiceInterface, SearchType } from '@internetarchive/search-service';
+import '@internetarchive/histogram-date-range';
+import '@internetarchive/feature-feedback';
+import '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import { ModalManagerInterface } from '@internetarchive/modal-manager';
+import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
+import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
+import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
+import { FacetOption, SelectedFacets, FacetGroup } from './models';
+import './collection-facets/more-facets-content';
+import './collection-facets/facets-template';
+import './collection-facets/facet-tombstone-row';
+export declare class CollectionFacets extends LitElement {
+    searchService?: SearchServiceInterface;
+    searchType?: SearchType;
+    aggregations?: Record<string, Aggregation>;
+    fullYearsHistogramAggregation?: Aggregation;
+    minSelectedDate?: string;
+    maxSelectedDate?: string;
+    moreLinksVisible: boolean;
+    facetsLoading: boolean;
+    fullYearAggregationLoading: boolean;
+    selectedFacets?: SelectedFacets;
+    collapsableFacets: boolean;
+    showHistogramDatePicker: boolean;
+    query?: string;
+    filterMap?: FilterMap;
+    modalManager?: ModalManagerInterface;
+    resizeObserver?: SharedResizeObserverInterface;
+    featureFeedbackService?: FeatureFeedbackServiceInterface;
+    recaptchaManager?: RecaptchaManagerInterface;
+    analyticsHandler?: AnalyticsManagerInterface;
+    collectionNameCache?: CollectionNameCacheInterface;
+    /** Fires when a facet is clicked */
+    onFacetClick?: (name: FacetOption, facetChecked: boolean, negative: boolean) => void;
+    openFacets: Record<FacetOption, boolean>;
+    /**
+     * Maximum # of facet buckets to render per facet group
+     */
+    private allowedFacetCount;
+    render(): TemplateResult<1>;
+    updated(changed: PropertyValues): void;
+    private dispatchFacetsChangedEvent;
+    private get currentYearsHistogramAggregation();
+    private get histogramTemplate();
+    private histogramDateRangeUpdated;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    private get selectedFacetGroups();
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    private get aggregationFacetGroups();
+    /**
+     * Generate the template for a facet group with a header and the collapsible
+     * chevron for the mobile view
+     */
+    private getFacetGroupTemplate;
+    private getTombstoneFacetGroupTemplate;
+    /**
+     * Generate the More... link button just below the facets group
+     *
+     * TODO: want to fire analytics?
+     */
+    private searchMoreFacetsLink;
+    showMoreFacetsModal(facetGroup: FacetGroup, sortedBy: string): Promise<void>;
+    /**
+     * Generate the list template for each bucket in a facet group
+     */
+    private getFacetTemplate;
+    static get styles(): import("lit").CSSResult;
+}