@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,799 +0,0 @@
-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}"]`);
-    }
-    componentWillLoad() {
-        this.setPaginationState();
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    componentDidRender() {
-        this.syncHeaderWidth();
-    }
-    componentDidUpdate() {
-        this.setPaginationState(); // Recalculate when props change
-    }
-    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"; }
-}