ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-paginator.mjs

@@ -0,0 +1,823 @@
+import * as i0 from '@angular/core';
+import { viewChildren, input, booleanAttribute, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComIcon } from 'ngx-com/components/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Default range label function.
+ * Produces output like "1 – 10 of 100" or "0 of 0" when empty.
+ */
+function defaultRangeLabel(page, pageSize, length) {
+    if (length === 0 || pageSize === 0) {
+        return `0 of ${length}`;
+    }
+    const startIndex = page * pageSize;
+    // Ensure end index doesn't exceed length
+    const endIndex = Math.min(startIndex + pageSize, length);
+    return `${startIndex + 1} – ${endIndex} of ${length}`;
+}
+
+// ─── Container Variants ───
+/**
+ * CVA variants for the paginator container.
+ * Controls overall layout and spacing.
+ */
+const paginatorContainerVariants = cva([
+    'flex items-center',
+    'text-foreground',
+    'select-none',
+], {
+    variants: {
+        size: {
+            sm: 'gap-3 text-xs',
+            md: 'gap-4 text-sm',
+        },
+        layout: {
+            compact: 'justify-end',
+            spread: 'justify-between',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        layout: 'compact',
+    },
+});
+// ─── Button Variants ───
+/**
+ * CVA variants for paginator navigation buttons.
+ * Controls button sizing, borders, and interactive states.
+ */
+const paginatorButtonVariants = cva([
+    'inline-flex items-center justify-center',
+    'rounded-control',
+    'border border-border',
+    'bg-transparent',
+    'transition-colors duration-150',
+    'cursor-pointer',
+    'hover:bg-muted hover:text-muted-foreground',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:border-disabled',
+], {
+    variants: {
+        size: {
+            sm: 'h-7 w-7',
+            md: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+// ─── Range Label Variants ───
+/**
+ * CVA variants for the range label text.
+ * Controls typography and color.
+ */
+const paginatorRangeLabelVariants = cva([
+    'text-muted-foreground',
+    'whitespace-nowrap',
+], {
+    variants: {
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+// ─── Page Size Selector Variants ───
+/**
+ * CVA variants for the page size select element.
+ * Controls sizing and styling of the native select.
+ */
+const paginatorSelectVariants = cva([
+    'appearance-none',
+    'rounded-control',
+    'border border-border',
+    'bg-transparent',
+    'text-foreground',
+    'cursor-pointer',
+    'transition-colors duration-150',
+    'hover:bg-muted',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground disabled:border-disabled',
+    'pr-6', // Space for custom dropdown arrow
+], {
+    variants: {
+        size: {
+            sm: 'h-7 px-2 text-xs',
+            md: 'h-9 px-3 text-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+// ─── Variant Types ───
+// ─── Page Button Variants ───
+/**
+ * CVA variants for numbered page buttons.
+ * Controls button sizing, active state, and interactive states.
+ */
+const paginatorPageButtonVariants = cva([
+    'inline-flex items-center justify-center',
+    'rounded-control',
+    'font-medium',
+    'transition-colors duration-150',
+    'cursor-pointer',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground',
+], {
+    variants: {
+        size: {
+            sm: 'h-7 min-w-7 px-1.5 text-xs',
+            md: 'h-9 min-w-9 px-2 text-sm',
+        },
+        active: {
+            true: 'bg-primary text-primary-foreground',
+            false: 'bg-transparent text-foreground hover:bg-muted hover:text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        active: false,
+    },
+});
+// ─── Ellipsis Variants ───
+/**
+ * CVA variants for the ellipsis indicator.
+ * Controls sizing and styling of the "..." text.
+ */
+const paginatorEllipsisVariants = cva([
+    'inline-flex items-center justify-center',
+    'text-muted-foreground',
+    'select-none',
+], {
+    variants: {
+        size: {
+            sm: 'h-7 w-7 text-xs',
+            md: 'h-9 w-9 text-sm',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});
+
+/**
+ * Paginator component — provides navigation for paginated content.
+ *
+ * Displays navigation controls, optional page size selector, and range label
+ * showing current position within the data set. Supports numbered page buttons
+ * when `showPageNumbers` is enabled.
+ *
+ * @tokens `--color-foreground`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-muted`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--color-primary`, `--color-primary-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With page size options
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   [pageSizeOptions]="[5, 10, 25, 50]"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With first/last buttons
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [pageIndex]="0"
+ *   [showFirstLastButtons]="true"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example With numbered page buttons
+ * ```html
+ * <com-paginator
+ *   [length]="97"
+ *   [pageSize]="10"
+ *   [showPageNumbers]="true"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Spread layout (summary left, controls right)
+ * ```html
+ * <com-paginator
+ *   [length]="97"
+ *   [pageSize]="10"
+ *   [showPageNumbers]="true"
+ *   layout="spread"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Small size
+ * ```html
+ * <com-paginator
+ *   [length]="50"
+ *   [pageSize]="10"
+ *   size="sm"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ *
+ * @example Custom range label (i18n)
+ * ```html
+ * <com-paginator
+ *   [length]="100"
+ *   [pageSize]="10"
+ *   [rangeLabel]="customLabel"
+ *   (page)="onPageChange($event)"
+ * />
+ * ```
+ * ```ts
+ * customLabel = (page, pageSize, length) => `Seite ${page + 1} von ${Math.ceil(length / pageSize)}`;
+ * ```
+ */
+class ComPaginator {
+    // ─── View Queries ───
+    /** Page number buttons for keyboard navigation. */
+    pageButtons = viewChildren('pageBtn', ...(ngDevMode ? [{ debugName: "pageButtons" }] : []));
+    // ─── Inputs ───
+    /** Total number of items being paged. */
+    length = input(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    /** Number of items to display per page. */
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** Current zero-based page index. */
+    pageIndex = input(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
+    /** Available page size options. Hides selector if empty. */
+    pageSizeOptions = input([], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    /** Whether to show first/last navigation buttons. */
+    showFirstLastButtons = input(false, { ...(ngDevMode ? { debugName: "showFirstLastButtons" } : {}), transform: booleanAttribute });
+    /** Whether to show numbered page buttons. */
+    showPageNumbers = input(false, { ...(ngDevMode ? { debugName: "showPageNumbers" } : {}), transform: booleanAttribute });
+    /** Whether all controls are disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Whether to hide the page size selector. */
+    hidePageSize = input(false, { ...(ngDevMode ? { debugName: "hidePageSize" } : {}), transform: booleanAttribute });
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Layout variant. Only applies when showPageNumbers is true. */
+    layout = input('compact', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /** Number of pages to show on each side of the current page. */
+    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : []));
+    /** Number of pages to always show at the start and end. */
+    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : []));
+    /** Accessible label for the nav element. */
+    ariaLabel = input('Pagination', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    /** Custom function for range label formatting. */
+    rangeLabel = input(defaultRangeLabel, ...(ngDevMode ? [{ debugName: "rangeLabel" }] : []));
+    // ─── Outputs ───
+    /** Emits when page index or page size changes. */
+    page = output();
+    // ─── Computed ───
+    /** Total number of pages. */
+    numberOfPages = computed(() => {
+        const size = this.pageSize();
+        const len = this.length();
+        if (size === 0 || len === 0) {
+            return 0;
+        }
+        return Math.ceil(len / size);
+    }, ...(ngDevMode ? [{ debugName: "numberOfPages" }] : []));
+    /** Whether there is a previous page. */
+    hasPreviousPage = computed(() => {
+        return this.pageIndex() > 0 && this.pageSize() > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
+    /** Whether there is a next page. */
+    hasNextPage = computed(() => {
+        const total = this.numberOfPages();
+        return total > 0 && this.pageIndex() < total - 1;
+    }, ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+    /** The formatted range label text. */
+    rangeLabelText = computed(() => {
+        const fn = this.rangeLabel();
+        return fn(this.pageIndex(), this.pageSize(), this.length());
+    }, ...(ngDevMode ? [{ debugName: "rangeLabelText" }] : []));
+    /** Icon size based on component size. */
+    iconSize = computed(() => {
+        return this.size() === 'sm' ? 'xs' : 'sm';
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /** Unique ID for page size label. */
+    pageSizeLabelId = computed(() => {
+        return `com-paginator-page-size-label-${uniqueId++}`;
+    }, ...(ngDevMode ? [{ debugName: "pageSizeLabelId" }] : []));
+    /** Classes for the container. */
+    containerClasses = computed(() => paginatorContainerVariants({
+        size: this.size(),
+        layout: this.showPageNumbers() ? this.layout() : 'compact',
+    }), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /** Classes for navigation buttons. */
+    buttonClasses = computed(() => paginatorButtonVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
+    /** Classes for the range label. */
+    rangeLabelClasses = computed(() => paginatorRangeLabelVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "rangeLabelClasses" }] : []));
+    /** Classes for the page size select. */
+    selectClasses = computed(() => paginatorSelectVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    /** Classes for the ellipsis indicator. */
+    ellipsisClasses = computed(() => paginatorEllipsisVariants({ size: this.size() }), ...(ngDevMode ? [{ debugName: "ellipsisClasses" }] : []));
+    /** Cached classes for active page button. */
+    activePageButtonClasses = computed(() => paginatorPageButtonVariants({ size: this.size(), active: true }), ...(ngDevMode ? [{ debugName: "activePageButtonClasses" }] : []));
+    /** Cached classes for inactive page button. */
+    inactivePageButtonClasses = computed(() => paginatorPageButtonVariants({ size: this.size(), active: false }), ...(ngDevMode ? [{ debugName: "inactivePageButtonClasses" }] : []));
+    /**
+     * Computed page range for numbered pagination.
+     * Returns array like [0, 'ellipsis', 3, 4, 5, 'ellipsis', 9] (zero-indexed).
+     */
+    pageRange = computed(() => {
+        const totalPages = this.numberOfPages();
+        const current = this.pageIndex();
+        const siblings = this.siblingCount();
+        const boundaries = this.boundaryCount();
+        if (totalPages === 0)
+            return [];
+        // If all pages fit without ellipses, show them all
+        const totalSlots = 2 * boundaries + 2 * siblings + 3;
+        if (totalPages <= totalSlots) {
+            return this.range(0, totalPages - 1);
+        }
+        // Collect all page indices that should be visible (Set auto-deduplicates)
+        const pages = new Set();
+        // Boundary pages (always visible)
+        for (let i = 0; i < boundaries; i++)
+            pages.add(i);
+        for (let i = totalPages - boundaries; i < totalPages; i++)
+            pages.add(i);
+        // Sibling pages around current (including current)
+        const siblingStart = Math.max(0, current - siblings);
+        const siblingEnd = Math.min(totalPages - 1, current + siblings);
+        for (let i = siblingStart; i <= siblingEnd; i++)
+            pages.add(i);
+        // Convert to sorted array and insert ellipses at gaps
+        const sorted = Array.from(pages).sort((a, b) => a - b);
+        const result = [];
+        for (let i = 0; i < sorted.length; i++) {
+            const page = sorted[i];
+            const prevPage = sorted[i - 1];
+            if (prevPage !== undefined && page - prevPage > 1) {
+                result.push('ellipsis');
+            }
+            result.push(page);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "pageRange" }] : []));
+    // ─── Navigation Methods ───
+    /** Navigate to the first page. */
+    firstPage() {
+        if (this.hasPreviousPage()) {
+            this.emitPageEvent(0);
+        }
+    }
+    /** Navigate to the previous page. */
+    previousPage() {
+        if (this.hasPreviousPage()) {
+            this.emitPageEvent(this.pageIndex() - 1);
+        }
+    }
+    /** Navigate to the next page. */
+    nextPage() {
+        if (this.hasNextPage()) {
+            this.emitPageEvent(this.pageIndex() + 1);
+        }
+    }
+    /** Navigate to the last page. */
+    lastPage() {
+        if (this.hasNextPage()) {
+            this.emitPageEvent(this.numberOfPages() - 1);
+        }
+    }
+    /** Navigate to a specific page by index (zero-based). */
+    goToPage(pageIndex) {
+        if (pageIndex >= 0 && pageIndex < this.numberOfPages() && pageIndex !== this.pageIndex()) {
+            this.emitPageEvent(pageIndex);
+        }
+    }
+    /** Handle page size selection change. */
+    onPageSizeChange(event) {
+        const select = event.target;
+        const newPageSize = Number(select.value);
+        const previousPageSize = this.pageSize();
+        const currentPageIndex = this.pageIndex();
+        // Calculate new page index to keep the first item on the current page visible
+        const startIndex = currentPageIndex * previousPageSize;
+        const newPageIndex = Math.floor(startIndex / newPageSize);
+        this.page.emit({
+            pageIndex: newPageIndex,
+            previousPageIndex: currentPageIndex,
+            pageSize: newPageSize,
+            length: this.length(),
+        });
+    }
+    /** Handle keyboard navigation within page buttons (roving tabindex). */
+    onPageButtonsKeydown(event) {
+        const target = event.target;
+        // Get enabled buttons from viewChildren query
+        const buttons = this.pageButtons()
+            .map((ref) => ref.nativeElement)
+            .filter((btn) => !btn.disabled);
+        const currentIndex = buttons.indexOf(target);
+        if (currentIndex === -1)
+            return;
+        let newIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                newIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;
+                break;
+            case 'ArrowRight':
+                newIndex = currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                newIndex = 0;
+                break;
+            case 'End':
+                newIndex = buttons.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        buttons[newIndex]?.focus();
+    }
+    /** Track function for page items. */
+    trackPageItem(index, item) {
+        return item === 'ellipsis' ? `ellipsis-${index}` : `page-${item}`;
+    }
+    // ─── Private Methods ───
+    emitPageEvent(newPageIndex) {
+        this.page.emit({
+            pageIndex: newPageIndex,
+            previousPageIndex: this.pageIndex(),
+            pageSize: this.pageSize(),
+            length: this.length(),
+        });
+    }
+    /** Generate a range of numbers from start to end (inclusive). */
+    range(start, end) {
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComPaginator, isStandalone: true, selector: "com-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "page" }, host: { classAttribute: "com-paginator" }, viewQueries: [{ propertyName: "pageButtons", predicate: ["pageBtn"], descendants: true, isSignal: true }], exportAs: ["comPaginator"], ngImport: i0, template: `
+    <nav
+      role="navigation"
+      [attr.aria-label]="ariaLabel()"
+      [class]="containerClasses()"
+    >
+      @if (showPageNumbers()) {
+        <!-- Spread Layout: Summary on left -->
+        @if (layout() === 'spread') {
+          <span [class]="rangeLabelClasses()">
+            {{ rangeLabelText() }}
+          </span>
+        }
+
+        <!-- Navigation Controls -->
+        <div
+          class="flex items-center gap-1"
+          role="group"
+          aria-label="Page navigation"
+          (keydown)="onPageButtonsKeydown($event)"
+        >
+          <!-- Previous Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasPreviousPage()"
+            aria-label="Previous page"
+            (click)="previousPage()"
+          >
+            <com-icon name="chevron-left" [size]="iconSize()" />
+          </button>
+
+          <!-- Page Numbers -->
+          @for (item of pageRange(); track trackPageItem($index, item)) {
+            @if (item === 'ellipsis') {
+              <span
+                [class]="ellipsisClasses()"
+                aria-hidden="true"
+              >…</span>
+            } @else {
+              <button
+                #pageBtn
+                type="button"
+                [class]="item === pageIndex() ? activePageButtonClasses() : inactivePageButtonClasses()"
+                [disabled]="disabled()"
+                [attr.aria-label]="'Page ' + (item + 1)"
+                [attr.aria-current]="item === pageIndex() ? 'page' : null"
+                [tabindex]="item === pageIndex() ? 0 : -1"
+                (click)="goToPage(item)"
+              >{{ item + 1 }}</button>
+            }
+          }
+
+          <!-- Next Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasNextPage()"
+            aria-label="Next page"
+            (click)="nextPage()"
+          >
+            <com-icon name="chevron-right" [size]="iconSize()" />
+          </button>
+        </div>
+
+        <!-- Compact Layout: Summary on right -->
+        @if (layout() === 'compact') {
+          <span [class]="rangeLabelClasses()">
+            {{ rangeLabelText() }}
+          </span>
+        }
+      } @else {
+        <!-- Original Layout (no page numbers) -->
+
+        <!-- Page Size Selector -->
+        @if (!hidePageSize() && pageSizeOptions().length > 0) {
+          <div class="flex items-center gap-2">
+            <label
+              [id]="pageSizeLabelId()"
+              class="text-muted-foreground"
+              [class.text-xs]="size() === 'sm'"
+              [class.text-sm]="size() === 'md'"
+            >
+              Items per page:
+            </label>
+            <div class="relative">
+              <select
+                [attr.aria-labelledby]="pageSizeLabelId()"
+                [class]="selectClasses()"
+                [disabled]="disabled()"
+                [value]="pageSize()"
+                (change)="onPageSizeChange($event)"
+              >
+                @for (option of pageSizeOptions(); track option) {
+                  <option [value]="option">{{ option }}</option>
+                }
+              </select>
+              <com-icon
+                name="chevron-down"
+                size="xs"
+                class="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+            </div>
+          </div>
+        }
+
+        <!-- Range Label -->
+        <span [class]="rangeLabelClasses()">
+          {{ rangeLabelText() }}
+        </span>
+
+        <!-- Navigation Buttons -->
+        <div class="flex items-center gap-1">
+          <!-- First Page -->
+          @if (showFirstLastButtons()) {
+            <button
+              type="button"
+              [class]="buttonClasses()"
+              [disabled]="disabled() || !hasPreviousPage()"
+              aria-label="First page"
+              (click)="firstPage()"
+            >
+              <com-icon name="chevrons-left" [size]="iconSize()" />
+            </button>
+          }
+
+          <!-- Previous Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasPreviousPage()"
+            aria-label="Previous page"
+            (click)="previousPage()"
+          >
+            <com-icon name="chevron-left" [size]="iconSize()" />
+          </button>
+
+          <!-- Next Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasNextPage()"
+            aria-label="Next page"
+            (click)="nextPage()"
+          >
+            <com-icon name="chevron-right" [size]="iconSize()" />
+          </button>
+
+          <!-- Last Page -->
+          @if (showFirstLastButtons()) {
+            <button
+              type="button"
+              [class]="buttonClasses()"
+              [disabled]="disabled() || !hasNextPage()"
+              aria-label="Last page"
+              (click)="lastPage()"
+            >
+              <com-icon name="chevrons-right" [size]="iconSize()" />
+            </button>
+          }
+        </div>
+      }
+    </nav>
+  `, isInline: true, styles: ["com-paginator{display:block}\n"], dependencies: [{ kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComPaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-paginator', exportAs: 'comPaginator', template: `
+    <nav
+      role="navigation"
+      [attr.aria-label]="ariaLabel()"
+      [class]="containerClasses()"
+    >
+      @if (showPageNumbers()) {
+        <!-- Spread Layout: Summary on left -->
+        @if (layout() === 'spread') {
+          <span [class]="rangeLabelClasses()">
+            {{ rangeLabelText() }}
+          </span>
+        }
+
+        <!-- Navigation Controls -->
+        <div
+          class="flex items-center gap-1"
+          role="group"
+          aria-label="Page navigation"
+          (keydown)="onPageButtonsKeydown($event)"
+        >
+          <!-- Previous Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasPreviousPage()"
+            aria-label="Previous page"
+            (click)="previousPage()"
+          >
+            <com-icon name="chevron-left" [size]="iconSize()" />
+          </button>
+
+          <!-- Page Numbers -->
+          @for (item of pageRange(); track trackPageItem($index, item)) {
+            @if (item === 'ellipsis') {
+              <span
+                [class]="ellipsisClasses()"
+                aria-hidden="true"
+              >…</span>
+            } @else {
+              <button
+                #pageBtn
+                type="button"
+                [class]="item === pageIndex() ? activePageButtonClasses() : inactivePageButtonClasses()"
+                [disabled]="disabled()"
+                [attr.aria-label]="'Page ' + (item + 1)"
+                [attr.aria-current]="item === pageIndex() ? 'page' : null"
+                [tabindex]="item === pageIndex() ? 0 : -1"
+                (click)="goToPage(item)"
+              >{{ item + 1 }}</button>
+            }
+          }
+
+          <!-- Next Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasNextPage()"
+            aria-label="Next page"
+            (click)="nextPage()"
+          >
+            <com-icon name="chevron-right" [size]="iconSize()" />
+          </button>
+        </div>
+
+        <!-- Compact Layout: Summary on right -->
+        @if (layout() === 'compact') {
+          <span [class]="rangeLabelClasses()">
+            {{ rangeLabelText() }}
+          </span>
+        }
+      } @else {
+        <!-- Original Layout (no page numbers) -->
+
+        <!-- Page Size Selector -->
+        @if (!hidePageSize() && pageSizeOptions().length > 0) {
+          <div class="flex items-center gap-2">
+            <label
+              [id]="pageSizeLabelId()"
+              class="text-muted-foreground"
+              [class.text-xs]="size() === 'sm'"
+              [class.text-sm]="size() === 'md'"
+            >
+              Items per page:
+            </label>
+            <div class="relative">
+              <select
+                [attr.aria-labelledby]="pageSizeLabelId()"
+                [class]="selectClasses()"
+                [disabled]="disabled()"
+                [value]="pageSize()"
+                (change)="onPageSizeChange($event)"
+              >
+                @for (option of pageSizeOptions(); track option) {
+                  <option [value]="option">{{ option }}</option>
+                }
+              </select>
+              <com-icon
+                name="chevron-down"
+                size="xs"
+                class="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+              />
+            </div>
+          </div>
+        }
+
+        <!-- Range Label -->
+        <span [class]="rangeLabelClasses()">
+          {{ rangeLabelText() }}
+        </span>
+
+        <!-- Navigation Buttons -->
+        <div class="flex items-center gap-1">
+          <!-- First Page -->
+          @if (showFirstLastButtons()) {
+            <button
+              type="button"
+              [class]="buttonClasses()"
+              [disabled]="disabled() || !hasPreviousPage()"
+              aria-label="First page"
+              (click)="firstPage()"
+            >
+              <com-icon name="chevrons-left" [size]="iconSize()" />
+            </button>
+          }
+
+          <!-- Previous Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasPreviousPage()"
+            aria-label="Previous page"
+            (click)="previousPage()"
+          >
+            <com-icon name="chevron-left" [size]="iconSize()" />
+          </button>
+
+          <!-- Next Page -->
+          <button
+            type="button"
+            [class]="buttonClasses()"
+            [disabled]="disabled() || !hasNextPage()"
+            aria-label="Next page"
+            (click)="nextPage()"
+          >
+            <com-icon name="chevron-right" [size]="iconSize()" />
+          </button>
+
+          <!-- Last Page -->
+          @if (showFirstLastButtons()) {
+            <button
+              type="button"
+              [class]="buttonClasses()"
+              [disabled]="disabled() || !hasNextPage()"
+              aria-label="Last page"
+              (click)="lastPage()"
+            >
+              <com-icon name="chevrons-right" [size]="iconSize()" />
+            </button>
+          }
+        </div>
+      }
+    </nav>
+  `, imports: [ComIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'com-paginator',
+                    }, styles: ["com-paginator{display:block}\n"] }]
+        }], propDecorators: { pageButtons: [{ type: i0.ViewChildren, args: ['pageBtn', { isSignal: true }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], rangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeLabel", required: false }] }], page: [{ type: i0.Output, args: ["page"] }] } });
+/** Counter for generating unique IDs. */
+let uniqueId = 0;
+
+// Public API for the paginator component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComPaginator, defaultRangeLabel, paginatorButtonVariants, paginatorContainerVariants, paginatorEllipsisVariants, paginatorPageButtonVariants, paginatorRangeLabelVariants, paginatorSelectVariants };
+//# sourceMappingURL=ngx-com-components-paginator.mjs.map