@nova-design-system/nova-webcomponents 3.24.0 → 3.25.0

package/dist/collection/components/nv-paginationtable/nv-paginationtable.js

@@ -0,0 +1,537 @@
+import { Host, h, } from "@stencil/core";
+import { interpolate, isFirstPage, isLastPage, generatePageSizeOptions, } from "./nv-paginationtable.utils";
+/**
+ * @slot default - Child content of the component.
+ */
+export class NvPaginationtable {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates which page of table results is currently being shown, using a
+         * zero-based index.
+         */
+        this.pageIndex = 0;
+        /**
+         * Sets how many results appear at once before moving to the next page.
+         */
+        this.pageSize = 10;
+        /**
+         * Total number of pages available.
+         */
+        this.pageCount = 0;
+        /**
+         * Total number of rows in the dataset.
+         */
+        this.rowCount = 0;
+        /**
+         * Hides all arrow navigation controls when set to true.
+         * By default, all controls are visible.
+         */
+        this.hideControls = false;
+        /**
+         * Hides the previous/next arrow controls when set to true.
+         */
+        this.hidePrevNext = false;
+        /**
+         * Hides the first/last arrow controls when set to true.
+         */
+        this.hideFirstLast = false;
+        /**
+         * Label template for the page indicator.
+         * Supports placeholders: {pageIndex}, {pageCount}.
+         * Note: {pageIndex} is displayed as 1-based to users (internally 0-based).
+         * @example 'Page {pageIndex} of {pageCount}' → 'Page 1 of 14'
+         */
+        this.labelPage = 'Page {pageIndex} of {pageCount}';
+        /**
+         * Label template for the total row count display.
+         * Supports placeholder: {rowCount}.
+         * @example 'Total: {rowCount} rows' → 'Total: 254 rows'
+         */
+        this.labelTotal = 'Total: {rowCount} rows';
+        /**
+         * Label template for the page size dropdown options.
+         * Supports placeholder: {pageSize}.
+         * @example '{pageSize} per page' → '10 per page'
+         */
+        this.labelPageSizeOption = '{pageSize} per page';
+        /**
+         * Handles the page size change from the dropdown.
+         * @param {CustomEvent<string>} event - The value changed event from nv-fieldselect.
+         */
+        this.handlePageSizeChange = (event) => {
+            const newSize = Number(event.detail);
+            if (newSize > 0) {
+                this.pageSize = newSize;
+            }
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Navigates to the first page.
+     */
+    async firstPage() {
+        this.pageIndex = 0;
+    }
+    /**
+     * Navigates to the previous page.
+     */
+    async previousPage() {
+        if (this.pageIndex > 0) {
+            this.pageIndex = this.pageIndex - 1;
+        }
+    }
+    /**
+     * Navigates to the next page.
+     */
+    async nextPage() {
+        if (this.pageIndex < this.pageCount - 1) {
+            this.pageIndex = this.pageIndex + 1;
+        }
+    }
+    /**
+     * Navigates to the last page.
+     */
+    async lastPage() {
+        this.pageIndex = this.pageCount - 1;
+    }
+    /**
+     * Navigates to a specific page by index.
+     * @param {number} index The zero-based page index to navigate to.
+     */
+    async setPageIndex(index) {
+        if (index >= 0 && index < this.pageCount) {
+            this.pageIndex = index;
+        }
+    }
+    /**
+     * Changes the number of rows displayed per page.
+     * @param {number} size The new page size.
+     */
+    async setPageSize(size) {
+        if (size > 0) {
+            this.pageSize = size;
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to pageIndex and emits the pageIndexChanged event.
+     * @param {number} newValue The new page index value.
+     */
+    onPageIndexChange(newValue) {
+        this.pageIndexChanged.emit(newValue);
+    }
+    /**
+     * Watches for changes to pageSize and emits the pageSizeChanged event.
+     * @param {number} newValue The new page size value.
+     */
+    onPageSizeChange(newValue) {
+        this.pageSizeChanged.emit(newValue);
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const atFirstPage = isFirstPage(this.pageIndex);
+        const atLastPage = isLastPage(this.pageIndex, this.pageCount);
+        // Use fallback values to handle undefined props (can happen when frameworks pass undefined explicitly)
+        const pageLabel = interpolate(this.labelPage, { pageIndex: this.pageIndex + 1, pageCount: this.pageCount }, 'Page {pageIndex} of {pageCount}');
+        const totalLabel = interpolate(this.labelTotal, { rowCount: this.rowCount }, 'Total: {rowCount} rows');
+        const pageSizeOptions = generatePageSizeOptions(this.labelPageSizeOption ?? '{pageSize} per page');
+        return (h(Host, { key: '1c032ac283f0b259804d05df2d82c496a4ba2590' }, !this.hideControls && (h("div", { key: '3d1bdf1d99583a1dfeef2c9b2f8d120862e5f771', "data-scope": "controls" }, !this.hideFirstLast && (h("nv-iconbutton", { key: '353464b98b5af27b9932f7ada5358a5fe3886ca5', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: '3196094e7ccff072e292c4e7ba7fe1d23d9a74f9', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (h("nv-iconbutton", { key: 'c9a82233745d41c812ba9d18ac133e54dd183435', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (h("nv-iconbutton", { key: '649b89169098230931ec30f205548104342e4d8c', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), h("span", { key: '3e1311af13227e797ad6914ab70274e554a2f8b2', "data-scope": "page-label" }, pageLabel), h("span", { key: '63d020bd24a353d47dc3097146b2afd9b31de612', "data-scope": "total" }, totalLabel), h("div", { key: '046597be91d6d83551557592aedb799e3d86da4c', "data-scope": "per-page" }, h("nv-fieldselect", { key: '8d661cb40826a34d323d07bb994b5019eb0127fc', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), h("slot", { key: '385e77f742cb4501d26706b08986825d817fd725' })));
+    }
+    static get is() { return "nv-paginationtable"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-paginationtable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-paginationtable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "pageIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates which page of table results is currently being shown, using a\nzero-based index."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-index",
+                "defaultValue": "0"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets how many results appear at once before moving to the next page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "pageCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of pages available."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-count",
+                "defaultValue": "0"
+            },
+            "rowCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of rows in the dataset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-count",
+                "defaultValue": "0"
+            },
+            "hideControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides all arrow navigation controls when set to true.\nBy default, all controls are visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-controls",
+                "defaultValue": "false"
+            },
+            "hidePrevNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the previous/next arrow controls when set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-prev-next",
+                "defaultValue": "false"
+            },
+            "hideFirstLast": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the first/last arrow controls when set to true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-first-last",
+                "defaultValue": "false"
+            },
+            "labelPage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "'Page {pageIndex} of {pageCount}' \u2192 'Page 1 of 14'"
+                        }],
+                    "text": "Label template for the page indicator.\nSupports placeholders: {pageIndex}, {pageCount}.\nNote: {pageIndex} is displayed as 1-based to users (internally 0-based)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-page",
+                "defaultValue": "'Page {pageIndex} of {pageCount}'"
+            },
+            "labelTotal": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "'Total: {rowCount} rows' \u2192 'Total: 254 rows'"
+                        }],
+                    "text": "Label template for the total row count display.\nSupports placeholder: {rowCount}."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-total",
+                "defaultValue": "'Total: {rowCount} rows'"
+            },
+            "labelPageSizeOption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "'{pageSize} per page' \u2192 '10 per page'"
+                        }],
+                    "text": "Label template for the page size dropdown options.\nSupports placeholder: {pageSize}."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label-page-size-option",
+                "defaultValue": "'{pageSize} per page'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pageIndexChanged",
+                "name": "pageIndexChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "pageIndex"
+                        }],
+                    "text": "Emitted when the page index changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "pageSizeChanged",
+                "name": "pageSizeChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the page size changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "firstPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates to the first page.",
+                    "tags": []
+                }
+            },
+            "previousPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates to the previous page.",
+                    "tags": []
+                }
+            },
+            "nextPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates to the next page.",
+                    "tags": []
+                }
+            },
+            "lastPage": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates to the last page.",
+                    "tags": []
+                }
+            },
+            "setPageIndex": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": "The zero-based page index to navigate to."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates to a specific page by index.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "index The zero-based page index to navigate to."
+                        }]
+                }
+            },
+            "setPageSize": {
+                "complexType": {
+                    "signature": "(size: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "size",
+                            "type": "number",
+                            "docs": "The new page size."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Changes the number of rows displayed per page.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "size The new page size."
+                        }]
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "pageIndex",
+                "methodName": "onPageIndexChange"
+            }, {
+                "propName": "pageSize",
+                "methodName": "onPageSizeChange"
+            }];
+    }
+}

package/dist/collection/components/nv-paginationtable/nv-paginationtable.utils.js

@@ -0,0 +1,64 @@
+/**
+ * Pagination table utility functions for nv-paginationtable component
+ *
+ * This module contains pure utility functions for label interpolation
+ * and pagination calculations.
+ */
+/**
+ * Interpolates a template string by replacing placeholders with values.
+ * Placeholders are defined using curly braces: {key}
+ *
+ * @param {string} template - The template string with placeholders
+ * @param {InterpolationValues} values - Object containing key-value pairs for replacement
+ * @param {string} [fallback] - Optional fallback template if template is undefined/null
+ * @returns {string} The interpolated string, or empty string if no template and no fallback
+ *
+ * @example
+ * interpolate('Page {pageIndex} of {pageCount}', { pageIndex: 1, pageCount: 14 })
+ * // Returns: 'Page 1 of 14'
+ */
+export function interpolate(template, values, fallback) {
+    const effectiveTemplate = template ?? fallback ?? '';
+    if (!effectiveTemplate)
+        return '';
+    return effectiveTemplate.replace(/\{(\w+)\}/g, (match, key) => {
+        return key in values ? String(values[key]) : match;
+    });
+}
+/**
+ * Checks if navigation to the first/previous page is possible
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @returns {boolean} True if at the first page
+ */
+export function isFirstPage(pageIndex) {
+    return pageIndex === 0;
+}
+/**
+ * Checks if navigation to the last/next page is possible
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @param {number} pageCount - Total number of pages
+ * @returns {boolean} True if at the last page
+ */
+export function isLastPage(pageIndex, pageCount) {
+    return pageIndex >= pageCount - 1;
+}
+/**
+ * Default page size values
+ */
+export const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+/**
+ * Generates page size options with translated labels.
+ * @param {string} labelTemplate - Template string for the label (e.g., '{pageSize} per page')
+ * @param {number[]} sizes - Array of page size values
+ * @returns {PageSizeOption[]} Array of page size options with interpolated labels
+ *
+ * @example
+ * generatePageSizeOptions('{pageSize} per page', [10, 25, 50])
+ * // Returns: [{ label: '10 per page', value: '10' }, { label: '25 per page', value: '25' }, ...]
+ */
+export function generatePageSizeOptions(labelTemplate, sizes = DEFAULT_PAGE_SIZES) {
+    return sizes.map(size => ({
+        label: interpolate(labelTemplate, { pageSize: size }),
+        value: String(size),
+    }));
+}