@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.2

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

@@ -1,363 +0,0 @@
-import { h } from "@stencil/core";
-import { debounce, intl } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Pagination {
-    constructor() {
-        this.totalPages = 0;
-        this.navigationLabel = intl.formatMessage({
-            id: "pagination.navLabel",
-            defaultMessage: "Pagination navigation.",
-            description: "Label for a navigation HTML element within a pagination UI element",
-        });
-        this.nextPageButtonLabel = intl.formatMessage({
-            id: "pagination.nextPageButtonLabel",
-            defaultMessage: "Go to next page",
-            description: "Page refers to a paginated list of items",
-        });
-        this.previousPageButtonLabel = intl.formatMessage({
-            id: "pagination.previousPageButtonLabel",
-            defaultMessage: "Go to previous page",
-            description: "Page refers to a paginated list of items",
-        });
-        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.srAnnouncement = "";
-    }
-    pageButtonLabel(pageNum) {
-        return intl.formatMessage({
-            id: "pagination.pageButtonLabel",
-            defaultMessage: `Go to page {pageNum}`,
-            description: "Page refers to a paginated list of items",
-        }, {
-            pageNum: pageNum,
-        });
-    }
-    lastPageButtonLabel(totalPages) {
-        return intl.formatMessage({
-            id: "pagination.lastPageButtonLabel",
-            defaultMessage: `Go to last page, page {totalPages}`,
-            description: "Page refers to a paginated list of items",
-        }, {
-            totalPages: totalPages,
-        });
-    }
-    currentPageAnnouncement(currentPage) {
-        return intl.formatMessage({
-            id: "pagination.currentPageAnnouncement",
-            defaultMessage: "Current page, {currentPage}.",
-            description: "Page refers to a paginated list of items",
-        }, {
-            currentPage: currentPage,
-        });
-    }
-    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();
-        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 = `${this.currentPageAnnouncement(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 ? this.pageButtonLabel(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;
-        }
-        return intl.formatMessage({
-            id: "pagination.pagesInView",
-            defaultMessage: "Viewing {atEnd, select, true {{itemStart}} other {{itemStart}-{itemEnd} of {totalItems}}}",
-            description: "Text indicating the range of items displayed in a list, and the total amount of items the list contains",
-        }, {
-            atEnd: begin === end,
-            itemStart: begin,
-            itemEnd: end,
-            totalItems: this.totalItems,
-        });
-    }
-    renderLarge() {
-        return (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: "pagebtncontainer" }, 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": this.previousPageButtonLabel, "aria-controls": "status" }, globalMessages.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": this.nextPageButtonLabel, "aria-controls": "status" }, globalMessages.next))));
-    }
-    renderSmall() {
-        return (h("div", { class: "smallscreen" }, h("div", { class: "pagebtncontainer" }, 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": this.pageButtonLabel(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": this.previousPageButtonLabel }, 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": this.nextPageButtonLabel }, 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": this.lastPageButtonLabel(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", { key: 'b560fdf7586a80ce3e117d74d264e56afd7de42e', "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8d35b0f1049ac65751a14d96daef2cfcd5928765', 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 {
-            "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"
-            }];
-    }
-}