@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,814 @@
+import { Host, h, Fragment } from "@stencil/core";
+export class RPagination {
+    constructor() {
+        /** UI: Arrows present/absent */
+        this.arrows = true;
+        /** Total amount of pages to select from */
+        this.totalResults = 1;
+        /** Current page number */
+        this.pageActive = 1;
+        /** Amount of items to show per page */
+        this.itemsPerPage = 5;
+        /** Items per page options for dropdown */
+        this.itemsPerPageOptions = [5, 10, 15, 20, 25, 50, 100];
+        // @Prop() variant?: PaginationVariant;
+        /** Allows selection between different pagination styles: minimized, standard, maximized */
+        this.variant = 'standard';
+        /** UI: Result Line and select field present/absent */
+        this.resultsLine = false;
+        /** Text to show in beginning of resultLine */
+        this.startText = 'Showing';
+        /** Text to display between currently shown results and total amount of results */
+        this.middleText = 'of';
+        /** Text to display after total results */
+        this.endText = 'results';
+        /** Text to show in select */
+        this.selectText = 'page';
+        /** Position of the list box */
+        this.listBoxPosition = 'top';
+        /** Label for Previous Page button. Important to ensure accessibility for screen reader users. */
+        this.previousPageButtonLabel = 'Go to the previous page';
+        /** Label for Next Page button. Important to ensure accessibility for screen reader users.*/
+        this.nextPageButtonLabel = 'Go to the next page';
+        /** Label for First Page button. Important to ensure accessibility for screen reader users.*/
+        this.firstPageButtonLabel = 'Go to the first page';
+        /** Label for Last Page button. Important to ensure accessibility for screen reader users.*/
+        this.lastPageButtonLabel = 'Go to the last page';
+        /** Label for Page number buttons. Important to ensure accessibility for screen reader users.*/
+        this.pageLabel = 'Page';
+        /** Label for Ellipsis stepper. Important to ensure accessibility for screen reader users.*/
+        this.ellipsisLabel = 'Ellipsis indicating skipped pages';
+        /** Label for Items per page select. */
+        this.itemsPerPageLabel = 'Items per page';
+        this.resizeObserver = null;
+        this.handleItemsPerPageChange = (event) => {
+            const newItemsPerPage = parseInt(event.detail.value, 10);
+            this.itemsPerPage = newItemsPerPage;
+            this.rItemsPerPageChange.emit(this.itemsPerPage);
+            this.setPaginationState();
+        };
+        this._activateStep = (index) => {
+            if (index < 1 || index > this.total || this.pageActive === index)
+                return; // Prevent invalid or redundant updates
+            this.pageActive = index;
+            requestAnimationFrame(() => {
+                this.setPaginationState(); // Ensure state updates correctly
+                requestAnimationFrame(() => {
+                    var _a;
+                    // Ensure the correct button is focused AFTER the state updates
+                    const newActiveButton = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+                    if (newActiveButton) {
+                        newActiveButton.focus();
+                    }
+                });
+            });
+        };
+        this.handleItemChange = e => {
+            const buttonElement = e.target.closest('r-icon-button') || e.target.closest('r-button');
+            const index = Number(buttonElement.getAttribute('data-index'));
+            if (index === null)
+                return;
+            this._activateStep(index);
+            requestAnimationFrame(() => {
+                const focusTarget = this.getFocusTargetAfterNavigation(buttonElement);
+                focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.setFocus();
+            });
+            if (buttonElement.classList.contains('number')) {
+                this.rNumberClick.emit(this.paginationState);
+            }
+            if (buttonElement.classList.contains('arrow')) {
+                const direction = buttonElement.classList.contains('next') ? 'next' : 'previous';
+                this.rArrowClick.emit(Object.assign(Object.assign({}, this.paginationState), { direction }));
+            }
+        };
+        this.syncHeaderWidth = () => {
+            requestAnimationFrame(() => {
+                if (this.headerRef && this.footerRef) {
+                    const footerWidth = this.footerRef.offsetWidth;
+                    this.headerRef.style.width = `${footerWidth}px`;
+                }
+            });
+        };
+    }
+    get isNoPreviousPage() {
+        return this.previous === null;
+    }
+    get isNoNextPage() {
+        return this.next === null;
+    }
+    get isNotFirstPage() {
+        return this.first === null;
+    }
+    get isNotLastPage() {
+        return this.last === null;
+    }
+    get paginationState() {
+        const { total, active, previous, next, first, last, arrows } = this;
+        return { total, active, previous, next, first, last, arrows };
+    }
+    // State recalculation
+    setPaginationState() {
+        // Correctly calculate total pages based on items per page
+        this.total = Math.ceil(this.totalResults / this.itemsPerPage);
+        // Ensure the active page does not exceed the total pages
+        if (this.pageActive > this.total) {
+            this.pageActive = this.total;
+        }
+        // Set the reveal value based on variant and screen size
+        switch (this.variant) {
+            case 'minimized':
+                {
+                    this.arrows = false;
+                    this.resultsLine = false;
+                    break;
+                }
+            case 'standard': {
+                this.arrows = true;
+                break;
+            }
+            case 'maximized': {
+                this.arrows = true;
+                break;
+            }
+            default: {
+                console.warn('No variant specified. Defaulting to "standard".');
+                this.variant = 'standard';
+                break;
+            }
+        }
+        // Update pagination-related state variables
+        this.active = this.pageActive;
+        this.previous = this.active - 1 > 0 ? this.active - 1 : null;
+        this.next = this.active + 1 > this.total ? null : this.active + 1;
+        this.first = this.variant === 'maximized' && this.active !== 1 ? 1 : null;
+        this.last = this.variant === 'maximized' && this.active !== this.total ? this.total : null;
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.syncHeaderWidth();
+            });
+            if (this.footerRef) {
+                this.resizeObserver.observe(this.footerRef);
+            }
+        }
+        // Emit updated pagination state
+        this.rChange.emit(this.paginationState);
+    }
+    /**
+     * Determines the appropriate focus target after navigation based on button states.
+     * Handles edge cases where navigation buttons become disabled.
+     */
+    getFocusTargetAfterNavigation(buttonElement) {
+        var _a, _b, _c, _d, _e;
+        const isArrowButton = buttonElement.classList.contains('arrow');
+        const isNextButton = buttonElement.classList.contains('next');
+        const isPrevButton = buttonElement.classList.contains('previous');
+        const isFirstButton = buttonElement.classList.contains('first');
+        const isLastButton = buttonElement.classList.contains('last');
+        const willNextBeDisabled = this.next === null;
+        const willPrevBeDisabled = this.previous === null;
+        const willLastBeDisabled = this.active === this.total;
+        const willFirstBeDisabled = this.first === null;
+        if (isNextButton && willNextBeDisabled) {
+            return (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isPrevButton && willPrevBeDisabled) {
+            return (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.r-pagination--item.number[data-index="1"]`);
+        }
+        if (isLastButton && willLastBeDisabled) {
+            return (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector(`.r-pagination--item.number[data-index="${this.total}"]`);
+        }
+        if (isFirstButton && willFirstBeDisabled) {
+            return (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.r-pagination--item.number[data-index="1"]');
+        }
+        return isArrowButton ? buttonElement : (_e = this.el.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector(`.r-pagination--item[data-index="${this.pageActive}"]`);
+    }
+    handlePropsChange() {
+        this.setPaginationState();
+    }
+    componentWillLoad() {
+        this.setPaginationState();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentDidRender() {
+        this.syncHeaderWidth();
+    }
+    render() {
+        const { active, previous, next, first, itemsPerPage, itemsPerPageOptions, startText, middleText, endText, selectText, listBoxPosition } = this;
+        const itemTemplate = (type, index) => {
+            if (type === 'number') {
+                return (h("li", null, h("r-button", { class: "r-pagination--item number", "data-index": index, variant: "secondary", onRClick: this.handleItemChange }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
+            }
+            if (type === 'active') {
+                return (h("li", null, h("r-button", { "data-index": index, class: "r-pagination--item number active", rAriaCurrent: "page" }, h("span", { class: "visually-hidden" }, this.pageLabel), " ", index)));
+            }
+            if (type === 'stepper') {
+                return (h("li", { "aria-label": this.ellipsisLabel, class: "r-pagination--item stepper" }, "..."));
+            }
+        };
+        const renderNumbers = () => {
+            const totalPages = Math.ceil(this.totalResults / itemsPerPage);
+            const maxVisiblePages = 10;
+            const items = [];
+            const startEdge = 1;
+            const endEdge = totalPages;
+            const _createItem = (value) => {
+                const item = value + 1; // Convert to 1-indexed
+                const type = item === active ? 'active' : 'number';
+                return itemTemplate(type, item);
+            };
+            // Case: total pages are less than or equal to maxVisiblePages
+            if (totalPages <= maxVisiblePages) {
+                return h("ul", { class: "r-pagination--items-list" }, [...Array(totalPages).keys()].map(_createItem));
+            }
+            // Always add startEdge
+            items.push(itemTemplate(active === startEdge ? 'active' : 'number', startEdge));
+            const showStartStepper = active > 5;
+            const showEndStepper = active < totalPages - 5;
+            // Case: active page is near the beginning
+            if (!showStartStepper) {
+                for (let i = 2; i <= 8; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+                items.push(itemTemplate('stepper', null));
+            }
+            // Case: active page is near the end
+            else if (!showEndStepper) {
+                items.push(itemTemplate('stepper', null));
+                for (let i = totalPages - 7; i < totalPages; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+            }
+            // Case: active page is in the middle
+            else {
+                items.push(itemTemplate('stepper', null));
+                for (let i = active - 2; i <= active + 2; i++) {
+                    items.push(_createItem(i - 1)); // Convert to 0-indexed for _createItem
+                }
+                items.push(itemTemplate('stepper', null));
+            }
+            // Always add endEdge
+            items.push(itemTemplate(active === endEdge ? 'active' : 'number', endEdge));
+            // Ensure the total number of items is 10
+            if (items.length > maxVisiblePages) {
+                items.splice(1, items.length - maxVisiblePages - 1); // Remove excess items while keeping steppers
+            }
+            else if (items.length < maxVisiblePages) {
+                // Add additional pages if the total number of items is less than 10
+                const additionalPages = maxVisiblePages - items.length;
+                if (showStartStepper && showEndStepper) {
+                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
+                        if (i < totalPages) {
+                            items.splice(items.length - 2, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+                else if (showStartStepper) {
+                    for (let i = active + 3; i <= active + 2 + additionalPages; i++) {
+                        if (i < totalPages) {
+                            items.splice(items.length - 1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+                else if (showEndStepper) {
+                    for (let i = active - 3; i >= active - 2 - additionalPages; i--) {
+                        if (i > 1) {
+                            items.splice(1, 0, _createItem(i - 1)); // Convert to 0-indexed for _createItem
+                        }
+                    }
+                }
+            }
+            return h("ul", { class: "r-pagination--items-list" }, items);
+        };
+        const renderHeader = () => {
+            const startItem = Math.min((active - 1) * itemsPerPage + 1, this.totalResults);
+            const endItem = Math.min(active * itemsPerPage, this.totalResults);
+            return (h(Fragment, null, h("div", { ref: el => (this.headerRef = el), class: "r-pagination--header" }, h("div", { class: "results-info", "aria-live": "polite" }, startText ? startText : 'Showing', " ", startItem, "\u2013", endItem, " ", middleText ? middleText : 'of', " ", this.totalResults, " ", endText ? endText : 'results'), h("div", null, h("r-select", { class: "r-pagination--header--select", value: this.itemsPerPage.toString(), id: "items-per-page", onRChange: this.handleItemsPerPageChange, label: this.itemsPerPageLabel, "listbox-position": listBoxPosition }, itemsPerPageOptions.map(option => (h("r-select-option", { value: option.toString() }, option, "/", selectText ? selectText : 'page'))))))));
+        };
+        const isLastPage = active === this.total;
+        const renderList = () => {
+            if (this.variant === 'minimized') {
+                return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, renderNumbers())));
+            }
+            return (h(Fragment, null, h("div", { ref: el => (this.footerRef = el), class: "r-pagination--footer" }, this.variant === 'maximized' && (h("r-icon-button", { "data-index": first, name: "angle-left-with-vertical-line", size: "s", disabled: this.isNotFirstPage, label: this.firstPageButtonLabel, class: "r-pagination--item arrow first", onRClick: this.handleItemChange })), h("r-icon-button", { "data-index": previous, name: "angle-left", size: "s", disabled: this.isNoPreviousPage, label: this.previousPageButtonLabel, class: "r-pagination--item arrow previous", onRClick: this.handleItemChange }), renderNumbers(), h("r-icon-button", { "data-index": next, name: "angle-right", size: "s", disabled: this.isNoNextPage, label: this.nextPageButtonLabel, class: "r-pagination--item arrow next", onRClick: this.handleItemChange }), this.variant === 'maximized' && (h("r-icon-button", { "data-index": this.total, name: "angle-right-with-vertical-line", size: "s", disabled: isLastPage, label: this.lastPageButtonLabel, class: "r-pagination--item arrow last", onRClick: this.handleItemChange })))));
+        };
+        return (h(Host, { role: "navigation" }, h("div", { class: "r-pagination" }, this.resultsLine && renderHeader(), renderList())));
+    }
+    static get is() { return "r-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "arrows": {
+                "type": "boolean",
+                "attribute": "arrows",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI: Arrows present/absent"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "totalResults": {
+                "type": "number",
+                "attribute": "total-results",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total amount of pages to select from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "pageActive": {
+                "type": "number",
+                "attribute": "page-active",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page number"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "itemsPerPage": {
+                "type": "number",
+                "attribute": "items-per-page",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Amount of items to show per page"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "5"
+            },
+            "itemsPerPageOptions": {
+                "type": "unknown",
+                "attribute": "items-per-page-options",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationItemsPerPageOptions[]",
+                    "resolved": "(5 | 10 | 15 | 20 | 25 | 50 | 100)[]",
+                    "references": {
+                        "PaginationItemsPerPageOptions": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/pagination/exports.ts::PaginationItemsPerPageOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items per page options for dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[5, 10, 15, 20, 25, 50, 100]"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationVariant",
+                    "resolved": "\"maximized\" | \"minimized\" | \"standard\"",
+                    "references": {
+                        "PaginationVariant": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/pagination/exports.ts::PaginationVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows selection between different pagination styles: minimized, standard, maximized"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'standard'"
+            },
+            "resultsLine": {
+                "type": "boolean",
+                "attribute": "results-line",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "UI: Result Line and select field present/absent"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "startText": {
+                "type": "string",
+                "attribute": "start-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to show in beginning of resultLine"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Showing'"
+            },
+            "middleText": {
+                "type": "string",
+                "attribute": "middle-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display between currently shown results and total amount of results"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'of'"
+            },
+            "endText": {
+                "type": "string",
+                "attribute": "end-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display after total results"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'results'"
+            },
+            "selectText": {
+                "type": "string",
+                "attribute": "select-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to show in select"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'page'"
+            },
+            "listBoxPosition": {
+                "type": "string",
+                "attribute": "list-box-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationListBoxPosition",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {
+                        "PaginationListBoxPosition": {
+                            "location": "import",
+                            "path": "./exports",
+                            "id": "src/components/pagination/exports.ts::PaginationListBoxPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the list box"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "previousPageButtonLabel": {
+                "type": "string",
+                "attribute": "previous-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Previous Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the previous page'"
+            },
+            "nextPageButtonLabel": {
+                "type": "string",
+                "attribute": "next-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Next Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the next page'"
+            },
+            "firstPageButtonLabel": {
+                "type": "string",
+                "attribute": "first-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for First Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the first page'"
+            },
+            "lastPageButtonLabel": {
+                "type": "string",
+                "attribute": "last-page-button-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Last Page button. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Go to the last page'"
+            },
+            "pageLabel": {
+                "type": "string",
+                "attribute": "page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Page number buttons. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Page'"
+            },
+            "ellipsisLabel": {
+                "type": "string",
+                "attribute": "ellipsis-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Ellipsis stepper. Important to ensure accessibility for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Ellipsis indicating skipped pages'"
+            },
+            "itemsPerPageLabel": {
+                "type": "string",
+                "attribute": "items-per-page-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for Items per page select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Items per page'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "total": {},
+            "active": {},
+            "previous": {},
+            "next": {},
+            "first": {},
+            "last": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "const myPaginationEl = document.querySelector('r-pagination');\nmyPaginationEl.addEventListener('rChange', (event) => {\n  console.log(`Page ${event.detail} was selected`)\n});"
+                        }],
+                    "text": "Signifies that currently active page was changed.\n\nPagination state is passed as part of event `detail` property."
+                },
+                "complexType": {
+                    "original": "{\n    total: number,\n    active: number,\n    previous: number,\n    next: number\n  }",
+                    "resolved": "{ total: number; active: number; previous: number; next: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rNumberClick",
+                "name": "rNumberClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "const myPaginationEl = document.querySelector('r-pagination');\nmyPaginationEl.addEventListener('rNumberClick', (event) => {\n  console.log(`Page ${event.detail} was selected`)\n});"
+                        }],
+                    "text": "Signifies that one of the pagination number buttons was cliked.\n\nPagination state is passed as part of event `detail` property."
+                },
+                "complexType": {
+                    "original": "{\n    total: number,\n    active: number,\n    previous: number,\n    next: number\n  }",
+                    "resolved": "{ total: number; active: number; previous: number; next: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rArrowClick",
+                "name": "rArrowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "const myPaginationEl = document.querySelector('r-pagination');\nmyPaginationEl.addEventListener('rArrowClick', (event) => {\n  console.log(`Page ${event.detail} was selected`)\n});"
+                        }],
+                    "text": "Signifies that one of the pagination arrow buttons was cliked.\n\nPagination state and `direction` are passed as part of event `detail` property."
+                },
+                "complexType": {
+                    "original": "{\n    total: number,\n    active: number,\n    previous: number,\n    next: number,\n    direction: string\n  }",
+                    "resolved": "{ total: number; active: number; previous: number; next: number; direction: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rItemsPerPageChange",
+                "name": "rItemsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "const myPaginationEl = document.querySelector('r-pagination');\nmyPaginationEl.addEventListener('rItemsPerPageChange', (event) => {\n  console.log(`Items per page changed to ${event.detail}`)\n});"
+                        }],
+                    "text": "Signifies that items per page was changed.\n\nNew items per page value is passed as part of event `detail` property."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "totalResults",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "itemsPerPage",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "variant",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "pageActive",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}