@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/wm-pagination/wm-pagination.js

@@ -1,337 +1,337 @@
 import { h } from "@stencil/core";
 import { debounce } from "../../global/functions";
 export class Pagination {
-  constructor() {
-    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");
+    constructor() {
+        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 = "";
     }
-    this.calculateTotalPages();
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
+    toggleTabbingOn() {
+        this.isTabbing = true;
     }
-    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));
+    toggleTabbingOff() {
+        this.isTabbing = false;
     }
-    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;
+    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;
+            }
+        });
     }
-    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 is() { return "wm-pagination"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-pagination.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-pagination.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "currentPage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "current-page",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "totalItems": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "total-items",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "itemsPerPage": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "items-per-page",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "value": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "isLargeSize": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "is-large-size",
-        "reflect": false,
-        "defaultValue": "window.innerWidth > 600"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {},
-      "srAnnouncement": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmPaginationPageClicked",
-        "name": "wmPaginationPageClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+    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");
         }
-      }, {
-        "method": "focusCurrentPage",
-        "name": "focusCurrentPage",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+        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()}`;
+    }
+    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 (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;
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "totalItems",
-        "methodName": "calculateTotalPages"
-      }, {
-        "propName": "itemsPerPage",
-        "methodName": "calculateTotalPages"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        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 is() { return "wm-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "totalItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "total-items",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "items-per-page",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "isLargeSize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-large-size",
+                "reflect": false,
+                "defaultValue": "window.innerWidth > 600"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "srAnnouncement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmPaginationPageClicked",
+                "name": "wmPaginationPageClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "focusCurrentPage",
+                "name": "focusCurrentPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "totalItems",
+                "methodName": "calculateTotalPages"
+            }, {
+                "propName": "itemsPerPage",
+                "methodName": "calculateTotalPages"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }