@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/cjs/wm-pagination.cjs.entry.js

@@ -3,188 +3,188 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-53aff314.js');
+const functions = require('./functions-d2d99997.js');
 
 const wmPaginationCss = "nav .largescreen,nav .smallscreen{margin-bottom:0.625rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:flex-end;-ms-flex-pack:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;font-size:0.875rem}nav .largescreen .pageview,nav .smallscreen .pageview{font-size:0.875rem;margin:0 0.625rem}nav .largescreen .paginationbtn,nav .smallscreen .paginationbtn{position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none;border:none;color:#575195;background-color:transparent;margin:0;padding:0;height:2.5rem;width:2.5rem;font-family:inherit;letter-spacing:0.3px;font-size:0.875rem;font-weight:500;cursor:pointer;text-transform:none}nav .largescreen .paginationbtn svg *,nav .smallscreen .paginationbtn svg *{fill:#565397}nav .largescreen .paginationbtn:hover:not([aria-current=page]):not([disabled]),nav .smallscreen .paginationbtn:hover:not([aria-current=page]):not([disabled]){text-decoration:underline}nav .largescreen .paginationbtn:focus,nav .smallscreen .paginationbtn:focus{outline:none}nav .largescreen .paginationbtn::-moz-focus-inner,nav .smallscreen .paginationbtn::-moz-focus-inner{border:0;outline:none}nav .largescreen .paginationbtn[disabled],nav .smallscreen .paginationbtn[disabled]{color:#9f9f9f;pointer-events:none}nav .largescreen .paginationbtn[disabled] svg *,nav .smallscreen .paginationbtn[disabled] svg *{fill:#9f9f9f}nav .largescreen .previousbtn,nav .smallscreen .previousbtn{margin-right:0.625rem;width:auto !important}nav .largescreen .nextbtn,nav .smallscreen .nextbtn{margin-left:0.625rem;margin-right:0;width:auto !important}nav .largescreen .previousbtn,nav .largescreen .nextbtn,nav .smallscreen .previousbtn,nav .smallscreen .nextbtn{-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none}nav .largescreen .ellipsis,nav .smallscreen .ellipsis{display:inline-block;width:2.5rem;text-align:center}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]),nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]):before{position:absolute;content:\"\";height:auto;width:16px;top:0;bottom:0;left:12px;right:0;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 2px;background-position:0 2em;border-radius:0;line-height:normal}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before,nav .smallscreen .pagebtncontainer.user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{left:0 !important}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}nav .largescreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner,nav .smallscreen .pagebtncontainer.user-is-tabbing [aria-current=page]:focus::-moz-focus-inner{border:0}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).previousbtn:focus:before{width:56px !important}nav .largescreen .user-is-tabbing :focus:not(.-disabled):not([aria-current=page]).nextbtn:focus:before{width:32px !important}nav .largescreen .paginationbtn[aria-current=page]{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background-color:#575195;color:#fff}nav .largescreen .paginationbtn[aria-current=page]:hover{-webkit-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);background:#4e4986}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
-const Pagination = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmPaginationPageClicked = index.createEvent(this, "wmPaginationPageClicked", 7);
-    this.pageClicked = index.createEvent(this, "pageClicked", 7);
-    this.focusCurrentPage = index.createEvent(this, "focusCurrentPage", 7);
-    this.totalPages = 0;
-    this.debouncedResize = functions.debounce(() => {
-      this.isLargeViewport = window.innerWidth > 600;
-    }, 250);
-    this.getMiddlePageNums = () => {
-      let coreBtns;
-      // if pg is 1, 2 or 3
-      if (this.currentPage < 4) {
-        coreBtns = [2, 3, 4];
-      }
-      else if (this.currentPage > this.totalPages - 3) {
-        coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];
-      }
-      else {
-        coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
-      }
-      return coreBtns;
-    };
-    this.currentPage = 1;
-    this.totalItems = undefined;
-    this.itemsPerPage = undefined;
-    this.value = 1;
-    this.isLargeViewport = window.innerWidth > 600;
-    this.isTabbing = false;
-    this.srAnnouncement = "";
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  maintainFocusOnNumberChange(el) {
-    window.requestAnimationFrame(() => {
-      switch (el) {
-        case "previous":
-          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.
-          break;
-        case "next":
-          this.currentPage === this.totalPages &&
-            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.
-          break;
-        case "prev-arrow":
-          this.currentPage === 1 && this.el.shadowRoot.querySelector("#next-arw").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.
-          break;
-        case "next-arrow":
-          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector("#previous-arw").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.
-          break;
-        case "page":
-          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();
-        default:
-          return;
-      }
-    });
-  }
-  handleResize() {
-    this.debouncedResize();
-  }
-  calculateTotalPages() {
-    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
-  }
-  componentWillLoad() {
-    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {
-      throw new Error("Please check the required attributes");
-    }
-    this.calculateTotalPages();
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    this.el.focus = () => {
-      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state
-      if (this.isLargeViewport) {
-        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();
-      }
-      else {
-        this.currentPage === 1
-          ? this.el.shadowRoot.getElementById("next-arw").focus()
-          : this.el.shadowRoot.getElementById("wm-1-arw").focus();
-      }
-    };
-  }
-  updatePageDisplayed(pageNum) {
-    this.value = pageNum;
-    this.wmPaginationPageClicked.emit();
-    this.pageClicked.emit(); // deprecated
-    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
-  }
-  displayShortPagination() {
-    let pages = [];
-    for (let i = 1; i <= this.totalPages; i++) {
-      pages.push(this.displayPageNumber(i));
-    }
-    return pages;
-  }
-  displayLongPagination() {
-    let view = [
-      this.displayPageNumber(1),
-      this.currentPage > 3 && this.displayEllipsis(),
-      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),
-      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),
-      this.displayPageNumber(this.totalPages),
-    ];
-    return view;
-  }
-  displayPageNumber(pageNum) {
-    return (index.h("button", { id: `wm-${pageNum}`, class: "paginationbtn", onClick: () => {
-        this.currentPage = pageNum;
-        this.updatePageDisplayed(pageNum);
-        this.maintainFocusOnNumberChange("page");
-      }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
-  }
-  displayEllipsis() {
-    return index.h("span", { class: "ellipsis" }, "...");
-  }
-  // displayPageView = () => {
-  //   // let end = this.itemsPerPage! * this.currentPage;
-  //   // const begin = end - this.itemsPerPage! + 1;
-  //   // if (end > this.totalItems!) {
-  //   //   end = this.totalItems!;
-  //   // }
-  //   return <div class="pageview">{this.getCurrentView()}</div>;
-  // };
-  getCurrentPagesInView() {
-    let end = this.itemsPerPage * this.currentPage;
-    const begin = end - this.itemsPerPage + 1;
-    if (end > this.totalItems) {
-      end = this.totalItems;
-    }
-    return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
-  }
-  renderLarge() {
-    return (index.h("div", { class: "largescreen" }, index.h("div", { class: "pageview" }, this.getCurrentPagesInView()), index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
-        this.currentPage = this.currentPage - 1;
-        this.updatePageDisplayed(this.currentPage);
-        this.maintainFocusOnNumberChange("previous");
-      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), index.h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
-        this.currentPage = this.currentPage + 1;
-        this.updatePageDisplayed(this.currentPage);
-        this.maintainFocusOnNumberChange("next");
-      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
-  }
-  renderSmall() {
-    return (index.h("div", { class: "smallscreen" }, index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: `wm-1-arw`, class: "paginationbtn", onClick: () => {
-        this.currentPage = 1;
-        this.updatePageDisplayed(1);
-        this.maintainFocusOnNumberChange("prev-arrow");
-      }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, index.h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), index.h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
-        this.currentPage -= 1;
-        this.updatePageDisplayed(this.currentPage);
-        this.maintainFocusOnNumberChange("prev-arrow");
-      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, index.h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
-        this.currentPage += 1;
-        this.updatePageDisplayed(this.currentPage);
-        this.maintainFocusOnNumberChange("next-arrow");
-      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), index.h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
-        this.currentPage = this.totalPages;
-        this.updatePageDisplayed(this.totalPages);
-        this.maintainFocusOnNumberChange("next-arrow");
-      }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, index.h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
-  }
-  render() {
-    return (
-    // do not render the component if there's only one page
-    this.totalItems > this.itemsPerPage && (index.h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeViewport ? this.renderLarge() : this.renderSmall(), index.h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "totalItems": ["calculateTotalPages"],
-    "itemsPerPage": ["calculateTotalPages"]
-  }; }
-};
+const Pagination = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmPaginationPageClicked = index.createEvent(this, "wmPaginationPageClicked", 7);
+    this.pageClicked = index.createEvent(this, "pageClicked", 7);
+    this.focusCurrentPage = index.createEvent(this, "focusCurrentPage", 7);
+    this.totalPages = 0;
+    this.debouncedResize = functions.debounce(() => {
+      this.isLargeViewport = window.innerWidth > 600;
+    }, 250);
+    this.getMiddlePageNums = () => {
+      let coreBtns;
+      // if pg is 1, 2 or 3
+      if (this.currentPage < 4) {
+        coreBtns = [2, 3, 4];
+      }
+      else if (this.currentPage > this.totalPages - 3) {
+        coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];
+      }
+      else {
+        coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
+      }
+      return coreBtns;
+    };
+    this.currentPage = 1;
+    this.totalItems = undefined;
+    this.itemsPerPage = undefined;
+    this.value = 1;
+    this.isLargeViewport = window.innerWidth > 600;
+    this.isTabbing = false;
+    this.srAnnouncement = "";
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  maintainFocusOnNumberChange(el) {
+    window.requestAnimationFrame(() => {
+      switch (el) {
+        case "previous":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.
+          break;
+        case "next":
+          this.currentPage === this.totalPages &&
+            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.
+          break;
+        case "prev-arrow":
+          this.currentPage === 1 && this.el.shadowRoot.querySelector("#next-arw").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.
+          break;
+        case "next-arrow":
+          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector("#previous-arw").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.
+          break;
+        case "page":
+          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();
+        default:
+          return;
+      }
+    });
+  }
+  handleResize() {
+    this.debouncedResize();
+  }
+  calculateTotalPages() {
+    this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
+  }
+  componentWillLoad() {
+    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {
+      throw new Error("Please check the required attributes");
+    }
+    this.calculateTotalPages();
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
+    }
+    this.el.focus = () => {
+      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state
+      if (this.isLargeViewport) {
+        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();
+      }
+      else {
+        this.currentPage === 1
+          ? this.el.shadowRoot.getElementById("next-arw").focus()
+          : this.el.shadowRoot.getElementById("wm-1-arw").focus();
+      }
+    };
+  }
+  updatePageDisplayed(pageNum) {
+    this.value = pageNum;
+    this.wmPaginationPageClicked.emit();
+    this.pageClicked.emit(); // deprecated
+    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+  }
+  displayShortPagination() {
+    let pages = [];
+    for (let i = 1; i <= this.totalPages; i++) {
+      pages.push(this.displayPageNumber(i));
+    }
+    return pages;
+  }
+  displayLongPagination() {
+    let view = [
+      this.displayPageNumber(1),
+      this.currentPage > 3 && this.displayEllipsis(),
+      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),
+      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),
+      this.displayPageNumber(this.totalPages),
+    ];
+    return view;
+  }
+  displayPageNumber(pageNum) {
+    return (index.h("button", { id: `wm-${pageNum}`, class: "paginationbtn", onClick: () => {
+        this.currentPage = pageNum;
+        this.updatePageDisplayed(pageNum);
+        this.maintainFocusOnNumberChange("page");
+      }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+  }
+  displayEllipsis() {
+    return index.h("span", { class: "ellipsis" }, "...");
+  }
+  // displayPageView = () => {
+  //   // let end = this.itemsPerPage! * this.currentPage;
+  //   // const begin = end - this.itemsPerPage! + 1;
+  //   // if (end > this.totalItems!) {
+  //   //   end = this.totalItems!;
+  //   // }
+  //   return <div class="pageview">{this.getCurrentView()}</div>;
+  // };
+  getCurrentPagesInView() {
+    let end = this.itemsPerPage * this.currentPage;
+    const begin = end - this.itemsPerPage + 1;
+    if (end > this.totalItems) {
+      end = this.totalItems;
+    }
+    return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+  }
+  renderLarge() {
+    return (index.h("div", { class: "largescreen" }, index.h("div", { class: "pageview" }, this.getCurrentPagesInView()), index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
+        this.currentPage = this.currentPage - 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("previous");
+      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), index.h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+        this.currentPage = this.currentPage + 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("next");
+      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+  }
+  renderSmall() {
+    return (index.h("div", { class: "smallscreen" }, index.h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, index.h("button", { id: `wm-1-arw`, class: "paginationbtn", onClick: () => {
+        this.currentPage = 1;
+        this.updatePageDisplayed(1);
+        this.maintainFocusOnNumberChange("prev-arrow");
+      }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, index.h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), index.h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+        this.currentPage -= 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("prev-arrow");
+      }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, index.h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+        this.currentPage += 1;
+        this.updatePageDisplayed(this.currentPage);
+        this.maintainFocusOnNumberChange("next-arrow");
+      }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, index.h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), index.h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+        this.currentPage = this.totalPages;
+        this.updatePageDisplayed(this.totalPages);
+        this.maintainFocusOnNumberChange("next-arrow");
+      }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, index.h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+  }
+  render() {
+    return (
+    // do not render the component if there's only one page
+    this.totalItems > this.itemsPerPage && (index.h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeViewport ? this.renderLarge() : this.renderSmall(), index.h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "totalItems": ["calculateTotalPages"],
+    "itemsPerPage": ["calculateTotalPages"]
+  }; }
+};
 Pagination.style = wmPaginationCss;
 
 exports.wm_pagination = Pagination;

package/dist/cjs/wm-pagination.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-pagination.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,g0KAAg0K;;MCQ30K,UAAU;;;;;;IAWb,eAAU,GAAW,CAAC,CAAC;IAwC/B,oBAAe,GAAGA,kBAAQ,CAAC;MACzB,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;KAChD,EAAE,GAAG,CAAC,CAAC;IAqFR,sBAAiB,GAAG;MAClB,IAAI,QAAQ,CAAC;;MAEb,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;QACxB,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;OACtB;WAAM,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;QACjD,QAAQ,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;OAC5E;WAAM;QACL,QAAQ,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;OAC3E;MACD,OAAO,QAAQ,CAAC;KACjB,CAAC;uBAlJ4B,CAAC;sBACD,SAAS;wBACP,SAAS;iBACzB,CAAC;2BACkB,MAAM,CAAC,UAAU,GAAG,GAAG;qBAC5B,KAAK;0BACD,EAAE;;EASpC,eAAe;IACb,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAGD,gBAAgB;IACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;GACxB;EAED,2BAA2B,CAAC,EAA8D;IACxF,MAAM,CAAC,qBAAqB,CAAC;MAC3B,QAAQ,EAAE;QACR,KAAK,UAAU;UACb,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;UAClF,MAAM;QACR,KAAK,MAAM;UACT,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU;YAClC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;UAC3E,MAAM;QACR,KAAK,YAAY;UACf,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC;UAChF,MAAM;QACR,KAAK,YAAY;UACf,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;UAClG,MAAM;QACR,KAAK,MAAM;UACT,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;QAC5E;UACE,OAAO;OACV;KACF,CAAC,CAAC;GACJ;EAOD,YAAY;IACV,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAID,mBAAmB;IACjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAW,GAAG,IAAI,CAAC,YAAa,CAAC,CAAC;GACpE;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC/D,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAE3B,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE;MAC5D,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG;;MAEd,IAAI,IAAI,CAAC,eAAe,EAAE;QACxB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;OACrE;WAAM;QACL,IAAI,CAAC,WAAW,KAAK,CAAC;YAClB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE;YACrD,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;OAC3D;KACF,CAAC;GACH;EAED,mBAAmB,CAAC,OAAY;IAC9B,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IACrB,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IACxB,IAAI,CAAC,cAAc,GAAG,iBAAiB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,qBAAqB,EAAE,EAAE,CAAC;GAC5F;EAED,sBAAsB;IACpB,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;MACzC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;KACvC;IACD,OAAO,KAAK,CAAC;GACd;EAED,qBAAqB;IACnB,IAAI,IAAI,GAAG;MACT,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;MACzB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE;MAC9C,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;MACvE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,EAAE;MAChE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC;KACxC,CAAC;IACF,OAAO,IAAI,CAAC;GACb;EAED,iBAAiB,CAAC,OAAe;IAC/B,QACEC,oBACE,EAAE,EAAE,MAAM,OAAO,EAAE,EACnB,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC3B,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QAClC,IAAI,CAAC,2BAA2B,CAAC,MAAM,CAAC,CAAC;OAC1C,EACD,KAAK,EAAE,OAAO,gBACF,IAAI,CAAC,WAAW,KAAK,OAAO,GAAG,cAAc,OAAO,EAAE,GAAG,EAAE,kBACzD,IAAI,CAAC,WAAW,KAAK,OAAO,GAAG,MAAM,GAAG,SAAS,IAE9D,OAAO,CACD,EACT;GACH;EAED,eAAe;IACb,OAAOA,kBAAM,KAAK,EAAC,UAAU,UAAW,CAAC;GAC1C;;;;;;;;;EAwBD,qBAAqB;IACnB,IAAI,GAAG,GAAG,IAAI,CAAC,YAAa,GAAG,IAAI,CAAC,WAAW,CAAC;IAChD,MAAM,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,YAAa,GAAG,CAAC,CAAC;IAC3C,IAAI,GAAG,GAAG,IAAI,CAAC,UAAW,EAAE;MAC1B,GAAG,GAAG,IAAI,CAAC,UAAW,CAAC;KACxB;IACD,OAAO,UAAU,IAAI,KAAK,KAAK,GAAG,GAAG,GAAG,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,GAAG,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;GAC5F;EAED,WAAW;IACT,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,qBAAqB,EAAE,CAAO,EAC1DA,iBAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAE,IACvEA,oBACE,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,IAAI,CAAC,2BAA2B,CAAC,UAAU,CAAC,CAAC;OAC9C,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,gBACrB,qBAAqB,mBAClB,QAAQ,eAGf,EACR,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,sBAAsB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EACnFA,oBACE,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,IAAI,CAAC,2BAA2B,CAAC,MAAM,CAAC,CAAC;OAC1C,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,gBACnC,iBAAiB,mBACd,QAAQ,WAGf,CACL,CACF,EACN;GACH;EAED,WAAW;IACT,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAE,oBAAoB,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAE,IACvEA,oBACE,EAAE,EAAE,UAAU,EACd,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,CAAC,2BAA2B,CAAC,YAAY,CAAC,CAAC;OAChD,EACD,KAAK,EAAE,CAAC,kBACM,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,MAAM,GAAG,SAAS,gBAC7C,cAAc,mBACZ,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,IAEhCA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,IAC5DA,kBAAM,CAAC,EAAC,uFAAuF,GAAG,CAC9F,CACC,EACTA,oBACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,IAAI,CAAC,2BAA2B,CAAC,YAAY,CAAC,CAAC;OAChD,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,CAAC,gBACrB,qBAAqB,IAEhCA,iBAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,IAC3DA,kBAAM,CAAC,EAAC,2CAA2C,GAAG,CAClD,CACC,WACH,IAAI,CAAC,WAAW,UAAM,IAAI,CAAC,UAAU,EAC3CA,oBACE,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,IAAI,CAAC,2BAA2B,CAAC,YAAY,CAAC,CAAC;OAChD,EACD,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,gBACnC,iBAAiB,IAE5BA,iBAAK,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,IAC3DA,kBAAM,CAAC,EAAC,yCAAyC,GAAG,CAChD,CACC,EACTA,oBACE,EAAE,EAAE,MAAM,IAAI,CAAC,UAAU,MAAM,EAC/B,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,2BAA2B,CAAC,YAAY,CAAC,CAAC;OAChD,EACD,KAAK,EAAE,IAAI,CAAC,UAAU,kBACR,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,SAAS,gBAC3D,yBAAyB,IAAI,CAAC,UAAU,EAAE,mBACxC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,UAAU,IAE9CA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,4BAA4B,IAC5DA,kBAAM,CAAC,EAAC,oFAAoF,GAAG,CAC3F,CACC,CACL,CACF,EACN;GACH;EAED,MAAM;IACJ;;IAEE,IAAI,CAAC,UAAW,GAAG,IAAI,CAAC,YAAa,KACnCA,+BAAiB,0BAA0B,IAAI,CAAC,qBAAqB,EAAE,mBAAmB,IAAI,CAAC,WAAW,GAAG,IAE1G,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAE/DA,iBAAK,EAAE,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,eAAW,QAAQ,mBAAe,MAAM,iBAAa,MAAM,IACxF,IAAI,CAAC,cAAc,CAChB,CACF,CACP,EACD;GACH;;;;;;;;;;;;","names":["debounce","h"],"sources":["./src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","./src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\r\nnav .smallscreen {\r\n  margin-bottom: rem-calc(10);\r\n  @include displayFlex();\r\n  @include alignItems(center);\r\n  @include justifyContent(flex-end);\r\n  @include type-level-4;\r\n\r\n  .pageview {\r\n    @include type-level-4;\r\n    margin: rem-calc(0 10);\r\n  }\r\n\r\n  .paginationbtn {\r\n    position: relative;\r\n    @include box-shadow(none); // fix for Edge\r\n    @include transition(none);\r\n    border: none;\r\n    color: $button-default-text;\r\n    background-color: transparent;\r\n    margin: 0;\r\n    padding: 0;\r\n    height: rem-calc(40);\r\n    width: rem-calc(40);\r\n    font-family: inherit;\r\n    letter-spacing: 0.3px;\r\n    font-size: rem-calc(14);\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    text-transform: none; //For Edge\r\n\r\n    svg * {\r\n      fill: #565397;\r\n    }\r\n\r\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &::-moz-focus-inner {\r\n      border: 0;\r\n      outline: none;\r\n    }\r\n\r\n    &[disabled] {\r\n      color: #9f9f9f;\r\n      pointer-events: none;\r\n      svg * {\r\n        fill: #9f9f9f;\r\n      }\r\n    }\r\n  }\r\n\r\n  .previousbtn {\r\n    margin-right: rem-calc(10);\r\n    width: auto !important;\r\n  }\r\n\r\n  .nextbtn {\r\n    margin-left: rem-calc(10);\r\n    margin-right: 0;\r\n    width: auto !important;\r\n  }\r\n\r\n  .previousbtn,\r\n  .nextbtn {\r\n    @include transition(none);\r\n  }\r\n\r\n  .ellipsis {\r\n    display: inline-block;\r\n    width: rem-calc(40);\r\n    text-align: center;\r\n  }\r\n\r\n  .pagebtncontainer {\r\n    &.user-is-tabbing {\r\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n        @include box-shadow(none); // fix for Edge\r\n\r\n        &:before {\r\n          position: absolute;\r\n          content: \"\";\r\n          height: auto;\r\n          width: 16px;\r\n          top: 0;\r\n          bottom: 0;\r\n          left: 12px;\r\n          right: 0;\r\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n          background-size: 6px 2px;\r\n          background-position: 0 2em;\r\n          border-radius: 0;\r\n          line-height: normal;\r\n        }\r\n\r\n        &.previousbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n\r\n        &.nextbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n      }\r\n\r\n      [aria-current=\"page\"]:focus {\r\n        @include focus-style;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nnav .largescreen {\r\n  & .user-is-tabbing {\r\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n      // to make focus indicator as wide as text \"previous\" and \"next\"\r\n      &.previousbtn:focus:before {\r\n        width: 56px !important;\r\n      }\r\n      &.nextbtn:focus:before {\r\n        width: 32px !important;\r\n      }\r\n    }\r\n  }\r\n  .paginationbtn {\r\n    &[aria-current=\"page\"] {\r\n      @include border-radius(50%);\r\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n      background-color: $button-primary-background;\r\n      color: $button-primary-text;\r\n\r\n      &:hover {\r\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n        background: mix(black, $button-primary-background, 10%);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\r\nimport { debounce } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-pagination\",\r\n  styleUrl: \"wm-pagination.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Pagination {\r\n  @Element() el!: any;\r\n\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalItems?: number = undefined;\r\n  @Prop() itemsPerPage?: number = undefined;\r\n  @Prop() value = 1;\r\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\r\n  @State() isTabbing: boolean = false;\r\n  @State() srAnnouncement: string = \"\";\r\n\r\n  private totalPages: number = 0;\r\n\r\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\r\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\r\n  @Event() focusCurrentPage!: EventEmitter;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\r\n    window.requestAnimationFrame(() => {\r\n      switch (el) {\r\n        case \"previous\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\r\n          break;\r\n        case \"next\":\r\n          this.currentPage === this.totalPages &&\r\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\r\n          break;\r\n        case \"prev-arrow\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\r\n          break;\r\n        case \"next-arrow\":\r\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\r\n          break;\r\n        case \"page\":\r\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\r\n        default:\r\n          return;\r\n      }\r\n    });\r\n  }\r\n\r\n  debouncedResize = debounce(() => {\r\n    this.isLargeViewport = window.innerWidth > 600;\r\n  }, 250);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleResize() {\r\n    this.debouncedResize();\r\n  }\r\n\r\n  @Watch(\"totalItems\")\r\n  @Watch(\"itemsPerPage\")\r\n  calculateTotalPages() {\r\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\r\n      throw new Error(\"Please check the required attributes\");\r\n    }\r\n\r\n    this.calculateTotalPages();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\r\n      if (this.isLargeViewport) {\r\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\r\n      } else {\r\n        this.currentPage === 1\r\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\r\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\r\n      }\r\n    };\r\n  }\r\n\r\n  updatePageDisplayed(pageNum: any) {\r\n    this.value = pageNum;\r\n    this.wmPaginationPageClicked.emit();\r\n    this.pageClicked.emit(); // deprecated\r\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\r\n  }\r\n\r\n  displayShortPagination() {\r\n    let pages = [];\r\n    for (let i = 1; i <= this.totalPages; i++) {\r\n      pages.push(this.displayPageNumber(i));\r\n    }\r\n    return pages;\r\n  }\r\n\r\n  displayLongPagination() {\r\n    let view = [\r\n      this.displayPageNumber(1),\r\n      this.currentPage > 3 && this.displayEllipsis(),\r\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\r\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\r\n      this.displayPageNumber(this.totalPages),\r\n    ];\r\n    return view;\r\n  }\r\n\r\n  displayPageNumber(pageNum: number) {\r\n    return (\r\n      <button\r\n        id={`wm-${pageNum}`}\r\n        class=\"paginationbtn\"\r\n        onClick={() => {\r\n          this.currentPage = pageNum;\r\n          this.updatePageDisplayed(pageNum);\r\n          this.maintainFocusOnNumberChange(\"page\");\r\n        }}\r\n        value={pageNum}\r\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\r\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\r\n      >\r\n        {pageNum}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  displayEllipsis() {\r\n    return <span class=\"ellipsis\">...</span>;\r\n  }\r\n\r\n  getMiddlePageNums = () => {\r\n    let coreBtns;\r\n    // if pg is 1, 2 or 3\r\n    if (this.currentPage < 4) {\r\n      coreBtns = [2, 3, 4];\r\n    } else if (this.currentPage > this.totalPages - 3) {\r\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\r\n    } else {\r\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\r\n    }\r\n    return coreBtns;\r\n  };\r\n\r\n  // displayPageView = () => {\r\n  //   // let end = this.itemsPerPage! * this.currentPage;\r\n  //   // const begin = end - this.itemsPerPage! + 1;\r\n  //   // if (end > this.totalItems!) {\r\n  //   //   end = this.totalItems!;\r\n  //   // }\r\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\r\n  // };\r\n\r\n  getCurrentPagesInView() {\r\n    let end = this.itemsPerPage! * this.currentPage;\r\n    const begin = end - this.itemsPerPage! + 1;\r\n    if (end > this.totalItems!) {\r\n      end = this.totalItems!;\r\n    }\r\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\r\n  }\r\n\r\n  renderLarge() {\r\n    return (\r\n      <div class=\"largescreen\">\r\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id=\"previous\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage - 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"previous\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Previous\r\n          </button>\r\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\r\n          <button\r\n            id=\"next\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage + 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Next\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderSmall() {\r\n    return (\r\n      <div class=\"smallscreen\">\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id={`wm-1-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = 1;\r\n              this.updatePageDisplayed(1);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            value={1}\r\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\r\n            aria-label={`Go to page 1`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === 1}\r\n          >\r\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id=\"previous-arw\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage -= 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          Page {this.currentPage} of {this.totalPages}\r\n          <button\r\n            id=\"next-arw\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage += 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id={`wm-${this.totalPages}-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.totalPages;\r\n              this.updatePageDisplayed(this.totalPages);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            value={this.totalPages}\r\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\r\n            aria-label={`Go to last page, page ${this.totalPages}`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === this.totalPages}\r\n          >\r\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // do not render the component if there's only one page\r\n      this.totalItems! > this.itemsPerPage! && (\r\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\r\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\r\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\r\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\r\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\r\n            {this.srAnnouncement}\r\n          </div>\r\n        </nav>\r\n      )\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"wm-pagination.entry.cjs.js","mappings":"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","names":["debounce","h"],"sources":["./src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","./src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\nnav .smallscreen {\n  margin-bottom: rem-calc(10);\n  @include displayFlex();\n  @include alignItems(center);\n  @include justifyContent(flex-end);\n  @include type-level-4;\n\n  .pageview {\n    @include type-level-4;\n    margin: rem-calc(0 10);\n  }\n\n  .paginationbtn {\n    position: relative;\n    @include box-shadow(none); // fix for Edge\n    @include transition(none);\n    border: none;\n    color: $button-default-text;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    height: rem-calc(40);\n    width: rem-calc(40);\n    font-family: inherit;\n    letter-spacing: 0.3px;\n    font-size: rem-calc(14);\n    font-weight: 500;\n    cursor: pointer;\n    text-transform: none; //For Edge\n\n    svg * {\n      fill: #565397;\n    }\n\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      outline: none;\n    }\n\n    &[disabled] {\n      color: #9f9f9f;\n      pointer-events: none;\n      svg * {\n        fill: #9f9f9f;\n      }\n    }\n  }\n\n  .previousbtn {\n    margin-right: rem-calc(10);\n    width: auto !important;\n  }\n\n  .nextbtn {\n    margin-left: rem-calc(10);\n    margin-right: 0;\n    width: auto !important;\n  }\n\n  .previousbtn,\n  .nextbtn {\n    @include transition(none);\n  }\n\n  .ellipsis {\n    display: inline-block;\n    width: rem-calc(40);\n    text-align: center;\n  }\n\n  .pagebtncontainer {\n    &.user-is-tabbing {\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\n        @include box-shadow(none); // fix for Edge\n\n        &:before {\n          position: absolute;\n          content: \"\";\n          height: auto;\n          width: 16px;\n          top: 0;\n          bottom: 0;\n          left: 12px;\n          right: 0;\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n          background-size: 6px 2px;\n          background-position: 0 2em;\n          border-radius: 0;\n          line-height: normal;\n        }\n\n        &.previousbtn:focus:before {\n          left: 0 !important;\n        }\n\n        &.nextbtn:focus:before {\n          left: 0 !important;\n        }\n      }\n\n      [aria-current=\"page\"]:focus {\n        @include focus-style;\n      }\n    }\n  }\n}\n\nnav .largescreen {\n  & .user-is-tabbing {\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\n      // to make focus indicator as wide as text \"previous\" and \"next\"\n      &.previousbtn:focus:before {\n        width: 56px !important;\n      }\n      &.nextbtn:focus:before {\n        width: 32px !important;\n      }\n    }\n  }\n  .paginationbtn {\n    &[aria-current=\"page\"] {\n      @include border-radius(50%);\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\n      background-color: $button-primary-background;\n      color: $button-primary-text;\n\n      &:hover {\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\n        background: mix(black, $button-primary-background, 10%);\n      }\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\nimport { debounce } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-pagination\",\n  styleUrl: \"wm-pagination.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Pagination {\n  @Element() el!: any;\n\n  @Prop() currentPage: number = 1;\n  @Prop() totalItems?: number = undefined;\n  @Prop() itemsPerPage?: number = undefined;\n  @Prop() value = 1;\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\n  @State() isTabbing: boolean = false;\n  @State() srAnnouncement: string = \"\";\n\n  private totalPages: number = 0;\n\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\n  @Event() focusCurrentPage!: EventEmitter;\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\n    window.requestAnimationFrame(() => {\n      switch (el) {\n        case \"previous\":\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\n          break;\n        case \"next\":\n          this.currentPage === this.totalPages &&\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\n          break;\n        case \"prev-arrow\":\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\n          break;\n        case \"next-arrow\":\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\n          break;\n        case \"page\":\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\n        default:\n          return;\n      }\n    });\n  }\n\n  debouncedResize = debounce(() => {\n    this.isLargeViewport = window.innerWidth > 600;\n  }, 250);\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    this.debouncedResize();\n  }\n\n  @Watch(\"totalItems\")\n  @Watch(\"itemsPerPage\")\n  calculateTotalPages() {\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\n  }\n\n  componentWillLoad() {\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\n      throw new Error(\"Please check the required attributes\");\n    }\n\n    this.calculateTotalPages();\n\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\n      if (this.isLargeViewport) {\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\n      } else {\n        this.currentPage === 1\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\n      }\n    };\n  }\n\n  updatePageDisplayed(pageNum: any) {\n    this.value = pageNum;\n    this.wmPaginationPageClicked.emit();\n    this.pageClicked.emit(); // deprecated\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\n  }\n\n  displayShortPagination() {\n    let pages = [];\n    for (let i = 1; i <= this.totalPages; i++) {\n      pages.push(this.displayPageNumber(i));\n    }\n    return pages;\n  }\n\n  displayLongPagination() {\n    let view = [\n      this.displayPageNumber(1),\n      this.currentPage > 3 && this.displayEllipsis(),\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\n      this.displayPageNumber(this.totalPages),\n    ];\n    return view;\n  }\n\n  displayPageNumber(pageNum: number) {\n    return (\n      <button\n        id={`wm-${pageNum}`}\n        class=\"paginationbtn\"\n        onClick={() => {\n          this.currentPage = pageNum;\n          this.updatePageDisplayed(pageNum);\n          this.maintainFocusOnNumberChange(\"page\");\n        }}\n        value={pageNum}\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\n      >\n        {pageNum}\n      </button>\n    );\n  }\n\n  displayEllipsis() {\n    return <span class=\"ellipsis\">...</span>;\n  }\n\n  getMiddlePageNums = () => {\n    let coreBtns;\n    // if pg is 1, 2 or 3\n    if (this.currentPage < 4) {\n      coreBtns = [2, 3, 4];\n    } else if (this.currentPage > this.totalPages - 3) {\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\n    } else {\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\n    }\n    return coreBtns;\n  };\n\n  // displayPageView = () => {\n  //   // let end = this.itemsPerPage! * this.currentPage;\n  //   // const begin = end - this.itemsPerPage! + 1;\n  //   // if (end > this.totalItems!) {\n  //   //   end = this.totalItems!;\n  //   // }\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\n  // };\n\n  getCurrentPagesInView() {\n    let end = this.itemsPerPage! * this.currentPage;\n    const begin = end - this.itemsPerPage! + 1;\n    if (end > this.totalItems!) {\n      end = this.totalItems!;\n    }\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\n  }\n\n  renderLarge() {\n    return (\n      <div class=\"largescreen\">\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n          <button\n            id=\"previous\"\n            class=\"paginationbtn previousbtn\"\n            onClick={() => {\n              this.currentPage = this.currentPage - 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"previous\");\n            }}\n            disabled={this.currentPage === 1}\n            aria-label=\"Go to previous page\"\n            aria-controls=\"status\"\n          >\n            Previous\n          </button>\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\n          <button\n            id=\"next\"\n            class=\"paginationbtn nextbtn\"\n            onClick={() => {\n              this.currentPage = this.currentPage + 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"next\");\n            }}\n            disabled={this.currentPage === this.totalPages}\n            aria-label=\"Go to next page\"\n            aria-controls=\"status\"\n          >\n            Next\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  renderSmall() {\n    return (\n      <div class=\"smallscreen\">\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n          <button\n            id={`wm-1-arw`}\n            class=\"paginationbtn\"\n            onClick={() => {\n              this.currentPage = 1;\n              this.updatePageDisplayed(1);\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\n            }}\n            value={1}\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\n            aria-label={`Go to page 1`}\n            aria-controls=\"status\"\n            disabled={this.currentPage === 1}\n          >\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\n            </svg>\n          </button>\n          <button\n            id=\"previous-arw\"\n            class=\"paginationbtn previousbtn\"\n            onClick={() => {\n              this.currentPage -= 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\n            }}\n            disabled={this.currentPage === 1}\n            aria-label=\"Go to previous page\"\n          >\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\n            </svg>\n          </button>\n          Page {this.currentPage} of {this.totalPages}\n          <button\n            id=\"next-arw\"\n            class=\"paginationbtn nextbtn\"\n            onClick={() => {\n              this.currentPage += 1;\n              this.updatePageDisplayed(this.currentPage);\n              this.maintainFocusOnNumberChange(\"next-arrow\");\n            }}\n            disabled={this.currentPage === this.totalPages}\n            aria-label=\"Go to next page\"\n          >\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\n            </svg>\n          </button>\n          <button\n            id={`wm-${this.totalPages}-arw`}\n            class=\"paginationbtn\"\n            onClick={() => {\n              this.currentPage = this.totalPages;\n              this.updatePageDisplayed(this.totalPages);\n              this.maintainFocusOnNumberChange(\"next-arrow\");\n            }}\n            value={this.totalPages}\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\n            aria-label={`Go to last page, page ${this.totalPages}`}\n            aria-controls=\"status\"\n            disabled={this.currentPage === this.totalPages}\n          >\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      // do not render the component if there's only one page\n      this.totalItems! > this.itemsPerPage! && (\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\n            {this.srAnnouncement}\n          </div>\n        </nav>\n      )\n    );\n  }\n}\n"],"version":3}