@nova-design-system/nova-webcomponents 3.26.0 → 3.28.0

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.docs.js

@@ -0,0 +1,278 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvPaginationNavDocs = {
+    component: 'nv-pagination-nav',
+    subcomponents: ['nv-button', 'nv-iconbutton', 'nv-icon'],
+    badge: 'beta',
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic pagination navigation with default settings. Shows a sliding window of page numbers with Previous/Next buttons. The component automatically handles button states and provides a clean, accessible navigation experience.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Previous',
+                nextButtonLabel: 'Next',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // currentPage
+        {
+            name: nameof(x => x.currentPage),
+            description: 'The currently active page number (1-based index). The active page is visually highlighted with an active state. Use this prop to control which page is selected, typically bound to your application state.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // totalCount
+        {
+            name: nameof(x => x.totalCount),
+            description: 'Total number of items to paginate. Works with pageSize to calculate the total number of pages (totalCount / pageSize). In this example: 250 items ÷ 10 per page = 25 pages.',
+            args: {
+                currentPage: 1,
+                totalCount: 250,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // pageSize
+        {
+            name: nameof(x => x.pageSize),
+            description: 'Number of items per page. Works with totalCount to determine total pages. Smaller values create more pages. In this example: 100 items ÷ 25 per page = 4 pages.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 25,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // previousButtonLabel
+        {
+            name: nameof(x => x.previousButtonLabel),
+            description: 'Customize the label for the previous navigation button. Use this for internationalization (i18n) to display text in different languages. Default is "Previous".',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Précédent',
+                nextButtonLabel: 'Suivant',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // nextButtonLabel
+        {
+            name: nameof(x => x.nextButtonLabel),
+            description: 'Customize the label for the next navigation button. Use this for internationalization (i18n) to display text in different languages. Default is "Next".',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Zurück',
+                nextButtonLabel: 'Weiter',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numStartZoneButtons
+        {
+            name: nameof(x => x.numStartZoneButtons),
+            description: 'Number of page buttons to show at the start of the pagination. Combined with numEndZoneButtons, this determines the total number of visible page buttons (default: 2). Increasing this value shows more pages at the beginning.',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 3,
+                numEndZoneButtons: 2,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numEndZoneButtons
+        {
+            name: nameof(x => x.numEndZoneButtons),
+            description: 'Number of page buttons to show at the end of the pagination. Combined with numStartZoneButtons, this determines the total number of visible page buttons (default: 2). Increasing this value shows more pages at the end.',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 2,
+                numEndZoneButtons: 3,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // numMiddleButtons
+        {
+            name: nameof(x => x.numMiddleButtons),
+            description: 'Number of page buttons to show in the middle zone around the current page (only used when showMiddleZone is true)',
+            args: {
+                currentPage: 10,
+                totalCount: 200,
+                pageSize: 10,
+                numStartZoneButtons: 2,
+                numEndZoneButtons: 2,
+                numMiddleButtons: 5,
+                showMiddleZone: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // isOnlyIcon
+        {
+            name: nameof(x => x.isOnlyIcon),
+            description: 'Display Previous/Next navigation buttons as icon buttons for a more compact layout. Page number buttons always use regular buttons.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                isOnlyIcon: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // showMiddleZone
+        {
+            name: nameof(x => x.showMiddleZone),
+            description: 'When true, shows a middle zone with the current page and two ellipses. When false (default), uses a sliding window that keeps a constant number of buttons while ensuring the current page is always visible.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+                showMiddleZone: true,
+                numMiddleButtons: 3,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SlidingWindow
+        {
+            name: 'SlidingWindow',
+            description: 'Default behavior with sliding window (showMiddleZone=false). The pagination window slides to keep the current page visible while maintaining a constant number of buttons.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+                showMiddleZone: false,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // ManyPages
+        {
+            name: 'ManyPages',
+            description: 'Pagination with many pages showing the sliding window behavior (default). The window slides to include the current page while keeping a constant number of buttons.',
+            args: {
+                currentPage: 15,
+                totalCount: 500,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // FewPages
+        {
+            name: 'FewPages',
+            description: 'When the total number of pages is small (4 pages or fewer), all page numbers are displayed without ellipses. This provides direct access to all pages without any truncation.',
+            args: {
+                currentPage: 2,
+                totalCount: 35,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // FirstPage
+        {
+            name: 'FirstPage',
+            description: 'Edge case demonstrating the first page state. The Previous button is automatically disabled to prevent navigation beyond the first page, providing a clear visual indicator that users are at the start.',
+            args: {
+                currentPage: 1,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // LastPage
+        {
+            name: 'LastPage',
+            description: 'Edge case demonstrating the last page state. The Next button is automatically disabled to prevent navigation beyond the last page, providing a clear visual indicator that users are at the end.',
+            args: {
+                currentPage: 10,
+                totalCount: 100,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SinglePage
+        {
+            name: 'SinglePage',
+            description: 'Edge case with only one page of data. Both Previous and Next buttons are disabled since there are no other pages to navigate to. This is common when filtering reduces results to a single page.',
+            args: {
+                currentPage: 1,
+                totalCount: 8,
+                pageSize: 10,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // CustomZones
+        {
+            name: 'CustomZones',
+            description: 'Advanced example with minimal zone configuration (1 start + 1 end button). This creates a very compact pagination display, showing only 2 page buttons at a time plus the current page when sliding. Useful for space-constrained layouts.',
+            args: {
+                currentPage: 12,
+                totalCount: 300,
+                pageSize: 10,
+                numStartZoneButtons: 1,
+                numEndZoneButtons: 1,
+                numMiddleButtons: 5,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // LargeDataset
+        {
+            name: 'LargeDataset',
+            description: 'Demonstrates pagination with a very large dataset (10,000 items across 100 pages). The sliding window behavior efficiently handles large page counts by showing only a small, constant number of page buttons while maintaining easy navigation.',
+            args: {
+                currentPage: 50,
+                totalCount: 10000,
+                pageSize: 100,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // SmallPageSize
+        {
+            name: 'SmallPageSize',
+            description: 'Shows how a smaller page size creates more pages from the same dataset. 100 items with 5 per page creates 20 pages instead of 10. Useful for scenarios where you want to display fewer items at once (mobile views, detailed cards, etc.).',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 5,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // Internationalization
+        {
+            name: 'Internationalization',
+            description: 'Complete example showing how to localize the pagination component for different languages. Use previousButtonLabel and nextButtonLabel props to translate the navigation buttons. This example uses French labels.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                previousButtonLabel: 'Précédent',
+                nextButtonLabel: 'Suivant',
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+        // IconButtonMode
+        {
+            name: 'IconButtonMode',
+            description: 'Compact navigation with Previous/Next as icon buttons. Page numbers remain as regular buttons for readability.',
+            args: {
+                currentPage: 5,
+                totalCount: 100,
+                pageSize: 10,
+                isOnlyIcon: true,
+            },
+            template: h("nv-pagination-nav", { "data-storybook-args": true }),
+        },
+    ],
+};
+export default NvPaginationNavDocs;

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.js

@@ -0,0 +1,359 @@
+import { Host, h, } from "@stencil/core";
+import { calculatePaginationRange } from "./nv-pagination-nav.utils";
+/**
+ * A pagination navigation component that displays page numbers with Previous/Next controls.
+ * Use the isOnlyIcon prop to display Previous/Next as icon buttons for compact layouts.
+ */
+export class NvPaginationNav {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Label for the previous button.
+         */
+        this.previousButtonLabel = 'Previous';
+        /**
+         * Label for the next button.
+         */
+        this.nextButtonLabel = 'Next';
+        /**
+         * Number of page buttons to show at the start of the pagination range.
+         */
+        this.numStartZoneButtons = 2;
+        /**
+         * Number of page buttons to show at the end of the pagination range.
+         */
+        this.numEndZoneButtons = 2;
+        /**
+         * Number of page buttons to show in the middle zone around the current page.
+         */
+        this.numMiddleButtons = 1;
+        /**
+         * Current page number (1-based index).
+         */
+        this.currentPage = 1;
+        /**
+         * Total number of items to paginate.
+         */
+        this.totalCount = 100;
+        /**
+         * Number of items per page.
+         */
+        this.pageSize = 10;
+        /**
+         * If true, the Previous/Next navigation buttons will be displayed as icon buttons.
+         * Page number buttons always use regular buttons.
+         */
+        this.isOnlyIcon = false;
+        /**
+         * If true, shows the middle zone with the current page when it's not in start/end zones.
+         * If false (default), only shows one ellipsis between start and end zones (simpler pagination).
+         */
+        this.showMiddleZone = false;
+        /**
+         * Handles page change events.
+         * @param {number} pageNumber The page number to navigate to.
+         */
+        this.handlePageChange = (pageNumber) => {
+            if (pageNumber < 1 ||
+                pageNumber > this.totalPages ||
+                pageNumber === this.currentPage) {
+                return;
+            }
+            this.currentPage = pageNumber;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Calculates the total number of pages based on totalCount and pageSize.
+     * @returns {number} The total number of pages.
+     */
+    get totalPages() {
+        return Math.ceil(this.totalCount / this.pageSize);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to currentPage and emits the currentPageChanged event.
+     * @param {number} newValue The new current page value.
+     */
+    onCurrentPageChange(newValue) {
+        // Validate and constrain currentPage
+        const constrainedValue = Math.max(1, Math.min(newValue, this.totalPages));
+        if (constrainedValue !== newValue) {
+            this.currentPage = constrainedValue;
+            return;
+        }
+        this.currentPageChanged.emit(newValue);
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders a single page button.
+     * @param {number} pageNumber The page number to render.
+     * @returns {JSX.Element} The rendered page button element.
+     */
+    renderPageButton(pageNumber) {
+        const isCurrentPage = pageNumber === this.currentPage;
+        return (h("li", { key: pageNumber, "data-scope": "page-button" }, h("nv-button", { size: "md", emphasis: "lower", active: isCurrentPage, onClick: () => this.handlePageChange(pageNumber), "data-page": pageNumber, "data-current": isCurrentPage ? 'true' : undefined }, pageNumber)));
+    }
+    render() {
+        const isFirstPage = this.currentPage === 1;
+        const isLastPage = this.currentPage === this.totalPages;
+        return (h(Host, { key: 'b2255fce4e03cee8ff370086aac31df5c69d275d' }, h("nav", { key: 'a136b7193f9b00a68e6ee626802dee19fd762531', "data-scope": "pagination-nav", "aria-label": "Pagination navigation" }, this.isOnlyIcon ? (h("nv-iconbutton", { name: "chevron-left", size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-iconbutton", "aria-label": this.previousButtonLabel })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isFirstPage, onClick: () => this.handlePageChange(this.currentPage - 1), "data-scope": "previous-button" }, h("nv-icon", { slot: "leading-icon", name: "chevron-left" }), this.previousButtonLabel)), h("ol", { key: '5bebe0e3f5c8f1799ed8980752fbed7aadbcac01', "data-scope": "page-list" }, calculatePaginationRange({
+            currentPage: this.currentPage,
+            totalCount: this.totalCount,
+            pageSize: this.pageSize,
+            numStartZoneButtons: this.numStartZoneButtons,
+            numEndZoneButtons: this.numEndZoneButtons,
+            numMiddleButtons: this.numMiddleButtons,
+            showMiddleZone: this.showMiddleZone,
+        }).map(item => typeof item === 'number' ? (this.renderPageButton(item)) : (h("li", { key: `ellipsis-${item}`, "data-scope": "ellipsis", "aria-hidden": "true" }, h("span", null, item))))), this.isOnlyIcon ? (h("nv-iconbutton", { name: "chevron-right", size: "md", emphasis: "lower", disabled: isLastPage, onClick: () => this.handlePageChange(this.currentPage + 1), "data-scope": "next-iconbutton", "aria-label": this.nextButtonLabel })) : (h("nv-button", { size: "md", emphasis: "lower", disabled: isLastPage, onClick: () => this.handlePageChange(this.currentPage + 1), "data-scope": "next-button" }, this.nextButtonLabel, h("nv-icon", { slot: "trailing-icon", name: "chevron-right" }))))));
+    }
+    static get is() { return "nv-pagination-nav"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-pagination-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-pagination-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "previousButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the previous button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "previous-button-label",
+                "defaultValue": "'Previous'"
+            },
+            "nextButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the next button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "next-button-label",
+                "defaultValue": "'Next'"
+            },
+            "numStartZoneButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show at the start of the pagination range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-start-zone-buttons",
+                "defaultValue": "2"
+            },
+            "numEndZoneButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show at the end of the pagination range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-end-zone-buttons",
+                "defaultValue": "2"
+            },
+            "numMiddleButtons": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of page buttons to show in the middle zone around the current page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "num-middle-buttons",
+                "defaultValue": "1"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current page number (1-based index)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current-page",
+                "defaultValue": "1"
+            },
+            "totalCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items to paginate."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "total-count",
+                "defaultValue": "100"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of items per page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "page-size",
+                "defaultValue": "10"
+            },
+            "isOnlyIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the Previous/Next navigation buttons will be displayed as icon buttons.\nPage number buttons always use regular buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-only-icon",
+                "defaultValue": "false"
+            },
+            "showMiddleZone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, shows the middle zone with the current page when it's not in start/end zones.\nIf false (default), only shows one ellipsis between start and end zones (simpler pagination)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-middle-zone",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "currentPageChanged",
+                "name": "currentPageChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "currentPage"
+                        }],
+                    "text": "Emitted when the current page changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "onCurrentPageChange"
+            }];
+    }
+}