@styloviz/pagination 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 StyloViz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,56 @@
+# @styloviz/pagination
+
+> Smart page-window with ellipsis, a page-size selector, 3 variants and 3 sizes.
+
+Part of the **StyloViz UI Kit** — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, `OnPush`, strongly typed, dark-mode ready.
+
+## Installation
+
+```bash
+npm install @styloviz/core @styloviz/pagination
+```
+
+Requires `@angular/core` and `@angular/common` >= 21. `@styloviz/core` is a peer dependency shared by every component. Prefer everything at once? `@styloviz/all` installs the whole free tier in one command.
+
+## Usage
+
+```ts
+import { SvPaginationComponent } from '@styloviz/pagination';
+
+@Component({
+  standalone: true,
+  imports: [SvPaginationComponent],
+  template: `
+    <sv-pagination [totalItems]="240" [pageSize]="20" [currentPage]="page" (pageChange)="page = $event" />
+  `,
+})
+export class DemoComponent {}
+```
+
+## Inputs
+
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `totalItems` | `number` | `0` | Total number of items across all pages. |
+| `pageSize` | `number (two-way)` | `10` | Number of items per page. Use `[(pageSize)]` for two-way binding. |
+| `currentPage` | `number (two-way)` | `1` | 1-based current page index. Use `[(currentPage)]` for two-way binding. |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Options shown in the page-size `<select>`. Empty array hides the selector entirely. |
+| `variant` | `PaginationVariant` | `'default'` | Visual variant. |
+| `size` | `PaginationSize` | `'md'` | Control size. |
+| `showSummary` | `boolean` | `true` | Show total-item count summary (e.g. "Showing 1–10 of 234"). |
+| `ariaLabel` | `string` | `'Pagination'` | Accessible label for the navigation landmark. |
+| `customClass` | `string` | `''` | Additional CSS classes on the root wrapper. |
+
+## Outputs
+
+| Output | Type | Description |
+| --- | --- | --- |
+| `pageChange` | `number` | Emitted when the user navigates to a different page. |
+
+## Documentation
+
+Full API reference and live demos: https://styloviz.dev/docs/pagination
+
+## License
+
+MIT

package/fesm2022/styloviz-pagination.mjs

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { input, model, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Pagination — A fully-featured page navigator for tables, card grids, and lists.
+ *
+ * Features:
+ * - Page-window with leading/trailing ellipsis (smart truncation)
+ * - First / Previous / Next / Last buttons
+ * - Optional page-size selector
+ * - 3 variants: default (full controls) · simple (prev/next + label) · compact (minimal)
+ * - 3 sizes: sm · md · lg
+ * - Two-way `currentPage` binding via `model()`
+ * - `pageChange` and `pageSizeChange` outputs
+ * - Full dark-mode support
+ * - Accessible: `aria-label`, `aria-current="page"`, disabled states
+ */
+class SvPaginationComponent {
+    // ── Inputs ────────────────────────────────────────────────────────────────
+    /** Total number of items across all pages. */
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /** Number of items per page. Use `[(pageSize)]` for two-way binding. */
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** 1-based current page index. Use `[(currentPage)]` for two-way binding. */
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    /**
+     * Options shown in the page-size `<select>`.
+     * Empty array hides the selector entirely. @default [10, 25, 50, 100]
+     */
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /** Visual variant. @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Control size. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Show total-item count summary (e.g. "Showing 1–10 of 234"). @default true */
+    showSummary = input(true, ...(ngDevMode ? [{ debugName: "showSummary" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the navigation landmark. @default 'Pagination' */
+    ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Additional CSS classes on the root wrapper. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ───────────────────────────────────────────────────────────────
+    /** Emitted when the user navigates to a different page. */
+    pageChange = output();
+    // Note: `pageSize = model<number>(10)` already auto-emits `pageSizeChange`
+    // when pageSize.set() is called — no separate output needed here.
+    // ── Computed ──────────────────────────────────────────────────────────────
+    totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /** First item index (1-based) on the current page. */
+    rangeStart = computed(() => Math.min((this.currentPage() - 1) * this.pageSize() + 1, this.totalItems()), ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
+    /** Last item index (1-based) on the current page. */
+    rangeEnd = computed(() => Math.min(this.currentPage() * this.pageSize(), this.totalItems()), ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
+    hasPrev = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrev" }] : /* istanbul ignore next */ []));
+    hasNext = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+    /**
+     * Visible page numbers in the page window, with -1 as an ellipsis marker.
+     * Always shows: first, last, currentPage ±1, with ellipsis for gaps > 1.
+     */
+    pageWindow = computed(() => {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (total <= 7)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const pages = [];
+        const add = (n) => { if (!pages.includes(n))
+            pages.push(n); };
+        add(1);
+        if (current > 3)
+            pages.push(-1); // left ellipsis
+        for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++)
+            add(p);
+        if (current < total - 2)
+            pages.push(-1); // right ellipsis
+        add(total);
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "pageWindow" }] : /* istanbul ignore next */ []));
+    // ── Size maps ─────────────────────────────────────────────────────────────
+    btnClass = computed(() => {
+        const s = this.size();
+        return {
+            sm: 'h-7 min-w-7 px-1.5 text-xs',
+            md: 'h-8 min-w-8 px-2 text-sm',
+            lg: 'h-10 min-w-10 px-3 text-sm',
+        }[s];
+    }, ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
+    textClass = computed(() => ({
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-sm',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
+    // ── Page button class helper ───────────────────────────────────────────────
+    pageButtonClass(page) {
+        const isActive = page === this.currentPage();
+        const base = [
+            'inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-100',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',
+            this.btnClass(),
+        ];
+        if (isActive) {
+            base.push('bg-primary-600 text-white dark:bg-primary-500');
+        }
+        else {
+            base.push('text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700');
+        }
+        return base.join(' ');
+    }
+    navButtonClass(disabled) {
+        return [
+            'inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-100',
+            'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',
+            this.btnClass(),
+            disabled
+                ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
+                : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',
+        ].join(' ');
+    }
+    // ── Navigation ────────────────────────────────────────────────────────────
+    goTo(page) {
+        const clamped = Math.max(1, Math.min(page, this.totalPages()));
+        if (clamped === this.currentPage())
+            return;
+        this.currentPage.set(clamped);
+        this.pageChange.emit(clamped);
+    }
+    onPageSizeChange(value) {
+        this.pageSize.set(Number(value)); // model auto-emits pageSizeChange
+        this.currentPage.set(1);
+        this.pageChange.emit(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvPaginationComponent, isStandalone: true, selector: "sv-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showSummary: { classPropertyName: "showSummary", publicName: "showSummary", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange" }, ngImport: i0, template: "<!-- Root wrapper -->\n<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center gap-3',\n    variant() === 'compact' ? 'justify-center' : 'justify-between',\n    customClass()\n  ]\"\n>\n\n  <!-- \u2500\u2500 Summary + page-size selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (variant() !== 'compact') {\n    <div class=\"flex flex-wrap items-center gap-3\">\n\n      @if (showSummary() && totalItems() > 0) {\n        <p [ngClass]=\"['text-gray-500 dark:text-gray-400', textClass()]\">\n          Showing\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeStart() }}</span>\n          \u2013\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeEnd() }}</span>\n          of\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ totalItems() }}</span>\n        </p>\n      }\n\n      @if (pageSizeOptions().length > 0) {\n        <div class=\"flex items-center gap-1.5\">\n          <label [ngClass]=\"['text-gray-500 dark:text-gray-400 whitespace-nowrap', textClass()]\"\n                 for=\"page-size-select\">Rows per page</label>\n          <select\n            id=\"page-size-select\"\n            [ngModel]=\"pageSize()\"\n            (ngModelChange)=\"onPageSizeChange($event)\"\n            [ngClass]=\"[\n              'rounded-lg border border-gray-200 bg-white text-gray-900',\n              'dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100',\n              'focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20',\n              textClass(),\n              size() === 'sm' ? 'h-7 px-2 py-0' : size() === 'lg' ? 'h-10 px-3 py-1' : 'h-8 px-2.5 py-0.5'\n            ]\"\n          >\n            @for (opt of pageSizeOptions(); track opt) {\n              <option [ngValue]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n      }\n\n    </div>\n  }\n\n  <!-- \u2500\u2500 Page controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"flex items-center gap-1\">\n\n      @if (variant() === 'simple') {\n        <!-- Simple variant: prev / label / next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <li>\n          <span [ngClass]=\"['px-3 text-gray-600 dark:text-gray-300', textClass()]\">\n            Page {{ currentPage() }} of {{ totalPages() }}\n          </span>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n      } @else {\n        <!-- Default / compact: full page window -->\n\n        <!-- First -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasPrev())\"\n              [disabled]=\"!hasPrev()\"\n              (click)=\"goTo(1)\"\n              aria-label=\"First page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M11 17l-5-5 5-5M18 17l-5-5 5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n        <!-- Prev -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Page numbers -->\n        @for (page of pageWindow(); track $index) {\n          <li>\n            @if (page === -1) {\n              <!-- Ellipsis -->\n              <span [ngClass]=\"['inline-flex items-center justify-center text-gray-500 dark:text-gray-400', btnClass()]\">\n                &hellip;\n              </span>\n            } @else {\n              <button\n                type=\"button\"\n                [ngClass]=\"pageButtonClass(page)\"\n                [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n                [attr.aria-label]=\"'Page ' + page\"\n                (click)=\"goTo(page)\"\n              >\n                {{ page }}\n              </button>\n            }\n          </li>\n        }\n\n        <!-- Next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Last -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasNext())\"\n              [disabled]=\"!hasNext()\"\n              (click)=\"goTo(totalPages())\"\n              aria-label=\"Last page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M13 17l5-5-5-5M6 17l5-5-5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n      }\n\n    </ul>\n  </nav>\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvPaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-pagination', standalone: true, imports: [NgClass, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Root wrapper -->\n<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center gap-3',\n    variant() === 'compact' ? 'justify-center' : 'justify-between',\n    customClass()\n  ]\"\n>\n\n  <!-- \u2500\u2500 Summary + page-size selector \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (variant() !== 'compact') {\n    <div class=\"flex flex-wrap items-center gap-3\">\n\n      @if (showSummary() && totalItems() > 0) {\n        <p [ngClass]=\"['text-gray-500 dark:text-gray-400', textClass()]\">\n          Showing\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeStart() }}</span>\n          \u2013\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeEnd() }}</span>\n          of\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ totalItems() }}</span>\n        </p>\n      }\n\n      @if (pageSizeOptions().length > 0) {\n        <div class=\"flex items-center gap-1.5\">\n          <label [ngClass]=\"['text-gray-500 dark:text-gray-400 whitespace-nowrap', textClass()]\"\n                 for=\"page-size-select\">Rows per page</label>\n          <select\n            id=\"page-size-select\"\n            [ngModel]=\"pageSize()\"\n            (ngModelChange)=\"onPageSizeChange($event)\"\n            [ngClass]=\"[\n              'rounded-lg border border-gray-200 bg-white text-gray-900',\n              'dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100',\n              'focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20',\n              textClass(),\n              size() === 'sm' ? 'h-7 px-2 py-0' : size() === 'lg' ? 'h-10 px-3 py-1' : 'h-8 px-2.5 py-0.5'\n            ]\"\n          >\n            @for (opt of pageSizeOptions(); track opt) {\n              <option [ngValue]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n      }\n\n    </div>\n  }\n\n  <!-- \u2500\u2500 Page controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"flex items-center gap-1\">\n\n      @if (variant() === 'simple') {\n        <!-- Simple variant: prev / label / next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <li>\n          <span [ngClass]=\"['px-3 text-gray-600 dark:text-gray-300', textClass()]\">\n            Page {{ currentPage() }} of {{ totalPages() }}\n          </span>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n      } @else {\n        <!-- Default / compact: full page window -->\n\n        <!-- First -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasPrev())\"\n              [disabled]=\"!hasPrev()\"\n              (click)=\"goTo(1)\"\n              aria-label=\"First page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M11 17l-5-5 5-5M18 17l-5-5 5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n        <!-- Prev -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Page numbers -->\n        @for (page of pageWindow(); track $index) {\n          <li>\n            @if (page === -1) {\n              <!-- Ellipsis -->\n              <span [ngClass]=\"['inline-flex items-center justify-center text-gray-500 dark:text-gray-400', btnClass()]\">\n                &hellip;\n              </span>\n            } @else {\n              <button\n                type=\"button\"\n                [ngClass]=\"pageButtonClass(page)\"\n                [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n                [attr.aria-label]=\"'Page ' + page\"\n                (click)=\"goTo(page)\"\n              >\n                {{ page }}\n              </button>\n            }\n          </li>\n        }\n\n        <!-- Next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Last -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasNext())\"\n              [disabled]=\"!hasNext()\"\n              (click)=\"goTo(totalPages())\"\n              aria-label=\"Last page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M13 17l5-5-5-5M6 17l5-5-5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n      }\n\n    </ul>\n  </nav>\n\n</div>\n" }]
+        }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSummary", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvPaginationComponent };
+//# sourceMappingURL=styloviz-pagination.mjs.map

package/fesm2022/styloviz-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styloviz-pagination.mjs","sources":["../../../../projects/pagination/src/lib/pagination.component.ts","../../../../projects/pagination/src/lib/pagination.component.html","../../../../projects/pagination/src/styloviz-pagination.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type PaginationSize    = 'sm' | 'md' | 'lg';\nexport type PaginationVariant = 'default' | 'simple' | 'compact';\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Pagination — A fully-featured page navigator for tables, card grids, and lists.\n *\n * Features:\n * - Page-window with leading/trailing ellipsis (smart truncation)\n * - First / Previous / Next / Last buttons\n * - Optional page-size selector\n * - 3 variants: default (full controls) · simple (prev/next + label) · compact (minimal)\n * - 3 sizes: sm · md · lg\n * - Two-way `currentPage` binding via `model()`\n * - `pageChange` and `pageSizeChange` outputs\n * - Full dark-mode support\n * - Accessible: `aria-label`, `aria-current=\"page\"`, disabled states\n */\n@Component({\n  selector: 'sv-pagination',\n  standalone: true,\n  imports: [NgClass, FormsModule],\n  templateUrl: './pagination.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SvPaginationComponent {\n  // ── Inputs ────────────────────────────────────────────────────────────────\n\n  /** Total number of items across all pages. */\n  totalItems = input<number>(0);\n\n  /** Number of items per page. Use `[(pageSize)]` for two-way binding. */\n  pageSize = model<number>(10);\n\n  /** 1-based current page index. Use `[(currentPage)]` for two-way binding. */\n  currentPage = model<number>(1);\n\n  /**\n   * Options shown in the page-size `<select>`.\n   * Empty array hides the selector entirely. @default [10, 25, 50, 100]\n   */\n  pageSizeOptions = input<number[]>([10, 25, 50, 100]);\n\n  /** Visual variant. @default 'default' */\n  variant = input<PaginationVariant>('default');\n\n  /** Control size. @default 'md' */\n  size = input<PaginationSize>('md');\n\n  /** Show total-item count summary (e.g. \"Showing 1–10 of 234\"). @default true */\n  showSummary = input<boolean>(true);\n\n  /** Accessible label for the navigation landmark. @default 'Pagination' */\n  ariaLabel = input<string>('Pagination');\n\n  /** Additional CSS classes on the root wrapper. */\n  customClass = input<string>('');\n\n  // ── Outputs ───────────────────────────────────────────────────────────────\n\n  /** Emitted when the user navigates to a different page. */\n  pageChange = output<number>();\n\n  // Note: `pageSize = model<number>(10)` already auto-emits `pageSizeChange`\n  // when pageSize.set() is called — no separate output needed here.\n\n  // ── Computed ──────────────────────────────────────────────────────────────\n\n  totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())));\n\n  /** First item index (1-based) on the current page. */\n  rangeStart = computed(() => Math.min((this.currentPage() - 1) * this.pageSize() + 1, this.totalItems()));\n\n  /** Last item index (1-based) on the current page. */\n  rangeEnd = computed(() => Math.min(this.currentPage() * this.pageSize(), this.totalItems()));\n\n  hasPrev = computed(() => this.currentPage() > 1);\n  hasNext = computed(() => this.currentPage() < this.totalPages());\n\n  /**\n   * Visible page numbers in the page window, with -1 as an ellipsis marker.\n   * Always shows: first, last, currentPage ±1, with ellipsis for gaps > 1.\n   */\n  pageWindow = computed<number[]>(() => {\n    const total   = this.totalPages();\n    const current = this.currentPage();\n\n    if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);\n\n    const pages: number[] = [];\n    const add = (n: number) => { if (!pages.includes(n)) pages.push(n); };\n\n    add(1);\n    if (current > 3)       pages.push(-1); // left ellipsis\n    for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++) add(p);\n    if (current < total - 2) pages.push(-1); // right ellipsis\n    add(total);\n\n    return pages;\n  });\n\n  // ── Size maps ─────────────────────────────────────────────────────────────\n\n  btnClass = computed<string>(() => {\n    const s = this.size();\n    return {\n      sm: 'h-7 min-w-7 px-1.5 text-xs',\n      md: 'h-8 min-w-8 px-2 text-sm',\n      lg: 'h-10 min-w-10 px-3 text-sm',\n    }[s];\n  });\n\n  textClass = computed<string>(() => ({\n    sm: 'text-xs',\n    md: 'text-sm',\n    lg: 'text-sm',\n  })[this.size()]);\n\n  // ── Page button class helper ───────────────────────────────────────────────\n\n  pageButtonClass(page: number): string {\n    const isActive = page === this.currentPage();\n    const base = [\n      'inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-100',\n      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',\n      this.btnClass(),\n    ];\n    if (isActive) {\n      base.push('bg-primary-600 text-white dark:bg-primary-500');\n    } else {\n      base.push('text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700');\n    }\n    return base.join(' ');\n  }\n\n  navButtonClass(disabled: boolean): string {\n    return [\n      'inline-flex items-center justify-center rounded-lg font-medium transition-colors duration-100',\n      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1',\n      this.btnClass(),\n      disabled\n        ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'\n        : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',\n    ].join(' ');\n  }\n\n  // ── Navigation ────────────────────────────────────────────────────────────\n\n  goTo(page: number): void {\n    const clamped = Math.max(1, Math.min(page, this.totalPages()));\n    if (clamped === this.currentPage()) return;\n    this.currentPage.set(clamped);\n    this.pageChange.emit(clamped);\n  }\n\n  onPageSizeChange(value: number): void {\n    this.pageSize.set(Number(value));  // model auto-emits pageSizeChange\n    this.currentPage.set(1);\n    this.pageChange.emit(1);\n  }\n}\n","<!-- Root wrapper -->\n<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center gap-3',\n    variant() === 'compact' ? 'justify-center' : 'justify-between',\n    customClass()\n  ]\"\n>\n\n  <!-- ── Summary + page-size selector ────────────────────────────────── -->\n  @if (variant() !== 'compact') {\n    <div class=\"flex flex-wrap items-center gap-3\">\n\n      @if (showSummary() && totalItems() > 0) {\n        <p [ngClass]=\"['text-gray-500 dark:text-gray-400', textClass()]\">\n          Showing\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeStart() }}</span>\n          –\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ rangeEnd() }}</span>\n          of\n          <span class=\"font-medium text-gray-900 dark:text-white\">{{ totalItems() }}</span>\n        </p>\n      }\n\n      @if (pageSizeOptions().length > 0) {\n        <div class=\"flex items-center gap-1.5\">\n          <label [ngClass]=\"['text-gray-500 dark:text-gray-400 whitespace-nowrap', textClass()]\"\n                 for=\"page-size-select\">Rows per page</label>\n          <select\n            id=\"page-size-select\"\n            [ngModel]=\"pageSize()\"\n            (ngModelChange)=\"onPageSizeChange($event)\"\n            [ngClass]=\"[\n              'rounded-lg border border-gray-200 bg-white text-gray-900',\n              'dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100',\n              'focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20',\n              textClass(),\n              size() === 'sm' ? 'h-7 px-2 py-0' : size() === 'lg' ? 'h-10 px-3 py-1' : 'h-8 px-2.5 py-0.5'\n            ]\"\n          >\n            @for (opt of pageSizeOptions(); track opt) {\n              <option [ngValue]=\"opt\">{{ opt }}</option>\n            }\n          </select>\n        </div>\n      }\n\n    </div>\n  }\n\n  <!-- ── Page controls ────────────────────────────────────────────────── -->\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ul class=\"flex items-center gap-1\">\n\n      @if (variant() === 'simple') {\n        <!-- Simple variant: prev / label / next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <li>\n          <span [ngClass]=\"['px-3 text-gray-600 dark:text-gray-300', textClass()]\">\n            Page {{ currentPage() }} of {{ totalPages() }}\n          </span>\n        </li>\n\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n      } @else {\n        <!-- Default / compact: full page window -->\n\n        <!-- First -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasPrev())\"\n              [disabled]=\"!hasPrev()\"\n              (click)=\"goTo(1)\"\n              aria-label=\"First page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M11 17l-5-5 5-5M18 17l-5-5 5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n        <!-- Prev -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasPrev())\"\n            [disabled]=\"!hasPrev()\"\n            (click)=\"goTo(currentPage() - 1)\"\n            aria-label=\"Previous page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M15 18l-6-6 6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Page numbers -->\n        @for (page of pageWindow(); track $index) {\n          <li>\n            @if (page === -1) {\n              <!-- Ellipsis -->\n              <span [ngClass]=\"['inline-flex items-center justify-center text-gray-500 dark:text-gray-400', btnClass()]\">\n                &hellip;\n              </span>\n            } @else {\n              <button\n                type=\"button\"\n                [ngClass]=\"pageButtonClass(page)\"\n                [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n                [attr.aria-label]=\"'Page ' + page\"\n                (click)=\"goTo(page)\"\n              >\n                {{ page }}\n              </button>\n            }\n          </li>\n        }\n\n        <!-- Next -->\n        <li>\n          <button\n            type=\"button\"\n            [ngClass]=\"navButtonClass(!hasNext())\"\n            [disabled]=\"!hasNext()\"\n            (click)=\"goTo(currentPage() + 1)\"\n            aria-label=\"Next page\"\n          >\n            <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M9 18l6-6-6-6\"/>\n            </svg>\n          </button>\n        </li>\n\n        <!-- Last -->\n        @if (variant() === 'default') {\n          <li>\n            <button\n              type=\"button\"\n              [ngClass]=\"navButtonClass(!hasNext())\"\n              [disabled]=\"!hasNext()\"\n              (click)=\"goTo(totalPages())\"\n              aria-label=\"Last page\"\n            >\n              <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M13 17l5-5-5-5M6 17l5-5-5-5\"/>\n              </svg>\n            </button>\n          </li>\n        }\n\n      }\n\n    </ul>\n  </nav>\n\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@styloviz/pagination",
+  "version": "0.1.1",
+  "description": "Smart page-window with ellipsis, a page-size selector, 3 variants and 3 sizes.",
+  "license": "MIT",
+  "author": "sazzad-bs23",
+  "homepage": "https://styloviz.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rhossain/angular-tailwind-dashboard-components.git",
+    "directory": "projects/pagination"
+  },
+  "bugs": {
+    "url": "https://github.com/rhossain/angular-tailwind-dashboard-components/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/forms": ">=21.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/styloviz-pagination.mjs",
+  "typings": "types/styloviz-pagination.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/styloviz-pagination.d.ts",
+      "default": "./fesm2022/styloviz-pagination.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/styloviz-pagination.d.ts

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+
+type PaginationSize = 'sm' | 'md' | 'lg';
+type PaginationVariant = 'default' | 'simple' | 'compact';
+/**
+ * Pagination — A fully-featured page navigator for tables, card grids, and lists.
+ *
+ * Features:
+ * - Page-window with leading/trailing ellipsis (smart truncation)
+ * - First / Previous / Next / Last buttons
+ * - Optional page-size selector
+ * - 3 variants: default (full controls) · simple (prev/next + label) · compact (minimal)
+ * - 3 sizes: sm · md · lg
+ * - Two-way `currentPage` binding via `model()`
+ * - `pageChange` and `pageSizeChange` outputs
+ * - Full dark-mode support
+ * - Accessible: `aria-label`, `aria-current="page"`, disabled states
+ */
+declare class SvPaginationComponent {
+    /** Total number of items across all pages. */
+    totalItems: _angular_core.InputSignal<number>;
+    /** Number of items per page. Use `[(pageSize)]` for two-way binding. */
+    pageSize: _angular_core.ModelSignal<number>;
+    /** 1-based current page index. Use `[(currentPage)]` for two-way binding. */
+    currentPage: _angular_core.ModelSignal<number>;
+    /**
+     * Options shown in the page-size `<select>`.
+     * Empty array hides the selector entirely. @default [10, 25, 50, 100]
+     */
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /** Visual variant. @default 'default' */
+    variant: _angular_core.InputSignal<PaginationVariant>;
+    /** Control size. @default 'md' */
+    size: _angular_core.InputSignal<PaginationSize>;
+    /** Show total-item count summary (e.g. "Showing 1–10 of 234"). @default true */
+    showSummary: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the navigation landmark. @default 'Pagination' */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Additional CSS classes on the root wrapper. */
+    customClass: _angular_core.InputSignal<string>;
+    /** Emitted when the user navigates to a different page. */
+    pageChange: _angular_core.OutputEmitterRef<number>;
+    totalPages: _angular_core.Signal<number>;
+    /** First item index (1-based) on the current page. */
+    rangeStart: _angular_core.Signal<number>;
+    /** Last item index (1-based) on the current page. */
+    rangeEnd: _angular_core.Signal<number>;
+    hasPrev: _angular_core.Signal<boolean>;
+    hasNext: _angular_core.Signal<boolean>;
+    /**
+     * Visible page numbers in the page window, with -1 as an ellipsis marker.
+     * Always shows: first, last, currentPage ±1, with ellipsis for gaps > 1.
+     */
+    pageWindow: _angular_core.Signal<number[]>;
+    btnClass: _angular_core.Signal<string>;
+    textClass: _angular_core.Signal<string>;
+    pageButtonClass(page: number): string;
+    navButtonClass(disabled: boolean): string;
+    goTo(page: number): void;
+    onPageSizeChange(value: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SvPaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SvPaginationComponent, "sv-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showSummary": { "alias": "showSummary"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
+export { SvPaginationComponent };
+export type { PaginationSize, PaginationVariant };