@watermarkinsights/ripple 5.12.0 → 5.13.0-alpha.10

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

@@ -1,312 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-pagination", () => {
-    let page, el;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent("<wm-pagination total-items='43' items-per-page='10' current-page='1'></wm-pagination>");
-        el = await page.find("wm-pagination");
-        await page.evaluate(async () => {
-            await document.addEventListener("wmPaginationPageClicked", function (ev) {
-                let pagin = document.querySelector("wm-pagination");
-                pagin.currentPage = +ev.target.value;
-            });
-        });
-    });
-    // HANDLES ONE PAGE (FALLBACK IF DEV'S CONDITIONAL RENDERING FAILS)
-    it("does not render pagination", async () => {
-        el.setAttribute("current-page", "1");
-        el.setAttribute("total-items", "5");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        const current = await page.find("wm-pagination >>> nav");
-        expect(current).toBe(null);
-    });
-    //HANDLES SHORT PAGINATION (FIVE PAGES OR LESS )
-    it("indicates the current page correctly", async () => {
-        el.setAttribute("current-page", "5");
-        el.setAttribute("total-items", "47");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        let val = await current.getProperty("value");
-        expect(val).toEqual("5");
-    });
-    it("displays the correct number of buttons", async () => {
-        el.setAttribute("current-page", "2");
-        el.setAttribute("total-items", "47");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        //There should be prev, five page numbers and next
-        let buttons = await page.findAll("wm-pagination >>> button");
-        expect(buttons.length).toBe(7);
-        el.setAttribute("current-page", "2");
-        el.setAttribute("total-items", "11");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        //There should now be prev, two page numbers, and next
-        buttons = await page.findAll("wm-pagination >>> button");
-        expect(buttons.length).toBe(4);
-    });
-    it("disables previous and next", async () => {
-        el.setAttribute("current-page", "5");
-        el.setAttribute("total-items", "47");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        let buttons = await page.findAll("wm-pagination >>> button");
-        let prev = await buttons[0];
-        let next = await buttons[6];
-        expect(prev).not.toHaveAttribute("disabled");
-        expect(next).toHaveAttribute("disabled");
-        el.setAttribute("current-page", "1");
-        await page.waitForChanges();
-        buttons = await page.findAll("wm-pagination >>> button");
-        prev = await buttons[0];
-        next = await buttons[6];
-        expect(next).not.toHaveAttribute("disabled");
-        expect(prev).toHaveAttribute("disabled");
-    });
-    //Add tests for keyboard navigation to simulate events that update the current page
-    // HANDLES LONG PAGINATION (SIX OR MORE PAGES)
-    it("indicates the current page correctly", async () => {
-        el.setAttribute("current-page", "6");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        let val = await current.getProperty("value");
-        expect(val).toEqual("6");
-    });
-    it("displays five page number buttons regardless of the current page", async () => {
-        el.setAttribute("current-page", "3");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        let buttons = await page.findAll("wm-pagination >>> button");
-        //five page number buttons, plus the two prev/next buttons that always render
-        expect(buttons.length).toBe(7);
-        el.setAttribute("current-page", "15");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        buttons = await page.findAll("wm-pagination >>> button");
-        //five page number buttons, plus the two prev/next buttons that always render
-        expect(buttons.length).toBe(7);
-        el.setAttribute("current-page", "7");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        buttons = await page.findAll("wm-pagination >>> button");
-        //five page number buttons, plus the two prev/next buttons that always render
-        expect(buttons.length).toBe(7);
-    });
-    it("displays only the right hand ellipsis when current page is within the first four pages", async () => {
-        el.setAttribute("current-page", "3");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
-        //Check that page number, not left hand ellipsis, is displayed
-        expect(displayedElements.childNodes[2].innerHTML).toBe("2");
-        //Check that ellipsis is displayed in the right spot
-        expect(displayedElements.childNodes[5].innerHTML).toBe("...");
-    });
-    it("displays only the left hand ellipsis only when current page is within the last four pages", async () => {
-        el.setAttribute("current-page", "13");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
-        //Check that page number, not right hand ellipsis, is displayed
-        expect(displayedElements.childNodes[5].innerHTML).toBe("14");
-        //Check that ellipsis is displayed in the right spot
-        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
-    });
-    it("displays both sets of ellipsis when the total page count is greater than 6 and the current page is not within the first four or the last four pages", async () => {
-        el.setAttribute("current-page", "8");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
-        //left ellipsis
-        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
-        //right ellipsis
-        expect(displayedElements.childNodes[6].innerHTML).toBe("...");
-    });
-    it("fires an event when a button is triggered", async () => {
-        el.setAttribute("current-page", "3");
-        el.setAttribute("total-items", "147");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // Previous btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        expect(current.id).toBe("wm-2");
-    });
-    // A11Y
-    // UX requirements, cf. https://watermarkinsights.atlassian.net/wiki/spaces/WDS/pages/51938484/Pagination
-    it("allows user to tab through the clickable pagination elements", async () => {
-        el.setAttribute("current-page", "5");
-        el.setAttribute("total-items", "97");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        // User should be able to tab through the clickable pagination elements. Navigating below to page 5
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        let activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("wm-5");
-        //Navigating below to next button
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("next");
-    });
-    it("updates the current page when enter is pressed on a page button and keeps focus on the selected page", async () => {
-        el.setAttribute("current-page", "5");
-        el.setAttribute("total-items", "97");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        //Navigate to page 6 and click on it
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //Current page should update to page 6
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        let val = await current.getProperty("value");
-        expect(val).toEqual("6");
-        //Focus should remain on 6 even though button arrangement changes
-        let activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("wm-6");
-    });
-    it("decrements the current page when enter is pressed on the previous button, keeps focus on the previous button until it becomes disabled, and moves focus first page once it is disabled", async () => {
-        el.setAttribute("current-page", "3");
-        el.setAttribute("total-items", "97");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        //Navigate to previous button
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //Current page should decrease by 1
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        let val = await current.getProperty("value");
-        expect(val).toEqual("2");
-        //Focus should remain on previous button
-        let activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("previous");
-        //Press previous again, reaching first page and disabling previous button
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        current = await page.find("wm-pagination >>> [aria-current='page']");
-        val = await current.getProperty("value");
-        expect(val).toEqual("1");
-        //Focus is shifted to first page button rather than flying out to body
-        activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("wm-1");
-    });
-    it("increments the current page when enter is pressed on the next button, keeps focus on the next button until it becomes disabled, and moves focus back to last page once it is disabled", async () => {
-        el.setAttribute("current-page", "8");
-        el.setAttribute("total-items", "97");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        //Navigate to the next button and press enter
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //Current page should increase by 1
-        let current = await page.find("wm-pagination >>> [aria-current='page']");
-        let val = await current.getProperty("value");
-        expect(val).toEqual("9");
-        //Focus should remain on the next button
-        let activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("next");
-        //Press next again
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //Last page is reached, and next button becomes disabled
-        current = await page.find("wm-pagination >>> [aria-current='page']");
-        val = await current.getProperty("value");
-        expect(val).toEqual("10");
-        //Rather than the focus shifting to the body once it is disabled, focus is brought to last page button
-        activeElId = await page.evaluate(async () => {
-            let el = await document.activeElement.shadowRoot.activeElement;
-            return el.id;
-        });
-        expect(activeElId).toBe("wm-10");
-    });
-    it("sets labels dynamically so that screenreaders properly announce the navigable pagination elements", async () => {
-        el.setAttribute("current-page", "3");
-        el.setAttribute("total-items", "47");
-        el.setAttribute("items-per-page", "10");
-        await page.waitForChanges();
-        let buttons = await page.findAll("wm-pagination >>> button");
-        let notCurrentPage = buttons[2];
-        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 2");
-        let currentPage = buttons[3];
-        expect(currentPage).toEqualAttribute("aria-label", "");
-        //Change current page number
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        buttons = await page.findAll("wm-pagination >>> button");
-        //Button 3 no longer as label indicating it's the current page
-        notCurrentPage = buttons[3];
-        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 3");
-        //Button 2 now has current page label
-        currentPage = buttons[2];
-        expect(currentPage).toEqualAttribute("aria-label", "");
-    });
-});

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", { "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(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 {
-            "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"
-            }];
-    }
-}