@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1241 @@
+import { h, Host } from "@stencil/core";
+import { translate } from "../../locales/locale.service";
+import { getIcon } from "../../utils/config";
+/**
+ * Pagination component following Ant Design specification.
+ * It provides a way to navigate through a large set of data split into pages.
+ *
+ * Supports:
+ * - Basic page navigation
+ * - Page size changer
+ * - Quick jump to specific page
+ * - Simple and Responsive modes
+ * - Layout alignment
+ *
+ * @part pagination - The root element container
+ * @part item - Individual page number item
+ * @part prev - Previous page navigation button
+ * @part next - Next page navigation button
+ * @part jumper - Quick jumper input field container
+ * @part options - Size changer and options selection container
+ * @part total - Total items display section
+ */
+/**
+ * Pagination component for navigating paged data.
+ */
+export class XPagination {
+    // ==================== Props ====================
+    /**
+     * Current page number (controlled).
+     * @type {number}
+     * @example
+     * <x-pagination current={2}></x-pagination>
+     */
+    current;
+    /**
+     * Default initial page number (uncontrolled).
+     * @type {number}
+     * @default 1
+     * @example
+     * <x-pagination defaultCurrent={1}></x-pagination>
+     */
+    defaultCurrent = 1;
+    /**
+     * Default number of data items per page.
+     * @type {number}
+     * @default 10
+     * @example
+     * <x-pagination defaultPageSize={20}></x-pagination>
+     */
+    defaultPageSize = 10;
+    /**
+     * Disable pagination interaction.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination disabled></x-pagination>
+     */
+    disabled = false;
+    /**
+     * Whether to hide pager when there is only one page.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination hideOnSinglePage></x-pagination>
+     */
+    hideOnSinglePage = false;
+    /**
+     * Number of data items per page (controlled).
+     * @type {number}
+     * @example
+     * <x-pagination pageSize={50}></x-pagination>
+     */
+    pageSize;
+    /**
+     * Options providing selectable page sizes.
+     * @type {number[]}
+     * @default [10, 20, 50, 100]
+     * @example
+     * <x-pagination pageSizeOptions={[10, 20, 50, 100]}></x-pagination>
+     */
+    pageSizeOptions = [10, 20, 50, 100];
+    /**
+     * Minimum total items required to automatically show the size changer.
+     * @type {number}
+     * @default 50
+     * @example
+     * <x-pagination totalBoundaryShowSizeChanger={100}></x-pagination>
+     */
+    totalBoundaryShowSizeChanger = 50;
+    /**
+     * Force show/hide size changer regardless of total items.
+     * @type {boolean}
+     * @example
+     * <x-pagination showSizeChanger={true}></x-pagination>
+     */
+    showSizeChanger;
+    /**
+     * Show quick jumper to skip to a specific page.
+     * @type {boolean | PaginationQuickJumper}
+     * @default false
+     * @example
+     * <x-pagination showQuickJumper></x-pagination>
+     */
+    showQuickJumper = false;
+    /**
+     * Function to customize the display of total items and current range.
+     * @type {(total: number, range: [number, number]) => string}
+     * @example
+     * <x-pagination showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}></x-pagination>
+     */
+    showTotal;
+    /**
+     * Show fewer items in the pager (useful for narrow spaces).
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination showLessItems></x-pagination>
+     */
+    showLessItems = false;
+    /**
+     * Whether to show title attributes on the pager elements.
+     * @type {boolean}
+     * @default true
+     * @example
+     * <x-pagination showTitle={false}></x-pagination>
+     */
+    showTitle = true;
+    /**
+     * Enable simple mode navigation.
+     * @type {boolean | PaginationSimple}
+     * @default false
+     * @example
+     * <x-pagination simple></x-pagination>
+     */
+    simple = false;
+    /**
+     * Component size: 'small', 'middle', or 'large'.
+     * @type {PaginationSize}
+     * @default 'middle'
+     * @example
+     * <x-pagination size="small"></x-pagination>
+     */
+    size = 'middle';
+    /**
+     * Total number of data items.
+     * @type {number}
+     * @default 0
+     * @example
+     * <x-pagination total={120}></x-pagination>
+     */
+    total = 0;
+    /**
+     * Alignment of the pagination container.
+     * @type {PaginationAlign}
+     * @default 'start'
+     * @example
+     * <x-pagination align="center"></x-pagination>
+     */
+    align = 'start';
+    /**
+     * If set, pagination will be responsive and adjust its UI.
+     * @type {boolean}
+     * @default false
+     * @example
+     * <x-pagination responsive></x-pagination>
+     */
+    responsive = false;
+    /**
+     * Custom CSS class names for internal sub-components.
+     * @type {PaginationClassNames}
+     * @example
+     * <x-pagination classNames={{ root: 'my-pg', item: 'pg-item' }}></x-pagination>
+     */
+    classNames = {};
+    /**
+     * Inline styles for internal sub-components.
+     * @type {PaginationStyles}
+     * @example
+     * <x-pagination styles={{ root: 'margin-top: 10px;' }}></x-pagination>
+     */
+    styles = {};
+    // ==================== Events ====================
+    /**
+     * Emitted when current page number or page size is changed.
+     * Useful for triggering data re-fetching.
+     * @event xChange
+     */
+    xChange;
+    /**
+     * Emitted specifically when the page size is changed via the selector.
+     * @event xShowSizeChange
+     */
+    xShowSizeChange;
+    // ==================== State ====================
+    /** Internal state tracking current page to handle uncontrolled/controlled logic sync. */
+    internalCurrent = 1;
+    /** Internal state tracking current items per page. */
+    internalPageSize = 10;
+    /** Temporary string value typed into the jump input before confirming (Enter/Go). */
+    jumpValue = '';
+    // ==================== Lifecycle ====================
+    /** Sets up initial internal state from props during component initialization. */
+    componentWillLoad() {
+        this.internalCurrent = this.current ?? this.defaultCurrent;
+        this.internalPageSize = this.pageSize ?? this.defaultPageSize;
+    }
+    /**
+     * Syncs internal page state when the 'current' prop is updated externally.
+     * @param {number} newValue - The new page number.
+     */
+    watchCurrent(newValue) {
+        if (newValue !== undefined) {
+            this.internalCurrent = newValue;
+        }
+    }
+    /**
+     * Syncs internal page size when the 'pageSize' prop is updated externally.
+     * @param {number} newValue - The new number of items per page.
+     */
+    watchPageSize(newValue) {
+        if (newValue !== undefined) {
+            this.internalPageSize = newValue;
+        }
+    }
+    // ==================== Helpers ====================
+    /** @returns {number} The total number of pages based on total items and current page size. */
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.internalPageSize));
+    }
+    /** @returns {boolean} True if the current page is the first page. */
+    get isFirstPage() {
+        return this.internalCurrent === 1;
+    }
+    /** @returns {boolean} True if the current page is the last page. */
+    get isLastPage() {
+        return this.internalCurrent === this.totalPages;
+    }
+    /** @returns {boolean} Determines if the page size changer dropdown should be rendered. */
+    get shouldShowSizeChanger() {
+        // If explicitly set via prop, use that value
+        if (this.showSizeChanger !== undefined) {
+            return this.showSizeChanger;
+        }
+        // Otherwise, show it only if the total item count exceeds the boundary threshold
+        return this.total > this.totalBoundaryShowSizeChanger;
+    }
+    /** @returns {[number, number]} The start and end item indices for the current page. */
+    get range() {
+        const start = (this.internalCurrent - 1) * this.internalPageSize + 1;
+        const end = Math.min(this.internalCurrent * this.internalPageSize, this.total);
+        return [start, end];
+    }
+    // ==================== Handlers ====================
+    /**
+     * Validates and processes a request to change the current page.
+     * @param {number} page - The target page number.
+     */
+    handlePageChange = (page) => {
+        // Block navigation if component is disabled
+        if (this.disabled)
+            return;
+        // Clamp the page number between 1 and the maximum total pages
+        const validPage = Math.max(1, Math.min(page, this.totalPages));
+        // Only trigger update if the page is actually different from the current one
+        if (validPage !== this.internalCurrent) {
+            this.internalCurrent = validPage;
+            this.xChange.emit({
+                current: validPage,
+                pageSize: this.internalPageSize,
+            });
+        }
+    };
+    /** Navigates to the previous page if available. */
+    handlePrev = () => {
+        if (!this.isFirstPage && !this.disabled) {
+            this.handlePageChange(this.internalCurrent - 1);
+        }
+    };
+    /** Navigates to the next page if available. */
+    handleNext = () => {
+        if (!this.isLastPage && !this.disabled) {
+            this.handlePageChange(this.internalCurrent + 1);
+        }
+    };
+    /** Skips backward by a set amount of pages (3 or 5). */
+    handleJumpPrev = () => {
+        const jumpSize = this.showLessItems ? 3 : 5;
+        this.handlePageChange(Math.max(1, this.internalCurrent - jumpSize));
+    };
+    /** Skips forward by a set amount of pages (3 or 5). */
+    handleJumpNext = () => {
+        const jumpSize = this.showLessItems ? 3 : 5;
+        this.handlePageChange(Math.min(this.totalPages, this.internalCurrent + jumpSize));
+    };
+    /**
+     * Handles page size selection changes.
+     * Recalculates the current page to keep the first visible item consistent.
+     */
+    handleSizeChange = (e) => {
+        const newSize = Number(e.detail.value);
+        if (newSize !== this.internalPageSize) {
+            // Calculate the current page in the new sizing to keep the user at the same data point
+            const newCurrent = Math.ceil((this.range[0]) / newSize);
+            this.internalPageSize = newSize;
+            this.internalCurrent = newCurrent;
+            this.xShowSizeChange.emit({
+                current: newCurrent,
+                size: newSize,
+            });
+            this.xChange.emit({
+                current: newCurrent,
+                pageSize: newSize,
+            });
+        }
+    };
+    /** Updates the temporary jump input value on every keystroke. */
+    handleJumpInputChange = (e) => {
+        const target = e.target;
+        this.jumpValue = target.value;
+    };
+    /** Listens for 'Enter' key on the jump input to trigger navigation. */
+    handleJumpInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            this.handleJump();
+        }
+    };
+    /** Executes the jump to the page number currently in the jump input. */
+    handleJump = () => {
+        const page = parseInt(this.jumpValue, 10);
+        // Validate that the input is a valid number within page bounds
+        if (!isNaN(page) && page >= 1 && page <= this.totalPages) {
+            this.handlePageChange(page);
+        }
+        // Reset the input field after attempt
+        this.jumpValue = '';
+    };
+    // ==================== Render Helpers ====================
+    /**
+     * Logic to determine which page numbers should be displayed in the pager.
+     * Automatically handles ellipsis ('jump-prev', 'jump-next') for large datasets.
+     *
+     * Flow:
+     * 1. Check if total pages fits within the maximum count (5 or 7).
+     * 2. If it fits, show all pages.
+     * 3. Else, calculate left/right bounds around the current page.
+     * 4. Add ellipses if the bounds don't reach the first or last page.
+     *
+     * @returns {(number | string)[]} Array of page numbers or jump string identifiers.
+     */
+    getPageNumbers() {
+        const { totalPages, internalCurrent, showLessItems } = this;
+        const pages = [];
+        // Determine maximum visible slots based on showLessItems prop
+        const pagerCount = showLessItems ? 5 : 7;
+        const halfPagerCount = Math.floor(pagerCount / 2);
+        if (totalPages <= pagerCount) {
+            // Total count is small enough: render the full list without ellipsis
+            for (let i = 1; i <= totalPages; i++) {
+                pages.push(i);
+            }
+        }
+        else {
+            // Always keep the first page visible
+            pages.push(1);
+            // Calculate the sliding window of middle pages
+            let left = Math.max(2, internalCurrent - halfPagerCount + 1);
+            let right = Math.min(totalPages - 1, internalCurrent + halfPagerCount - 1);
+            // Shift indices if we are too close to either boundary
+            if (internalCurrent - 1 <= halfPagerCount) {
+                right = pagerCount - 2;
+            }
+            if (totalPages - internalCurrent <= halfPagerCount) {
+                left = totalPages - pagerCount + 3;
+            }
+            // Add left ellipsis if it bypasses pages 2...
+            if (left > 2) {
+                pages.push('jump-prev');
+            }
+            // Render the middle block of numbers
+            for (let i = left; i <= right; i++) {
+                pages.push(i);
+            }
+            // Add right ellipsis if it skips pages before the last page
+            if (right < totalPages - 1) {
+                pages.push('jump-next');
+            }
+            // Always keep the last page visible
+            pages.push(totalPages);
+        }
+        return pages;
+    }
+    /**
+     * Renders a single page item (number or jump button).
+     * @param {number | string} page - Page number or identifier.
+     * @param {PaginationItemType} type - Type of the item ('page', 'jump-prev', etc.).
+     * @param {number} index - For key tracking.
+     */
+    renderItem(page, type, index) {
+        const { disabled, internalCurrent, showTitle, classNames, styles } = this;
+        const isPage = typeof page === 'number';
+        const isActive = isPage && page === internalCurrent;
+        const itemClasses = {
+            'x-pagination-item': true,
+            'x-pagination-item-active': isActive,
+            'x-pagination-jump-prev': type === 'jump-prev',
+            'x-pagination-jump-next': type === 'jump-next',
+            [classNames.item || '']: !!classNames.item,
+        };
+        // Handle click based on item type
+        // Flow:
+        // 1. Checks disabled state.
+        // 2. If page number, navigates to that page.
+        // 3. If jump button, navigates forward/backward by jump size.
+        const handleClick = () => {
+            if (disabled)
+                return;
+            if (isPage) {
+                this.handlePageChange(page);
+            }
+            else if (type === 'jump-prev') {
+                this.handleJumpPrev();
+            }
+            else if (type === 'jump-next') {
+                this.handleJumpNext();
+            }
+        };
+        const getTitle = () => {
+            if (!showTitle)
+                return undefined;
+            if (isPage)
+                return String(page);
+            if (type === 'jump-prev')
+                return `${translate('Pagination.prev_page', {}, 'Previous')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
+            if (type === 'jump-next')
+                return `${translate('Pagination.next_page', {}, 'Next')} ${this.showLessItems ? 3 : 5} ${translate('Pagination.page', {}, 'pages')}`;
+            return undefined;
+        };
+        const renderContent = () => {
+            if (isPage) {
+                return h("span", { class: "x-pagination-item-link" }, page);
+            }
+            // Ellipsis with double arrow on hover
+            return (h("span", { class: "x-pagination-item-link x-pagination-item-ellipsis" }, h("span", { class: "x-pagination-item-ellipsis-dot" }, h("x-icon", { name: getIcon('more'), rotate: 90 })), h("span", { class: "x-pagination-item-ellipsis-icon" }, type === 'jump-prev' ? h("x-icon", { name: getIcon('doubleArrowLeft') }) : h("x-icon", { name: getIcon('doubleArrowRight') }))));
+        };
+        return (h("li", { "data-key": `page-${index}`, class: itemClasses, style: styles.item, title: getTitle(), tabIndex: disabled ? -1 : 0, onClick: handleClick, onKeyDown: (e) => e.key === 'Enter' && handleClick(), part: "item", "aria-current": isActive ? 'page' : undefined }, renderContent()));
+    }
+    /** Renders the 'backward' navigation button. */
+    renderPrev() {
+        const { disabled, isFirstPage, showTitle, classNames, styles } = this;
+        const isDisabled = disabled || isFirstPage;
+        const prevClasses = {
+            'x-pagination-prev': true,
+            'x-pagination-disabled': isDisabled,
+            [classNames.prev || '']: !!classNames.prev,
+        };
+        return (h("li", { class: prevClasses, style: styles.prev, title: showTitle ? translate('Pagination.prev_page', {}, 'Previous Page') : undefined, tabIndex: isDisabled ? -1 : 0, onClick: this.handlePrev, onKeyDown: (e) => e.key === 'Enter' && this.handlePrev(), part: "prev", "aria-disabled": isDisabled ? 'true' : undefined }, h("button", { type: "button", disabled: isDisabled, class: "x-pagination-item-link" }, h("span", { class: "x-pagination-prev-icon" }, h("x-icon", { name: getIcon('arrowLeft') })))));
+    }
+    /** Renders the 'forward' navigation button. */
+    renderNext() {
+        const { disabled, isLastPage, showTitle, classNames, styles } = this;
+        const isDisabled = disabled || isLastPage;
+        const nextClasses = {
+            'x-pagination-next': true,
+            'x-pagination-disabled': isDisabled,
+            [classNames.next || '']: !!classNames.next,
+        };
+        return (h("li", { class: nextClasses, style: styles.next, title: showTitle ? translate('Pagination.next_page', {}, 'Next Page') : undefined, tabIndex: isDisabled ? -1 : 0, onClick: this.handleNext, onKeyDown: (e) => e.key === 'Enter' && this.handleNext(), part: "next", "aria-disabled": isDisabled ? 'true' : undefined }, h("button", { type: "button", disabled: isDisabled, class: "x-pagination-item-link" }, h("span", { class: "x-pagination-next-icon" }, h("x-icon", { name: getIcon('arrowRight') })))));
+    }
+    /** Renders the dropdown for selecting items-per-page. */
+    renderSizeChanger() {
+        const { disabled, internalPageSize, pageSizeOptions, classNames, styles } = this;
+        const optionsClasses = {
+            'x-pagination-options': true,
+            [classNames.options || '']: !!classNames.options,
+        };
+        const options = pageSizeOptions.map((size) => ({
+            value: size,
+            label: `${size} ${translate('Pagination.items_per_page', {}, '/ page')}`,
+        }));
+        return (h("li", { class: optionsClasses, style: styles.options, part: "options" }, h("x-select", { class: "x-pagination-options-size-changer", disabled: disabled, value: internalPageSize, onXChange: this.handleSizeChange, options: options })));
+    }
+    /** Renders the numeric input for jumping to a specific page. */
+    renderQuickJumper() {
+        const { disabled, showQuickJumper, classNames, styles } = this;
+        const goButton = typeof showQuickJumper === 'object'
+            ? showQuickJumper.goButton
+            : translate('global.go', {}, 'Go');
+        const jumperClasses = {
+            'x-pagination-options-quick-jumper': true,
+            [classNames.jumper || '']: !!classNames.jumper,
+        };
+        return (h("li", { class: jumperClasses, style: styles.jumper, part: "jumper" }, h("span", null, translate('Pagination.jump_to', {}, 'Go to')), h("input", { type: "text", value: this.jumpValue, disabled: disabled, onInput: this.handleJumpInputChange, onKeyDown: this.handleJumpInputKeyDown }), goButton && (h("button", { type: "button", class: "x-pagination-options-quick-jumper-button", disabled: disabled, onClick: this.handleJump }, goButton))));
+    }
+    /** Renders the total summary text. */
+    renderTotal() {
+        const { showTotal, total, range, classNames, styles } = this;
+        if (!showTotal)
+            return null;
+        const totalText = showTotal(total, range);
+        const totalClasses = {
+            'x-pagination-total-text': true,
+            [classNames.total || '']: !!classNames.total,
+        };
+        return (h("li", { class: totalClasses, style: styles.total, part: "total" }, totalText));
+    }
+    /** Renders the minimalist 'simple' mode variant. */
+    renderSimple() {
+        const { disabled, internalCurrent, totalPages, simple, showTitle, classNames, styles } = this;
+        const isReadOnly = typeof simple === 'object' && simple.readOnly;
+        return (h("ul", { class: "x-pagination x-pagination-simple", style: styles.root }, this.renderPrev(), h("li", { class: "x-pagination-simple-pager", title: showTitle ? `${internalCurrent}/${totalPages}` : undefined }, h("input", { type: "text", value: internalCurrent, disabled: disabled, readOnly: isReadOnly, onInput: (e) => {
+                if (!isReadOnly && !disabled) {
+                    const target = e.target;
+                    const page = parseInt(target.value, 10);
+                    if (!isNaN(page)) {
+                        this.handlePageChange(page);
+                    }
+                }
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter' && !isReadOnly && !disabled) {
+                    const target = e.target;
+                    const page = parseInt(target.value, 10);
+                    if (!isNaN(page)) {
+                        this.handlePageChange(page);
+                    }
+                }
+            }, class: {
+                'x-pagination-simple-pager-input': true,
+                [classNames.item || '']: !!classNames.item,
+            }, style: styles.item }), h("span", { class: "x-pagination-simple-pager-slash" }, "/"), h("span", { class: "x-pagination-simple-pager-total" }, totalPages)), this.renderNext(), this.shouldShowSizeChanger && this.renderSizeChanger()));
+    }
+    // ==================== Render ====================
+    /** Main render entry point. Manages visibility and switcher between mode layouts. */
+    render() {
+        const { hideOnSinglePage, disabled, size, align, simple, showQuickJumper, classNames, styles, } = this;
+        // Hide on single page
+        if (hideOnSinglePage && this.totalPages <= 1) {
+            return null;
+        }
+        // Simple mode
+        if (simple) {
+            return (h(Host, { class: {
+                    'x-pagination-disabled': disabled,
+                    'x-pagination-small': size === 'small',
+                    'x-pagination-large': size === 'large',
+                    [`x-pagination-align-${align}`]: true,
+                    [classNames.root || '']: !!classNames.root,
+                } }, this.renderSimple()));
+        }
+        // Full mode
+        const pageNumbers = this.getPageNumbers();
+        return (h(Host, { class: {
+                'x-pagination-disabled': disabled,
+                'x-pagination-small': size === 'small',
+                'x-pagination-large': size === 'large',
+                [`x-pagination-align-${align}`]: true,
+                [classNames.root || '']: !!classNames.root,
+            } }, h("ul", { class: "x-pagination", style: styles.root, part: "pagination", role: "navigation", "aria-label": "Pagination" }, this.renderTotal(), this.renderPrev(), pageNumbers.map((page, index) => {
+            const type = typeof page === 'number'
+                ? 'page'
+                : page;
+            return this.renderItem(page, type, index);
+        }), this.renderNext(), this.shouldShowSizeChanger && this.renderSizeChanger(), showQuickJumper && this.renderQuickJumper())));
+    }
+    static get is() { return "x-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination current={2}></x-pagination>"
+                        }],
+                    "text": "Current page number (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current"
+            },
+            "defaultCurrent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "1"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination defaultCurrent={1}></x-pagination>"
+                        }],
+                    "text": "Default initial page number (uncontrolled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-current",
+                "defaultValue": "1"
+            },
+            "defaultPageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "10"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination defaultPageSize={20}></x-pagination>"
+                        }],
+                    "text": "Default number of data items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-page-size",
+                "defaultValue": "10"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination disabled></x-pagination>"
+                        }],
+                    "text": "Disable pagination interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "hideOnSinglePage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination hideOnSinglePage></x-pagination>"
+                        }],
+                    "text": "Whether to hide pager when there is only one page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-on-single-page",
+                "defaultValue": "false"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination pageSize={50}></x-pagination>"
+                        }],
+                    "text": "Number of data items per page (controlled)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "page-size"
+            },
+            "pageSizeOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number[]}"
+                        }, {
+                            "name": "default",
+                            "text": "[10, 20, 50, 100]"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination pageSizeOptions={[10, 20, 50, 100]}></x-pagination>"
+                        }],
+                    "text": "Options providing selectable page sizes."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 20, 50, 100]"
+            },
+            "totalBoundaryShowSizeChanger": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "50"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination totalBoundaryShowSizeChanger={100}></x-pagination>"
+                        }],
+                    "text": "Minimum total items required to automatically show the size changer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-boundary-show-size-changer",
+                "defaultValue": "50"
+            },
+            "showSizeChanger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination showSizeChanger={true}></x-pagination>"
+                        }],
+                    "text": "Force show/hide size changer regardless of total items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-size-changer"
+            },
+            "showQuickJumper": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | PaginationQuickJumper",
+                    "resolved": "PaginationQuickJumper | boolean",
+                    "references": {
+                        "PaginationQuickJumper": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationQuickJumper",
+                            "referenceLocation": "PaginationQuickJumper"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean | PaginationQuickJumper}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination showQuickJumper></x-pagination>"
+                        }],
+                    "text": "Show quick jumper to skip to a specific page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-quick-jumper",
+                "defaultValue": "false"
+            },
+            "showTotal": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(total: number, range: [number, number]) => string",
+                    "resolved": "(total: number, range: [number, number]) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{(total: number, range: [number, number]) => string}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}></x-pagination>"
+                        }],
+                    "text": "Function to customize the display of total items and current range."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "showLessItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination showLessItems></x-pagination>"
+                        }],
+                    "text": "Show fewer items in the pager (useful for narrow spaces)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-less-items",
+                "defaultValue": "false"
+            },
+            "showTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination showTitle={false}></x-pagination>"
+                        }],
+                    "text": "Whether to show title attributes on the pager elements."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-title",
+                "defaultValue": "true"
+            },
+            "simple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | PaginationSimple",
+                    "resolved": "PaginationSimple | boolean",
+                    "references": {
+                        "PaginationSimple": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationSimple",
+                            "referenceLocation": "PaginationSimple"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean | PaginationSimple}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination simple></x-pagination>"
+                        }],
+                    "text": "Enable simple mode navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "simple",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "PaginationSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationSize",
+                            "referenceLocation": "PaginationSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{PaginationSize}"
+                        }, {
+                            "name": "default",
+                            "text": "'middle'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination size=\"small\"></x-pagination>"
+                        }],
+                    "text": "Component size: 'small', 'middle', or 'large'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{number}"
+                        }, {
+                            "name": "default",
+                            "text": "0"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination total={120}></x-pagination>"
+                        }],
+                    "text": "Total number of data items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "PaginationAlign": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationAlign",
+                            "referenceLocation": "PaginationAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{PaginationAlign}"
+                        }, {
+                            "name": "default",
+                            "text": "'start'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination align=\"center\"></x-pagination>"
+                        }],
+                    "text": "Alignment of the pagination container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'start'"
+            },
+            "responsive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination responsive></x-pagination>"
+                        }],
+                    "text": "If set, pagination will be responsive and adjust its UI."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "responsive",
+                "defaultValue": "false"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationClassNames",
+                    "resolved": "PaginationClassNames",
+                    "references": {
+                        "PaginationClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationClassNames",
+                            "referenceLocation": "PaginationClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{PaginationClassNames}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination classNames={{ root: 'my-pg', item: 'pg-item' }}></x-pagination>"
+                        }],
+                    "text": "Custom CSS class names for internal sub-components."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaginationStyles",
+                    "resolved": "PaginationStyles",
+                    "references": {
+                        "PaginationStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationStyles",
+                            "referenceLocation": "PaginationStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{PaginationStyles}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-pagination styles={{ root: 'margin-top: 10px;' }}></x-pagination>"
+                        }],
+                    "text": "Inline styles for internal sub-components."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalCurrent": {},
+            "internalPageSize": {},
+            "jumpValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xChange"
+                        }],
+                    "text": "Emitted when current page number or page size is changed.\r\nUseful for triggering data re-fetching."
+                },
+                "complexType": {
+                    "original": "PaginationChangeEventDetail",
+                    "resolved": "PaginationChangeEventDetail",
+                    "references": {
+                        "PaginationChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationChangeEventDetail",
+                            "referenceLocation": "PaginationChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xShowSizeChange",
+                "name": "xShowSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "xShowSizeChange"
+                        }],
+                    "text": "Emitted specifically when the page size is changed via the selector."
+                },
+                "complexType": {
+                    "original": "PaginationShowSizeChangeEventDetail",
+                    "resolved": "PaginationShowSizeChangeEventDetail",
+                    "references": {
+                        "PaginationShowSizeChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-pagination/types.ts::PaginationShowSizeChangeEventDetail",
+                            "referenceLocation": "PaginationShowSizeChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "current",
+                "methodName": "watchCurrent"
+            }, {
+                "propName": "pageSize",
+                "methodName": "watchPageSize"
+            }];
+    }
+}