@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

@@ -1,180 +1,180 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f164fbca.js';
-import { d as debounce } from './functions-d0e70094.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7e11ea42.js';
+import { d as debounce } from './functions-5afd09f4.js';
 
 const wmPaginationCss = ":host,wm-pagination{--wmcolor-pagination-arrow-disabled:var(--wmcolor-interactive-disabled);--wmcolor-pagination-arrow:var(--wmcolor-interactive);--wmcolor-pagination-arrow:var(--wmcolor-interactive);--wmcolor-pagination-button-text-disabled:var(--wmcolor-interactive-disabled);--wmcolor-pagination-button-text:var(--wmcolor-interactive);--wmcolor-pagination-current-background-hover:var(--wmcolor-interactive-hover);--wmcolor-pagination-current-background:var(--wmcolor-interactive);--wmcolor-pagination-current-text:var(--wmcolor-interactive-text);--wmcolor-pagination-focus:var(--wmcolor-interactive-focus-textonly);display:block}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;-ms-transition:none;-webkit-transition:none;-moz-transition:none;transition:none;border:none;color:var(--wmcolor-pagination-button-text);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:var(--wmcolor-pagination-arrow)}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:var(--wmcolor-pagination-button-text-disabled);pointer-events:none}nav .largescreen .paginationbtn[disabled] svg *,nav .smallscreen .paginationbtn[disabled] svg *{fill:var(--wmcolor-pagination-arrow-disabled)}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]):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%, var(--wmcolor-pagination-focus)), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, var(--wmcolor-pagination-focus) 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 var(--wmcolor-interactive-focus);-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 var(--wmcolor-interactive-focus);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 var(--wmcolor-interactive-focus)}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 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);background:var(--wmcolor-pagination-current-background);color:var(--wmcolor-pagination-current-text)}nav .largescreen .paginationbtn[aria-current=page]:hover{background:var(--wmcolor-pagination-current-background-hover)}.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) {
-        registerInstance(this, hostRef);
-        this.wmPaginationPageClicked = createEvent(this, "wmPaginationPageClicked", 7);
-        this.focusCurrentPage = createEvent(this, "focusCurrentPage", 7);
-        this.totalPages = 0;
-        this.debouncedResize = debounce(() => (this.isLargeSize = this.el.clientWidth > 500), 100);
-        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.isLargeSize = 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;
-            }
-        });
-    }
-    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.isLargeSize) {
-                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();
-            }
-        };
-        const resizeObserver = new ResizeObserver(() => this.debouncedResize());
-        resizeObserver.observe(this.el);
-    }
-    updatePageDisplayed(pageNum) {
-        this.value = pageNum;
-        this.wmPaginationPageClicked.emit();
-        this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmPaginationPageClicked = createEvent(this, "wmPaginationPageClicked", 7);
+    this.focusCurrentPage = createEvent(this, "focusCurrentPage", 7);
+    this.totalPages = 0;
+    this.debouncedResize = debounce(() => (this.isLargeSize = this.el.clientWidth > 500), 100);
+    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.isLargeSize = 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;
+      }
+    });
+  }
+  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");
     }
-    displayShortPagination() {
-        let pages = [];
-        for (let i = 1; i <= this.totalPages; i++) {
-            pages.push(this.displayPageNumber(i));
-        }
-        return pages;
+    this.calculateTotalPages();
+    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+      this.toggleTabbingOn();
     }
-    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;
+    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.isLargeSize) {
+        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();
+      }
+    };
+    const resizeObserver = new ResizeObserver(() => this.debouncedResize());
+    resizeObserver.observe(this.el);
+  }
+  updatePageDisplayed(pageNum) {
+    this.value = pageNum;
+    this.wmPaginationPageClicked.emit();
+    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+  }
+  displayShortPagination() {
+    let pages = [];
+    for (let i = 1; i <= this.totalPages; i++) {
+      pages.push(this.displayPageNumber(i));
     }
-    displayPageNumber(pageNum) {
-        return (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));
+    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 (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 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;
     }
-    displayEllipsis() {
-        return 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 (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, 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(), 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 (h("div", { class: "smallscreen" }, h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, 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 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, 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" }))), 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" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, 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" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), 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 }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, 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 && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), 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 getElement(this); }
-    static get watchers() { return {
-        "totalItems": ["calculateTotalPages"],
-        "itemsPerPage": ["calculateTotalPages"]
-    }; }
+    return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+  }
+  renderLarge() {
+    return (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, 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(), 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 (h("div", { class: "smallscreen" }, h("div", { class: `pagebtncontainer ${this.isTabbing ? "user-is-tabbing" : ""}` }, 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 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, 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" }))), 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" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, 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" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), 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 }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, 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 && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), 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 getElement(this); }
+  static get watchers() { return {
+    "totalItems": ["calculateTotalPages"],
+    "itemsPerPage": ["calculateTotalPages"]
+  }; }
 };
 Pagination.style = wmPaginationCss;