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

package/dist/esm/post-pagination.entry.js

@@ -0,0 +1,613 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { n as nanoid } from './index.browser-BLchVpF6.js';
+import { c as checkRequiredAndType, b as checkEmptyOrType } from './breakpoints-DYoSKGHO.js';
+import { d as debounce } from './debounce-C9hMpmsD.js';
+import './environment-CEmnRoA6.js';
+
+const postPaginationCss = () => `.pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:8px;overflow:hidden}.pagination-list{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;padding:0;margin:0;font-size:14px;font-weight:700;color:#050400;text-decoration:none;background-color:rgba(0,0,0,0);border:1px solid #ccc;border-radius:100%;cursor:pointer;appearance:none;outline:none}.pagination-link:hover:not(:disabled):not(.pagination-link-disabled){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:active:not(:disabled):not(.pagination-link-disabled):not(.pagination-link-active){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:focus-visible{z-index:1;outline:2px solid #050400;outline-offset:2px}.pagination-link:focus:not(:focus-visible){outline:none}.pagination-link.pagination-link-active{font-weight:700;color:#fff;background-color:#050400;border-color:#050400;cursor:default}.pagination-link.pagination-link-active:hover:not(:disabled):not(.pagination-link-disabled){background-color:#504f4b;border-color:#504f4b;color:#fff}.pagination-link:disabled,.pagination-link.pagination-link-disabled{color:#6b6b6b;background-color:#f0f0f0;border-color:#ccc;opacity:.6;cursor:default}@media (min-width: 600px){.pagination-link{width:40px;height:40px;min-width:40px;font-size:16px}}@media (min-width: 1024px){.pagination-link{width:48px;height:48px;min-width:48px;font-size:20px}}.pagination-control-button post-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 600px){.pagination-control-button post-icon{width:18px;height:18px}}@media (min-width: 1024px){.pagination-control-button post-icon{width:20px;height:20px}}.pagination-control-button:active:not(:disabled):not(.pagination-link-disabled){background-color:#f5f5f5;border:2px solid #504f4b}.pagination-ellipsis{display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#050400;user-select:none}@media (min-width: 600px){.pagination-ellipsis-content{width:40px;height:40px}}@media (min-width: 1024px){.pagination-ellipsis-content{width:48px;height:48px}}.hidden-items{position:absolute;display:flex;gap:4px;height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.pagination-icon-rotated{display:inline-block;transform:rotate(180deg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+
+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)
+const PostPagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postChange = createEvent(this, "postChange");
+        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)))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "page": [{
+                "validatePage": 0
+            }, {
+                "handlePropsChange": 0
+            }],
+        "pageSize": [{
+                "validatePageSize": 0
+            }, {
+                "handlePropsChange": 0
+            }],
+        "collectionSize": [{
+                "validateCollectionSize": 0
+            }, {
+                "handlePropsChange": 0
+            }],
+        "label": [{
+                "validateLabel": 0
+            }],
+        "textPrevious": [{
+                "validateTextPrevious": 0
+            }],
+        "textNext": [{
+                "validateTextNext": 0
+            }],
+        "textPage": [{
+                "validateTextPage": 0
+            }],
+        "textFirst": [{
+                "validateTextFirst": 0
+            }],
+        "textLast": [{
+                "validateTextLast": 0
+            }],
+        "disabled": [{
+                "validateDisabled": 0
+            }]
+    }; }
+};
+PostPagination.style = postPaginationCss();
+
+export { PostPagination as post_pagination };