@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

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

@@ -0,0 +1,838 @@
+import { Host, h, } from "@stencil/core";
+import { version } from "../../../../package";
+import { nanoid } from "nanoid";
+import { checkEmptyOrType, checkRequiredAndType, debounce } from "../../utils/index";
+const ELLIPSIS = '...';
+const MEASUREMENT_DEBOUNCE_MS = 50;
+const RESIZE_DEBOUNCE_MS = 150;
+const MIN_VISIBLE_PAGES = 3;
+const EDGE_ITEM_COUNT = 2; // Always show first and last page
+const MAX_ELLIPSIS_COUNT = 2; // Maximum ellipsis elements
+const GAP_THRESHOLD_FOR_PAGE = 2; // Show page number instead of ellipsis when gap is this value
+const MIDDLE_RANGE_START = 2; // Middle range starts from page 2 (page 1 is always shown separately)
+export class PostPagination {
+    constructor() {
+        this.items = [];
+        this.lastWindowWidth = window.innerWidth;
+        this.loaded = false;
+        this.debouncedResize = debounce(this.handleResizeInternal.bind(this), RESIZE_DEBOUNCE_MS);
+        this.measurementTimeoutId = null;
+    }
+    validatePage() {
+        this.validateProp('page', 'number', false);
+    }
+    validatePageSize() {
+        this.validateProp('pageSize', 'number', true);
+    }
+    validateCollectionSize() {
+        this.validateProp('collectionSize', 'number', true);
+    }
+    validateLabel() {
+        this.validateProp('label', 'string', true);
+    }
+    validateTextPrevious() {
+        this.validateProp('textPrevious', 'string', true);
+    }
+    validateTextNext() {
+        this.validateProp('textNext', 'string', true);
+    }
+    validateTextPage() {
+        this.validateProp('textPage', 'string', true);
+    }
+    validateTextFirst() {
+        this.validateProp('textFirst', 'string', true);
+    }
+    validateTextLast() {
+        this.validateProp('textLast', 'string', true);
+    }
+    validateDisabled() {
+        this.validateProp('disabled', 'boolean', false);
+    }
+    handlePropsChange() {
+        this.updatePagesWithValidation();
+    }
+    componentWillLoad() {
+        this.paginationId = `pagination-${this.host.id || nanoid(6)}`;
+        if (this.page == null) {
+            this.page = 1;
+        }
+    }
+    connectedCallback() {
+        window.addEventListener('resize', this.debouncedResize);
+    }
+    componentDidLoad() {
+        this.loaded = true;
+        this.runAllValidations();
+        this.scheduleMeasurement();
+    }
+    disconnectedCallback() {
+        this.loaded = false;
+        window.removeEventListener('resize', this.debouncedResize);
+        if (this.measurementTimeoutId !== null) {
+            clearTimeout(this.measurementTimeoutId);
+            this.measurementTimeoutId = null;
+        }
+    }
+    /**
+     * Validate a prop with the appropriate check function
+     */
+    validateProp(propName, type, required = true) {
+        if (required) {
+            checkRequiredAndType(this, propName, type);
+        }
+        else {
+            checkEmptyOrType(this, propName, type);
+        }
+    }
+    /**
+     * Run all prop validations
+     */
+    runAllValidations() {
+        this.validateProp('page', 'number', false);
+        this.validateProp('pageSize', 'number', true);
+        this.validateProp('collectionSize', 'number', true);
+        this.validateProp('label', 'string', true);
+        this.validateProp('textPrevious', 'string', true);
+        this.validateProp('textNext', 'string', true);
+        this.validateProp('textPage', 'string', true);
+        this.validateProp('textFirst', 'string', true);
+        this.validateProp('textLast', 'string', true);
+        this.validateProp('disabled', 'boolean', false);
+    }
+    /**
+     * Schedule measurement attempt with timeout
+     */
+    scheduleMeasurement() {
+        if (!this.loaded)
+            return;
+        this.measurementTimeoutId = window.setTimeout(() => {
+            const canMeasure = this.navRef?.clientWidth > 0 && this.hiddenItemsRef;
+            if (canMeasure) {
+                this.measureAndCalculateVisiblePages();
+            }
+            else {
+                this.scheduleMeasurement();
+            }
+        }, MEASUREMENT_DEBOUNCE_MS);
+    }
+    /**
+     * Internal resize handler
+     */
+    handleResizeInternal() {
+        if (!this.loaded)
+            return;
+        if (window.innerWidth === this.lastWindowWidth)
+            return;
+        this.lastWindowWidth = window.innerWidth;
+        this.measureAndCalculateVisiblePages();
+    }
+    /**
+     * Calculates gap between two elements
+     */
+    calculateGap(first, second) {
+        const firstRect = first.getBoundingClientRect();
+        const secondRect = second.getBoundingClientRect();
+        return secondRect.left - firstRect.right;
+    }
+    /**
+     * Measures actual rendered elements to determine how many pages can fit
+     */
+    measureAndCalculateVisiblePages() {
+        if (!this.navRef || !this.hiddenItemsRef || !this.loaded)
+            return;
+        const totalPages = this.getTotalPages();
+        if (totalPages <= 1)
+            return;
+        const paginationPadding = this.getPaginationPadding();
+        const availableWidth = this.getAvailableWidth();
+        const netWidth = availableWidth - paginationPadding;
+        const controlButtonsWidth = this.getControlButtonsWidth();
+        const pageButton = this.hiddenItemsRef.querySelector('.hidden-page-button');
+        const ellipsis = this.hiddenItemsRef.querySelector('.hidden-ellipsis');
+        if (!pageButton)
+            return;
+        const singleButtonWidth = pageButton.getBoundingClientRect().width;
+        const gap = pageButton && ellipsis ? this.calculateGap(pageButton, ellipsis) : 0;
+        const controlButtonGaps = gap * 2; // Gap after prev and before next
+        const widthForPages = netWidth - controlButtonsWidth - controlButtonGaps;
+        // Calculate how many page buttons can fit
+        const maxPages = Math.floor((widthForPages + gap) / (singleButtonWidth + gap));
+        const clampedMaxPages = Math.max(MIN_VISIBLE_PAGES, Math.min(maxPages, totalPages));
+        this.maxVisiblePages = clampedMaxPages;
+        this.updatePagesWithValidation();
+    }
+    /**
+     * Gets total width of control buttons (prev/next)
+     */
+    getControlButtonsWidth() {
+        if (!this.hiddenItemsRef)
+            return 0;
+        const controlButtons = Array.from(this.hiddenItemsRef.querySelectorAll('.hidden-control-button'));
+        const totalWidth = controlButtons.reduce((sum, el) => sum + el.getBoundingClientRect().width, 0);
+        return totalWidth;
+    }
+    /**
+     * Gets the horizontal padding of the pagination container
+     */
+    getPaginationPadding() {
+        if (!this.navRef)
+            return 0;
+        const computedStyle = window.getComputedStyle(this.navRef);
+        const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+        const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+        return paddingLeft + paddingRight;
+    }
+    /**
+     * Gets available width from parent container
+     */
+    getAvailableWidth() {
+        if (!this.navRef)
+            return 0;
+        return this.host.parentElement?.clientWidth ?? window.innerWidth;
+    }
+    /**
+     * Returns true if collection size or page size is invalid
+     */
+    get invalidSize() {
+        return this.collectionSize === 0 || this.pageSize === 0;
+    }
+    /**
+     * Clamps the page number to valid range
+     */
+    clampPageToValidRange(totalPages) {
+        const invalidTotalPages = totalPages === 0 || this.invalidSize || isNaN(totalPages);
+        const invalidPage = !this.page || this.page < 1 || isNaN(this.page);
+        const pageExceedsTotal = this.page > totalPages;
+        if (invalidTotalPages || invalidPage) {
+            return 1;
+        }
+        else if (pageExceedsTotal) {
+            return totalPages;
+        }
+        else {
+            return this.page;
+        }
+    }
+    /**
+     * Validates and updates pages with clamped page number
+     */
+    updatePagesWithValidation() {
+        const totalPages = this.getTotalPages();
+        this.page = this.clampPageToValidRange(totalPages);
+        this.generatePages(totalPages);
+    }
+    /**
+     * Calculates the total number of pages.
+     */
+    getTotalPages() {
+        if (this.invalidSize)
+            return 1;
+        return Math.ceil(this.collectionSize / this.pageSize);
+    }
+    /**
+     * Convert numeric gap to a section type
+     */
+    sectionForGap(gap) {
+        if (gap <= 1)
+            return 'none';
+        return gap === GAP_THRESHOLD_FOR_PAGE ? 'page' : 'ellipsis';
+    }
+    /**
+     * Compute the left/right sections and numeric gaps for a given range
+     */
+    getSections(startPage, endPage, totalPages) {
+        const leftGap = startPage - 1;
+        const rightGap = totalPages - endPage;
+        return {
+            leftSection: this.sectionForGap(leftGap),
+            rightSection: this.sectionForGap(rightGap),
+            leftGap,
+            rightGap,
+        };
+    }
+    /**
+     * Compute total items that would be rendered for a given range
+     */
+    computeTotalItems(startPage, endPage, totalPages) {
+        const { leftSection, rightSection } = this.getSections(startPage, endPage, totalPages);
+        const middle = Math.max(0, endPage - startPage + 1);
+        const leftCount = leftSection === 'none' ? 0 : 1;
+        const rightCount = rightSection === 'none' ? 0 : 1;
+        // Always include first page (1) and last page (totalPages) = EDGE_ITEM_COUNT pages
+        // Plus any left/right sections (ellipsis or pages) and middle pages
+        return EDGE_ITEM_COUNT + leftCount + rightCount + middle;
+    }
+    /**
+     * Build a full list of pages (1..totalPages)
+     */
+    buildAllPages(totalPages) {
+        const items = [];
+        for (let i = 1; i <= totalPages; i++) {
+            items.push({ type: 'page', page: i });
+        }
+        return items;
+    }
+    /**
+     * Adjust start/end pages to avoid gap=2 scenarios
+     */
+    adjustForGapTwo(startPage, endPage, totalPages, middleSlots) {
+        const adjusted = { startPage, endPage };
+        // Fix rightGap=GAP_THRESHOLD_FOR_PAGE to maintain visual consistency
+        const rightGap = totalPages - endPage;
+        if (rightGap === GAP_THRESHOLD_FOR_PAGE) {
+            adjusted.endPage = totalPages - 1;
+            adjusted.startPage = Math.max(MIDDLE_RANGE_START, adjusted.endPage - middleSlots + 1);
+        }
+        // Fix leftGap=GAP_THRESHOLD_FOR_PAGE to maintain symmetry
+        const leftGap = adjusted.startPage - 1;
+        if (leftGap === GAP_THRESHOLD_FOR_PAGE) {
+            adjusted.startPage = MIDDLE_RANGE_START;
+            adjusted.endPage = Math.min(totalPages - 1, adjusted.startPage + middleSlots - 1);
+        }
+        return adjusted;
+    }
+    /**
+     * Ensure we have the desired number of middle slots
+     */
+    ensureMiddleSlots(startPage, endPage, totalPages, middleSlots) {
+        const adjusted = { startPage, endPage };
+        const actualSlots = endPage - startPage + 1;
+        if (actualSlots < middleSlots && endPage < totalPages - 1) {
+            adjusted.endPage = Math.min(totalPages - 1, startPage + middleSlots - 1);
+        }
+        if (actualSlots < middleSlots && startPage > MIDDLE_RANGE_START) {
+            adjusted.startPage = Math.max(MIDDLE_RANGE_START, endPage - middleSlots + 1);
+        }
+        return adjusted;
+    }
+    /**
+     * Trim excess items by shrinking the range away from current page
+     */
+    trimExcessItems(startPage, endPage, totalPages, maxVisible, currentPage) {
+        const adjusted = { startPage, endPage };
+        let totalItems = this.computeTotalItems(adjusted.startPage, adjusted.endPage, totalPages);
+        while (totalItems > maxVisible) {
+            const distLeft = currentPage - adjusted.startPage;
+            const distRight = adjusted.endPage - currentPage;
+            if (distRight >= distLeft && adjusted.endPage > adjusted.startPage) {
+                adjusted.endPage = Math.max(adjusted.startPage - 1, adjusted.endPage - 1);
+            }
+            else if (adjusted.startPage < adjusted.endPage) {
+                adjusted.startPage = Math.min(adjusted.endPage + 1, adjusted.startPage + 1);
+            }
+            else {
+                break;
+            }
+            const newTotal = this.computeTotalItems(adjusted.startPage, adjusted.endPage, totalPages);
+            if (newTotal === totalItems)
+                break;
+            totalItems = newTotal;
+        }
+        return adjusted;
+    }
+    /**
+     * Expand range to fill available slots
+     */
+    expandToFillSlots(startPage, endPage, totalPages, maxVisible) {
+        const adjusted = { startPage, endPage };
+        let totalItems = this.computeTotalItems(adjusted.startPage, adjusted.endPage, totalPages);
+        while (totalItems < maxVisible) {
+            const canExpandLeft = adjusted.startPage > MIDDLE_RANGE_START;
+            const canExpandRight = adjusted.endPage < totalPages - 1;
+            if (canExpandLeft) {
+                adjusted.startPage = Math.max(MIDDLE_RANGE_START, adjusted.startPage - 1);
+            }
+            else if (canExpandRight) {
+                adjusted.endPage = Math.min(totalPages - 1, adjusted.endPage + 1);
+            }
+            else {
+                break;
+            }
+            const newTotal = this.computeTotalItems(adjusted.startPage, adjusted.endPage, totalPages);
+            if (newTotal === totalItems)
+                break;
+            totalItems = newTotal;
+        }
+        return adjusted;
+    }
+    /**
+     * Balance total items to match maxVisible by trimming or expanding
+     */
+    balanceTotalItems(startPage, endPage, totalPages, maxVisible, currentPage) {
+        const trimmed = this.trimExcessItems(startPage, endPage, totalPages, maxVisible, currentPage);
+        return this.expandToFillSlots(trimmed.startPage, trimmed.endPage, totalPages, maxVisible);
+    }
+    /**
+     * Calculate optimal page range centered around current page
+     */
+    calculatePageRange(currentPage, totalPages, maxVisible) {
+        // Reserve slots for first, last, and potential ellipses
+        const middleSlots = Math.max(0, maxVisible - EDGE_ITEM_COUNT - MAX_ELLIPSIS_COUNT);
+        if (middleSlots <= 0) {
+            return { startPage: MIDDLE_RANGE_START, endPage: 1 };
+        }
+        // Center around current page
+        const halfMiddle = Math.floor(middleSlots / 2);
+        let startPage = currentPage - halfMiddle;
+        let endPage = startPage + middleSlots - 1;
+        // Clamp to valid range
+        if (startPage < MIDDLE_RANGE_START) {
+            startPage = MIDDLE_RANGE_START;
+            endPage = startPage + middleSlots - 1;
+        }
+        if (endPage > totalPages - 1) {
+            endPage = totalPages - 1;
+            startPage = endPage - middleSlots + 1;
+        }
+        startPage = Math.max(MIDDLE_RANGE_START, startPage);
+        endPage = Math.min(totalPages - 1, endPage);
+        // Adjust for gap=2 scenarios and balance items
+        const gapAdjusted = this.adjustForGapTwo(startPage, endPage, totalPages, middleSlots);
+        const slotAdjusted = this.ensureMiddleSlots(gapAdjusted.startPage, gapAdjusted.endPage, totalPages, middleSlots);
+        return this.balanceTotalItems(slotAdjusted.startPage, slotAdjusted.endPage, totalPages, maxVisible, currentPage);
+    }
+    /**
+     * Build pagination items with ellipsis
+     */
+    buildPaginationItems(startPage, endPage, totalPages) {
+        const items = [];
+        const hasMiddlePages = startPage <= endPage;
+        // First page
+        items.push({ type: 'page', page: 1 });
+        if (hasMiddlePages) {
+            const { leftSection, rightSection } = this.getSections(startPage, endPage, totalPages);
+            // Left section (ellipsis or page 2)
+            if (leftSection === 'page') {
+                items.push({ type: 'page', page: 2 });
+            }
+            else if (leftSection === 'ellipsis') {
+                items.push({ type: 'ellipsis' });
+            }
+            // Middle pages
+            for (let i = startPage; i <= endPage; i++) {
+                items.push({ type: 'page', page: i });
+            }
+            // Right section (ellipsis or second-to-last page)
+            if (rightSection === 'page') {
+                items.push({ type: 'page', page: totalPages - 1 });
+            }
+            else if (rightSection === 'ellipsis') {
+                items.push({ type: 'ellipsis' });
+            }
+            // Last page
+            items.push({ type: 'page', page: totalPages });
+            return items;
+        }
+    }
+    /**
+     * Generates pagination items for small slot counts (3 or 4 items).
+     * Ensures current page is always visible.
+     */
+    generateSmallPagination(currentPage, totalPages) {
+        if (currentPage === 1 || currentPage === totalPages) {
+            return [{ type: 'page', page: 1 }, { type: 'ellipsis' }, { type: 'page', page: totalPages }];
+        }
+        return [{ type: 'ellipsis' }, { type: 'page', page: currentPage }, { type: 'ellipsis' }];
+    }
+    /**
+     * Generates the page numbers array with ellipsis based on available space.
+     */
+    generatePages(totalPages) {
+        const maxVisible = this.maxVisiblePages;
+        const currentPage = this.page || 1;
+        if (totalPages <= maxVisible) {
+            this.items = this.buildAllPages(totalPages);
+            return;
+        }
+        // Use simplified logic for small slot counts
+        if (maxVisible <= 4) {
+            this.items = this.generateSmallPagination(currentPage, totalPages);
+            return;
+        }
+        // Use full algorithm for larger slot counts
+        const { startPage, endPage } = this.calculatePageRange(currentPage, totalPages, maxVisible);
+        this.items = this.buildPaginationItems(startPage, endPage, totalPages);
+    }
+    /**
+     * Emit page change event and update page
+     */
+    emitPageChange(newPage) {
+        this.page = newPage;
+        this.postChange.emit(newPage);
+    }
+    /**
+     * Handles page change when a page button is clicked.
+     */
+    handlePageClick(pageNumber) {
+        if (this.disabled || pageNumber === this.page)
+            return;
+        this.emitPageChange(pageNumber);
+    }
+    /**
+     * Handles previous button click.
+     */
+    handlePrevious() {
+        if (this.disabled || this.page <= 1)
+            return;
+        this.emitPageChange(this.page - 1);
+    }
+    /**
+     * Handles next button click.
+     */
+    handleNext() {
+        const totalPages = this.getTotalPages();
+        if (this.disabled || this.page >= totalPages)
+            return;
+        this.emitPageChange(this.page + 1);
+    }
+    /**
+     * Handles keyboard navigation
+     */
+    handleKeyDown(event, action) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            action();
+        }
+    }
+    /**
+     * Builds accessible label for a page button.
+     */
+    buildPageLabel(pageNumber) {
+        const totalPages = this.getTotalPages();
+        if (pageNumber === 1) {
+            return `${this.textFirst}, ${this.textPage} ${pageNumber}`;
+        }
+        if (pageNumber === totalPages) {
+            return `${this.textLast}, ${this.textPage} ${pageNumber}`;
+        }
+        return `${this.textPage} ${pageNumber}`;
+    }
+    /**
+     * Renders an ellipsis item.
+     */
+    renderEllipsis(key) {
+        return (h("li", { class: "pagination-item pagination-ellipsis", key: key }, h("span", { class: "pagination-ellipsis-content", "aria-hidden": "true" }, ELLIPSIS)));
+    }
+    /**
+     * Renders a page button.
+     */
+    renderPageButton(pageNumber) {
+        const isCurrent = pageNumber === this.page;
+        return (h("li", { class: "pagination-item", key: `page-${pageNumber}` }, h("button", { type: "button", class: {
+                'pagination-link': true,
+                'pagination-link-active': isCurrent,
+            }, "aria-label": this.buildPageLabel(pageNumber), "aria-current": isCurrent ? 'page' : undefined, onClick: () => this.handlePageClick(pageNumber), onKeyDown: e => this.handleKeyDown(e, () => this.handlePageClick(pageNumber)), disabled: this.disabled ? true : undefined, tabIndex: this.disabled ? -1 : 0 }, h("span", { "aria-hidden": "true" }, pageNumber))));
+    }
+    /**
+     * Renders a pagination item.
+     */
+    renderItem(item, index) {
+        return item.type === 'ellipsis'
+            ? this.renderEllipsis(`ellipsis-${index}`)
+            : this.renderPageButton(item.page);
+    }
+    /**
+     * Renders control button (prev/next)
+     */
+    renderControlButton(iconName, label, isDisabled, onClick, rotateIcon = false) {
+        return (h("li", { class: "pagination-item pagination-control" }, h("button", { type: "button", class: {
+                'pagination-link': true,
+                'pagination-control-button': true,
+                'pagination-link-disabled': isDisabled,
+            }, "aria-label": label, onClick: onClick, onKeyDown: e => this.handleKeyDown(e, onClick), disabled: isDisabled, tabIndex: isDisabled ? -1 : 0 }, h("post-icon", { name: iconName, class: rotateIcon ? 'pagination-icon-rotated' : undefined, "aria-hidden": "true" }), h("span", { class: "visually-hidden" }, label))));
+    }
+    /**
+     * Renders minimal hidden items for measurement
+     */
+    renderHiddenItems(totalPages) {
+        return [
+            h("button", { class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronleft", "aria-hidden": "true" })),
+            h("button", { class: "pagination-link pagination-control-button hidden-page-button", "aria-label": this.buildPageLabel(totalPages), disabled: true }, h("span", { "aria-hidden": "true" }, totalPages)),
+            h("span", { class: "pagination-ellipsis-content hidden-ellipsis", "aria-hidden": "true" }, ELLIPSIS),
+            h("button", { class: "pagination-link pagination-control-button hidden-control-button", disabled: true }, h("post-icon", { name: "chevronleft", class: "pagination-icon-rotated", "aria-hidden": "true" })),
+        ];
+    }
+    render() {
+        const totalPages = this.getTotalPages();
+        if (totalPages <= 1) {
+            return null;
+        }
+        const isPrevDisabled = this.disabled || this.page <= 1;
+        const isNextDisabled = this.disabled || this.page >= totalPages;
+        return (h(Host, { slot: "post-pagination", "data-version": version }, h("nav", { class: "pagination", "aria-label": this.label, id: this.paginationId, ref: el => (this.navRef = el) }, h("ul", { class: "pagination-list", role: "list" }, this.renderControlButton('chevronleft', this.textPrevious, isPrevDisabled, () => this.handlePrevious()), this.items.map((item, index) => this.renderItem(item, index)), this.renderControlButton('chevronleft', this.textNext, isNextDisabled, () => this.handleNext(), true)), h("div", { class: "hidden-items", "aria-hidden": "true", ref: el => (this.hiddenItemsRef = el) }, this.renderHiddenItems(totalPages)))));
+    }
+    static get is() { return "post-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current active page number.\n\n**If not specified, defaults to the first page.**"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-size"
+            },
+            "collectionSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The total number of items in the collection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collection-size"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A descriptive label for the pagination navigation, used by assistive technologies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "textPrevious": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the previous page button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-previous"
+            },
+            "textNext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the next page button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-next"
+            },
+            "textPage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix text for page number labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-page"
+            },
+            "textFirst": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix text for the first page label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-first"
+            },
+            "textLast": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix text for the last page label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-last"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the pagination is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "paginationId": {},
+            "maxVisiblePages": {},
+            "items": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postChange",
+                "name": "postChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the page changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "page",
+                "methodName": "validatePage"
+            }, {
+                "propName": "pageSize",
+                "methodName": "validatePageSize"
+            }, {
+                "propName": "collectionSize",
+                "methodName": "validateCollectionSize"
+            }, {
+                "propName": "label",
+                "methodName": "validateLabel"
+            }, {
+                "propName": "textPrevious",
+                "methodName": "validateTextPrevious"
+            }, {
+                "propName": "textNext",
+                "methodName": "validateTextNext"
+            }, {
+                "propName": "textPage",
+                "methodName": "validateTextPage"
+            }, {
+                "propName": "textFirst",
+                "methodName": "validateTextFirst"
+            }, {
+                "propName": "textLast",
+                "methodName": "validateTextLast"
+            }, {
+                "propName": "disabled",
+                "methodName": "validateDisabled"
+            }, {
+                "propName": "page",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "pageSize",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "collectionSize",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}