@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-paginator.mjs

@@ -0,0 +1,691 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, ElementRef, model, output, contentChildren, contentChild, viewChildren, computed, afterNextRender, isDevMode, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { LiveAnnouncer, FocusKeyManager } from '@angular/cdk/a11y';
+import { tv } from 'tailwind-variants';
+
+// ── Default labels ────────────────────────────────────────────────
+const DEFAULT_LABELS = {
+    ariaLabel: 'Pagination',
+    previous: 'Previous',
+    next: 'Next',
+    first: 'First page',
+    last: 'Last page',
+    pageInfo: 'Page',
+    pageInfoSeparator: ' of ',
+    pageRange: '{start}\u2013{end} of {total}',
+    pageSizeLabel: 'Items per page:',
+    announcement: 'Page {page} of {totalPages}',
+    pageButtonAriaLabel: 'Go to page {page}',
+    currentPageAriaLabel: 'Page {page}, current page',
+    ellipsis: 'More pages',
+    empty: 'No results',
+};
+// ── Static active-page class maps (Tailwind v4 requires statically written class strings) ──
+// Mirrors the checkbox SOLID_BOX / SOLID_ICON split: a per-color background + border map
+// and a per-color on-color text map. `text-on-{color}` keeps the active button readable
+// against any consumer theme without hardcoding `text-white` (would fail for warning's
+// dark-on-amber convention) or `text-black`. The legacy `--color-on-*` alias tokens still
+// resolve to the canonical solid-fg slot per `theme/_semantic.css` lines 284-296.
+const PAGE_BUTTON_ACTIVE_BG = {
+    primary: 'bg-primary-600 hover:bg-primary-700 border-primary-600 focus-visible:outline-primary-500',
+    secondary: 'bg-secondary-600 hover:bg-secondary-700 border-secondary-600 focus-visible:outline-secondary-500',
+    accent: 'bg-accent-600 hover:bg-accent-700 border-accent-600 focus-visible:outline-accent-500',
+    neutral: 'bg-fg hover:bg-fg border-fg focus-visible:outline-fg',
+    info: 'bg-info-600 hover:bg-info-700 border-info-600 focus-visible:outline-info-500',
+    success: 'bg-success-600 hover:bg-success-700 border-success-600 focus-visible:outline-success-500',
+    // Warning keeps -500 because the amber-500/amber-950 pairing meets contrast — see
+    // `theme/_semantic.css` warning role comment ("yellow signage convention").
+    warning: 'bg-warning-500 hover:bg-warning-600 border-warning-500 focus-visible:outline-warning-500',
+    error: 'bg-error-600 hover:bg-error-700 border-error-600 focus-visible:outline-error-500',
+};
+const PAGE_BUTTON_ACTIVE_FG = {
+    primary: 'text-on-primary',
+    secondary: 'text-on-secondary',
+    accent: 'text-on-accent',
+    neutral: 'text-on-neutral',
+    info: 'text-on-info',
+    success: 'text-on-success',
+    warning: 'text-on-warning',
+    error: 'text-on-error',
+};
+// ── Pure helpers (exported for unit testing only — not re-exported from index.ts) ──
+/**
+ * Builds the visible page range for the numbered paginator, inserting ellipsis
+ * sentinels where ranges are collapsed. Port of the shadcn/Radix algorithm.
+ *
+ * @internal exported for unit tests; not part of the public API.
+ */
+function buildPaginationRange(currentPage, totalPages, siblingCount, boundaryCount) {
+    const total = Math.max(0, Math.floor(totalPages));
+    if (total <= 0)
+        return [];
+    const siblings = Math.max(0, Math.floor(siblingCount));
+    const boundaries = Math.max(0, Math.floor(boundaryCount));
+    const current = Math.min(Math.max(1, Math.floor(currentPage)), total);
+    // If all pages fit without ellipses, show them all.
+    const totalPageButtons = boundaries * 2 + siblings * 2 + 3;
+    if (total <= totalPageButtons) {
+        return range(1, total);
+    }
+    const leftBoundary = range(1, Math.min(boundaries, total));
+    const rightBoundary = range(Math.max(total - boundaries + 1, 1), total);
+    const leftSibling = Math.max(current - siblings, boundaries + 2);
+    const rightSibling = Math.min(current + siblings, total - boundaries - 1);
+    const showLeftEllipsis = leftSibling > boundaries + 2;
+    const showRightEllipsis = rightSibling < total - boundaries - 1;
+    const middle = [];
+    if (showLeftEllipsis) {
+        middle.push('ellipsis-left');
+    }
+    else {
+        // Fill the gap between left boundary and leftSibling with explicit numbers.
+        for (let i = boundaries + 1; i < leftSibling; i++)
+            middle.push(i);
+    }
+    for (let i = leftSibling; i <= rightSibling; i++)
+        middle.push(i);
+    if (showRightEllipsis) {
+        middle.push('ellipsis-right');
+    }
+    else {
+        for (let i = rightSibling + 1; i <= total - boundaries; i++)
+            middle.push(i);
+    }
+    return [...leftBoundary, ...middle, ...rightBoundary];
+}
+function range(start, end) {
+    if (end < start)
+        return [];
+    const out = new Array(end - start + 1);
+    for (let i = 0; i < out.length; i++)
+        out[i] = start + i;
+    return out;
+}
+/** Replaces `{key}` placeholders in `template` with values from `vars`. */
+function formatLabel(template, vars) {
+    return template.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(vars, key) ? String(vars[key]) : match);
+}
+// ── tv() config ───────────────────────────────────────────────────
+const paginatorVariants = tv({
+    slots: {
+        root: 'flex w-full',
+        inner: 'flex items-center gap-3 flex-wrap w-full min-w-0',
+        pageSizeGroup: 'flex items-center gap-2 shrink-0',
+        pageSizeLabel: 'text-sm text-fg-muted whitespace-nowrap',
+        pageSizeSelect: 'rounded-md border border-border bg-surface text-fg cursor-pointer transition-colors duration-normal motion-reduce:transition-none hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-50 disabled:pointer-events-none',
+        pageInfo: 'text-sm text-fg-muted whitespace-nowrap',
+        navGroup: 'flex items-center gap-1',
+        pageList: 'flex items-center gap-1',
+        navButton: 'inline-flex items-center justify-center rounded-md border border-border bg-surface text-fg transition-colors duration-normal motion-reduce:transition-none cursor-pointer hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed',
+        pageButton: 'inline-flex items-center justify-center rounded-md border border-transparent text-fg transition-colors duration-normal motion-reduce:transition-none cursor-pointer hover:bg-surface-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed',
+        ellipsis: 'inline-flex items-center justify-center text-fg-subtle select-none pointer-events-none',
+        emptyState: 'text-sm text-fg-muted',
+        icon: 'size-4 shrink-0',
+    },
+    variants: {
+        size: {
+            xs: {
+                navButton: 'px-2 py-1 text-xs min-w-7 h-7',
+                pageButton: 'px-2 py-1 text-xs min-w-7 h-7',
+                pageSizeSelect: 'px-2 py-1 text-xs',
+                ellipsis: 'min-w-7 h-7 text-xs',
+                // `size-3.5` (14px) half-step: neither size-3 nor size-4 aligns with
+                // text-xs glyph metrics inside a 28px nav button.
+                icon: 'size-3.5',
+            },
+            sm: {
+                navButton: 'px-2.5 py-1.5 text-sm min-w-8 h-8',
+                pageButton: 'px-2.5 py-1.5 text-sm min-w-8 h-8',
+                pageSizeSelect: 'px-2.5 py-1.5 text-sm',
+                ellipsis: 'min-w-8 h-8 text-sm',
+                icon: 'size-4',
+            },
+            md: {
+                navButton: 'px-3 py-2 text-sm min-w-9 h-9',
+                pageButton: 'px-3 py-2 text-sm min-w-9 h-9',
+                pageSizeSelect: 'px-3 py-2 text-sm',
+                ellipsis: 'min-w-9 h-9 text-sm',
+                icon: 'size-4',
+            },
+            lg: {
+                navButton: 'px-4 py-2.5 text-base min-w-10 h-10',
+                pageButton: 'px-4 py-2.5 text-base min-w-10 h-10',
+                pageSizeSelect: 'px-4 py-2.5 text-base',
+                ellipsis: 'min-w-10 h-10 text-base',
+                icon: 'size-5',
+            },
+            xl: {
+                navButton: 'px-5 py-3 text-base min-w-11 h-11',
+                pageButton: 'px-5 py-3 text-base min-w-11 h-11',
+                pageSizeSelect: 'px-5 py-3 text-base',
+                ellipsis: 'min-w-11 h-11 text-base',
+                icon: 'size-5',
+            },
+        },
+        layout: {
+            compact: { inner: 'justify-start' },
+            spread: { inner: 'justify-between' },
+        },
+        type: {
+            basic: { pageList: 'hidden' },
+            numbered: {},
+        },
+        responsive: {
+            auto: { root: '@container' },
+            off: {},
+        },
+        disabled: {
+            true: { root: 'opacity-50 pointer-events-none' },
+            false: {},
+        },
+    },
+    compoundVariants: [
+        // Auto-collapse numbered page list under 30rem container width.
+        {
+            type: 'numbered',
+            responsive: 'auto',
+            class: { pageList: 'hidden @[30rem]:flex' },
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        layout: 'compact',
+        type: 'numbered',
+        responsive: 'auto',
+        disabled: false,
+    },
+}, { twMerge: true });
+// ── Template directives ───────────────────────────────────────────
+/**
+ * Structural directive on an `<ng-template>` that replaces a specific label slot.
+ * Usage: `<ng-template twPaginatorLabel slot="pageInfo" let-ctx> … </ng-template>`.
+ */
+class PaginatorLabelDirective {
+    /** The label slot this template overrides. */
+    slot = input.required(...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: PaginatorLabelDirective, isStandalone: true, selector: "ng-template[twPaginatorLabel]", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[twPaginatorLabel]' }]
+        }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: true }] }] } });
+/**
+ * Structural directive on an `<ng-template>` that renders when `totalItems === 0`
+ * and `hideOnEmpty` is `false`. When absent, `labels.empty` renders as fallback.
+ */
+class PaginatorEmptyDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PaginatorEmptyDirective, isStandalone: true, selector: "ng-template[twPaginatorEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[twPaginatorEmpty]' }]
+        }] });
+/**
+ * Structural directive on an `<ng-template>` that replaces the default page-size
+ * selector UI entirely. Context `$implicit` exposes `{ pageSize, options, setPageSize }`.
+ */
+class PaginatorPageSizeSelectorDirective {
+    /** @internal */
+    templateRef = inject((TemplateRef));
+    /** @internal */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorPageSizeSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PaginatorPageSizeSelectorDirective, isStandalone: true, selector: "ng-template[twPaginatorPageSizeSelector]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorPageSizeSelectorDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[twPaginatorPageSizeSelector]' }]
+        }] });
+// ── PaginatorFocusableDirective ───────────────────────────────────
+/**
+ * @internal Wraps every nav-group focusable (first/prev/page/next/last) as a CDK
+ * `FocusableOption` so `FocusKeyManager` can drive roving focus across the group.
+ * Applied via attribute selector on the existing `data-tw-paginator-focusable`
+ * marker so the spec's button queries continue to match.
+ */
+class PaginatorFocusableDirective {
+    elementRef = inject((ElementRef));
+    /** When true, the element is skipped by `FocusKeyManager` roving focus. */
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    /**
+     * `FocusableOption.disabled` resolver. NOTE: returning the signal function
+     * itself would always be truthy, so `FocusKeyManager` would skip every
+     * element. Call the signal here so the manager sees the actual value.
+     */
+    get disabled() {
+        return this.isDisabled();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorFocusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: PaginatorFocusableDirective, isStandalone: true, selector: "[data-tw-paginator-focusable]", inputs: { isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[data-tw-paginator-focusable]',
+                }]
+        }], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }] } });
+// ── PaginatorComponent ────────────────────────────────────────────
+let nextPaginatorId = 0;
+class PaginatorComponent {
+    // ── Inputs ──
+    /** Total number of items across all pages. Defaults to `0`. */
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
+    /** Items per page. Two-way bindable via `[(pageSize)]`. Defaults to `10`. */
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** 1-based current page. Two-way bindable via `[(page)]`. Clamped internally. Defaults to `1`. */
+    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    /** Rendering type. Defaults to `'numbered'`. */
+    type = input('numbered', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Layout density. Defaults to `'compact'`. */
+    layout = input('compact', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Controls padding, font size, and icon size. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color used for the active page indicator. Defaults to `'primary'`. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** How many sibling pages to show on each side of the current page. Defaults to `1`. */
+    siblingCount = input(1, ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    /** How many pages to always show at the start and end boundaries. Defaults to `1`. */
+    boundaryCount = input(1, ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
+    /** When true, renders jump-to-first and jump-to-last buttons. Defaults to `true`. */
+    // TRUE-default: first/last jumps are the standard pagination affordance for
+    // any list large enough to need a paginator; opt-out is for compact paginators.
+    showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : /* istanbul ignore next */ []));
+    /** When true, renders the page-size selector region. Defaults to `false`. */
+    showPageSizeSelector = input(false, ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : /* istanbul ignore next */ []));
+    /** Options for the default page-size selector. Ignored when `*twPaginatorPageSizeSelector` is projected. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /** When true, renders the page-info text region. Defaults to `true`. */
+    // TRUE-default: showing "X–Y of Z" is the expected pagination context; opt-out
+    // is for ultra-compact paginators that fit in tight UI.
+    showPageInfo = input(true, ...(ngDevMode ? [{ debugName: "showPageInfo" }] : /* istanbul ignore next */ []));
+    /** When true, renders nothing when `totalItems === 0`. Defaults to `true`. */
+    // TRUE-default: hiding the paginator on empty data is expected UX; opt-out is
+    // for layouts that need to reserve the paginator's vertical space.
+    hideOnEmpty = input(true, ...(ngDevMode ? [{ debugName: "hideOnEmpty" }] : /* istanbul ignore next */ []));
+    /** When true, renders nothing when `totalPages <= 1`. Defaults to `false`. */
+    hideOnSinglePage = input(false, ...(ngDevMode ? [{ debugName: "hideOnSinglePage" }] : /* istanbul ignore next */ []));
+    /** Responsive collapse mode. Defaults to `'auto'`. */
+    responsive = input('auto', ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+    /** When true, every button is disabled. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Partial string labels object for i18n. Unset keys fall back to English defaults. Defaults to `{}`. */
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** When provided, buttons render as anchor links using the returned `href`. Defaults to `undefined` (renders as buttons). */
+    linkFactory = input(undefined, ...(ngDevMode ? [{ debugName: "linkFactory" }] : /* istanbul ignore next */ []));
+    /** Overrides `labels.ariaLabel` for the root `<nav>` element. */
+    customAriaLabel = input(undefined, { ...(ngDevMode ? { debugName: "customAriaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    // ── Outputs ──
+    /** Fires when `page` or `pageSize` changes. Payload includes derived helpers (`start`, `end`, `totalPages`, `source`). Use `[(page)]` / `[(pageSize)]` for two-way binding; subscribe to this for the rich event payload. */
+    paginated = output();
+    // ── Projected templates ──
+    /** @internal */
+    labelDirectives = contentChildren(PaginatorLabelDirective, ...(ngDevMode ? [{ debugName: "labelDirectives" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    emptyDirective = contentChild(PaginatorEmptyDirective, ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    pageSizeSelectorDirective = contentChild(PaginatorPageSizeSelectorDirective, ...(ngDevMode ? [{ debugName: "pageSizeSelectorDirective" }] : /* istanbul ignore next */ []));
+    // ── Injected services ──
+    _liveAnnouncer = inject(LiveAnnouncer);
+    _elementRef = inject((ElementRef));
+    // ── View children ──
+    /** @internal All nav-group focusables (first/prev/page/next/last) for `FocusKeyManager`. */
+    focusableItems = viewChildren(PaginatorFocusableDirective, ...(ngDevMode ? [{ debugName: "focusableItems" }] : /* istanbul ignore next */ []));
+    // ── IDs ──
+    _componentId = `tw-paginator-${nextPaginatorId++}`;
+    /** @internal */
+    pageSizeSelectId = `${this._componentId}-size`;
+    // ── Derived state ──
+    /** @internal Effective page size, coerced to at least 1. */
+    effectivePageSize = computed(() => Math.max(1, this.pageSize()), ...(ngDevMode ? [{ debugName: "effectivePageSize" }] : /* istanbul ignore next */ []));
+    /** @internal Total number of pages; always ≥ 1 to keep clamping math well-defined. */
+    totalPages = computed(() => {
+        const total = this.totalItems();
+        if (total <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(total / this.effectivePageSize()));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    /** @internal Current page clamped into `[1, totalPages]`. */
+    clampedPage = computed(() => Math.min(Math.max(1, this.page()), this.totalPages()), ...(ngDevMode ? [{ debugName: "clampedPage" }] : /* istanbul ignore next */ []));
+    /** @internal 1-based start item index on the current page. `0` when empty. */
+    startItem = computed(() => {
+        if (this.totalItems() <= 0)
+            return 0;
+        return (this.clampedPage() - 1) * this.effectivePageSize() + 1;
+    }, ...(ngDevMode ? [{ debugName: "startItem" }] : /* istanbul ignore next */ []));
+    /** @internal 1-based end item index on the current page. `0` when empty. */
+    endItem = computed(() => {
+        if (this.totalItems() <= 0)
+            return 0;
+        return Math.min(this.clampedPage() * this.effectivePageSize(), this.totalItems());
+    }, ...(ngDevMode ? [{ debugName: "endItem" }] : /* istanbul ignore next */ []));
+    /** @internal Visible page range for the numbered type. */
+    range = computed(() => buildPaginationRange(this.clampedPage(), this.totalPages(), this.siblingCount(), this.boundaryCount()), ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    /** @internal Merged labels. */
+    resolvedLabels = computed(() => ({
+        ...DEFAULT_LABELS,
+        ...this.labels(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    /** @internal Resolved aria-label for the root. */
+    resolvedAriaLabel = computed(() => this.customAriaLabel() ?? this.resolvedLabels().ariaLabel, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @internal `container-name` for the CSS container query (set only when responsive="auto"). */
+    containerName = computed(() => this.responsive() === 'auto' ? 'paginator' : null, ...(ngDevMode ? [{ debugName: "containerName" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.totalItems() <= 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    isAtFirstPage = computed(() => this.clampedPage() <= 1, ...(ngDevMode ? [{ debugName: "isAtFirstPage" }] : /* istanbul ignore next */ []));
+    isAtLastPage = computed(() => this.clampedPage() >= this.totalPages(), ...(ngDevMode ? [{ debugName: "isAtLastPage" }] : /* istanbul ignore next */ []));
+    /** @internal Target page for the Previous button (clamped to `[1, totalPages]`). */
+    previousTarget = computed(() => Math.max(1, this.clampedPage() - 1), ...(ngDevMode ? [{ debugName: "previousTarget" }] : /* istanbul ignore next */ []));
+    /** @internal Target page for the Next button (clamped to `[1, totalPages]`). */
+    nextTarget = computed(() => Math.min(this.totalPages(), this.clampedPage() + 1), ...(ngDevMode ? [{ debugName: "nextTarget" }] : /* istanbul ignore next */ []));
+    /** @internal Whether the component should render at all. */
+    shouldRender = computed(() => {
+        if (this.isEmpty() && this.hideOnEmpty())
+            return false;
+        if (this.hideOnSinglePage() && this.totalPages() <= 1 && !this.isEmpty())
+            return false;
+        return true;
+    }, ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    // ── Variant class computation ──
+    _variantResult = computed(() => paginatorVariants({
+        size: this.size(),
+        layout: this.layout(),
+        type: this.type(),
+        responsive: this.responsive(),
+        disabled: this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this._variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => this._variantResult().inner(), ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    pageSizeGroupClasses = computed(() => this._variantResult().pageSizeGroup(), ...(ngDevMode ? [{ debugName: "pageSizeGroupClasses" }] : /* istanbul ignore next */ []));
+    pageSizeLabelClasses = computed(() => this._variantResult().pageSizeLabel(), ...(ngDevMode ? [{ debugName: "pageSizeLabelClasses" }] : /* istanbul ignore next */ []));
+    pageSizeSelectClasses = computed(() => this._variantResult().pageSizeSelect(), ...(ngDevMode ? [{ debugName: "pageSizeSelectClasses" }] : /* istanbul ignore next */ []));
+    pageInfoClasses = computed(() => this._variantResult().pageInfo(), ...(ngDevMode ? [{ debugName: "pageInfoClasses" }] : /* istanbul ignore next */ []));
+    navGroupClasses = computed(() => this._variantResult().navGroup(), ...(ngDevMode ? [{ debugName: "navGroupClasses" }] : /* istanbul ignore next */ []));
+    pageListClasses = computed(() => this._variantResult().pageList(), ...(ngDevMode ? [{ debugName: "pageListClasses" }] : /* istanbul ignore next */ []));
+    navButtonClasses = computed(() => this._variantResult().navButton(), ...(ngDevMode ? [{ debugName: "navButtonClasses" }] : /* istanbul ignore next */ []));
+    ellipsisClasses = computed(() => this._variantResult().ellipsis(), ...(ngDevMode ? [{ debugName: "ellipsisClasses" }] : /* istanbul ignore next */ []));
+    emptyStateClasses = computed(() => this._variantResult().emptyState(), ...(ngDevMode ? [{ debugName: "emptyStateClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this._variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal Applies active-color classes to the current page button. */
+    pageButtonClasses(active) {
+        const base = this._variantResult().pageButton();
+        if (!active)
+            return base;
+        const color = this.color();
+        return `${base} ${PAGE_BUTTON_ACTIVE_BG[color]} ${PAGE_BUTTON_ACTIVE_FG[color]}`;
+    }
+    // ── Projected template lookup ──
+    /** @internal */
+    labelTemplateFor(slot) {
+        const match = this.labelDirectives().find((d) => d.slot() === slot);
+        return match ? match.templateRef : null;
+    }
+    /** @internal Template-context wrapper so projected templates receive `$implicit: TwPaginatorLabelContext`. */
+    labelContext = computed(() => ({
+        $implicit: {
+            page: this.clampedPage(),
+            totalPages: this.totalPages(),
+            start: this.startItem(),
+            end: this.endItem(),
+            totalItems: this.totalItems(),
+            pageSize: this.effectivePageSize(),
+            disabled: this.disabled(),
+        },
+    }), ...(ngDevMode ? [{ debugName: "labelContext" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    pageSizeContext = computed(() => ({
+        $implicit: {
+            pageSize: this.effectivePageSize(),
+            options: this.pageSizeOptions(),
+            setPageSize: (n) => this._setPageSize(n),
+        },
+    }), ...(ngDevMode ? [{ debugName: "pageSizeContext" }] : /* istanbul ignore next */ []));
+    // ── Rendered strings ──
+    /** @internal Default page-info string (type-aware). */
+    formattedPageInfo = computed(() => {
+        const labels = this.resolvedLabels();
+        if (this.isEmpty())
+            return labels.empty;
+        if (this.type() === 'basic') {
+            return formatLabel(labels.pageRange, {
+                start: this.startItem(),
+                end: this.endItem(),
+                total: this.totalItems(),
+            });
+        }
+        return `${labels.pageInfo} ${this.clampedPage()}${labels.pageInfoSeparator}${this.totalPages()}`;
+    }, ...(ngDevMode ? [{ debugName: "formattedPageInfo" }] : /* istanbul ignore next */ []));
+    /** @internal ARIA label for a numbered page button. */
+    formatPageButtonLabel(page) {
+        return formatLabel(this.resolvedLabels().pageButtonAriaLabel, { page });
+    }
+    /** @internal ARIA label for the current page button. */
+    formatCurrentPageLabel(page) {
+        return formatLabel(this.resolvedLabels().currentPageAriaLabel, { page });
+    }
+    /** @internal Returns the anchor href for a page when `linkFactory` is set and the page is navigable. */
+    hrefFor(page) {
+        const lf = this.linkFactory();
+        if (!lf)
+            return null;
+        if (this.disabled())
+            return null;
+        return lf(Math.min(Math.max(1, page), this.totalPages()));
+    }
+    // ── State bookkeeping (for emission) ──
+    _previousPage = this.page();
+    _previousPageSize = this.pageSize();
+    _pendingSource = null;
+    _initialized = false;
+    // ── Keyboard navigation (CDK FocusKeyManager) ──
+    /** @internal */
+    _keyManager = null;
+    constructor() {
+        afterNextRender(() => {
+            this._initialized = true;
+            if (isDevMode()) {
+                this._runDevWarnings();
+            }
+        });
+        // Emit pageChange whenever page or pageSize changes (after initial render).
+        // When an out-of-range page is detected, clamp and emit with source 'programmatic'.
+        effect(() => {
+            const newPage = this.page();
+            const newSize = this.pageSize();
+            const tp = this.totalPages();
+            untracked(() => {
+                const oldPage = this._previousPage;
+                const oldSize = this._previousPageSize;
+                // Clamp out-of-bounds page — do this first, then allow a follow-up tick to emit.
+                const clamped = Math.min(Math.max(1, newPage), tp);
+                if (clamped !== newPage) {
+                    // Set pending source only if nothing else is pending (preserve originator).
+                    if (this._pendingSource === null)
+                        this._pendingSource = 'programmatic';
+                    this.page.set(clamped);
+                    return;
+                }
+                if (newPage === oldPage && newSize === oldSize) {
+                    // No effective change (first run after init).
+                    return;
+                }
+                this._previousPage = newPage;
+                this._previousPageSize = newSize;
+                if (!this._initialized)
+                    return;
+                const source = this._pendingSource ?? 'programmatic';
+                this._pendingSource = null;
+                this._emitChange(newPage, newSize, oldPage, oldSize, source);
+                this._announce(newPage);
+            });
+        });
+        // Rebuild the FocusKeyManager whenever the focusable set changes (e.g. the
+        // numbered page list re-renders when total or current page shifts). No
+        // `.withWrap()` — paginators should NOT loop from page 1 ArrowLeft to the
+        // last page; that would be disorienting. Mirrors `accordion.ts` and the S12
+        // tabs/tab-nav migration. The `disabled` getter on `PaginatorFocusableDirective`
+        // resolves the `isDisabled()` signal so the manager skips disabled controls.
+        // `onCleanup` fires both on rebuild AND on component destroy, so no separate
+        // `_destroyRef.onDestroy` is needed.
+        effect((onCleanup) => {
+            const items = this.focusableItems();
+            if (items.length === 0) {
+                this._keyManager = null;
+                return;
+            }
+            const manager = new FocusKeyManager(items)
+                .withHorizontalOrientation('ltr')
+                .withHomeAndEnd();
+            this._keyManager = manager;
+            onCleanup(() => {
+                manager.destroy();
+            });
+        });
+    }
+    // ── User-facing action methods ──
+    /** @internal Navigate to a specific page (click/keyboard handler). */
+    goTo(target, source) {
+        if (this.disabled())
+            return;
+        const tp = this.totalPages();
+        const next = Math.min(Math.max(1, target), tp);
+        if (next === this.clampedPage())
+            return;
+        this._pendingSource = source;
+        this.page.set(next);
+    }
+    /** @internal Click handler for anchor-link mode. Suppresses navigation for disabled targets. */
+    onLinkClick(event, target, disabled, source) {
+        if (disabled || this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        // Let the browser follow the anchor; still emit a pageChange.
+        this.goTo(target, source);
+    }
+    /** @internal Handler for the default page-size `<select>`. */
+    onPageSizeSelectChange(event) {
+        const target = event.target;
+        const parsed = Number(target.value);
+        if (Number.isFinite(parsed) && parsed > 0) {
+            this._setPageSize(parsed);
+        }
+    }
+    _setPageSize(size) {
+        if (this.disabled())
+            return;
+        const newSize = Math.max(1, Math.floor(size));
+        const oldPage = this.clampedPage();
+        const oldSize = this.effectivePageSize();
+        if (newSize === oldSize)
+            return;
+        const firstItem = (oldPage - 1) * oldSize + 1;
+        const total = this.totalItems();
+        const newTp = total <= 0 ? 1 : Math.max(1, Math.ceil(total / newSize));
+        const newPage = Math.min(Math.max(1, Math.ceil(firstItem / newSize)), newTp);
+        this._pendingSource = 'pageSizeChange';
+        this.pageSize.set(newSize);
+        if (newPage !== oldPage)
+            this.page.set(newPage);
+        // If only pageSize changed but page value is unchanged, the effect still fires
+        // because pageSize is tracked.
+    }
+    /**
+     * @internal Keyboard navigation inside the nav group. Delegates ArrowLeft /
+     * ArrowRight / Home / End to CDK `FocusKeyManager`. The manager skips
+     * disabled controls automatically via the `disabled` getter on
+     * `PaginatorFocusableDirective`.
+     */
+    onKeydown(event) {
+        if (!this._keyManager)
+            return;
+        const items = this.focusableItems();
+        if (items.length === 0)
+            return;
+        // Sync the manager's active index to whichever focusable currently owns DOM
+        // focus, so arrow keys move from the user's perceived position rather than
+        // the stale post-render default of -1.
+        const focusedIdx = items.findIndex((item) => item.elementRef.nativeElement === event.target);
+        if (focusedIdx >= 0 && focusedIdx !== this._keyManager.activeItemIndex) {
+            this._keyManager.setActiveItem(focusedIdx);
+        }
+        this._keyManager.onKeydown(event);
+    }
+    // ── Emission + announcement ──
+    _emitChange(page, pageSize, previousPage, previousPageSize, source) {
+        const total = this.totalItems();
+        const effSize = Math.max(1, pageSize);
+        const tp = total <= 0 ? 1 : Math.max(1, Math.ceil(total / effSize));
+        const start = total <= 0 ? 0 : (page - 1) * effSize + 1;
+        const end = total <= 0 ? 0 : Math.min(page * effSize, total);
+        this.paginated.emit({
+            page,
+            pageSize: effSize,
+            previousPage,
+            previousPageSize,
+            totalItems: total,
+            totalPages: tp,
+            start,
+            end,
+            source,
+        });
+    }
+    _announce(page) {
+        const msg = formatLabel(this.resolvedLabels().announcement, {
+            page,
+            totalPages: this.totalPages(),
+            start: this.startItem(),
+            end: this.endItem(),
+            total: this.totalItems(),
+        });
+        this._liveAnnouncer.announce(msg, 'polite');
+    }
+    // ── Dev warnings ──
+    _runDevWarnings() {
+        if (this.totalItems() < 0) {
+            console.warn('[tw-paginator] totalItems is negative — coercing to 0.');
+        }
+        if (this.pageSize() < 1) {
+            console.warn('[tw-paginator] pageSize is less than 1 — coercing to 1.');
+        }
+        if (this.showPageSizeSelector() && this.pageSizeOptions().length === 0) {
+            console.warn('[tw-paginator] showPageSizeSelector is true but pageSizeOptions is empty — selector will not render.');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PaginatorComponent, isStandalone: true, selector: "tw-paginator", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageInfo: { classPropertyName: "showPageInfo", publicName: "showPageInfo", isSignal: true, isRequired: false, transformFunction: null }, hideOnEmpty: { classPropertyName: "hideOnEmpty", publicName: "hideOnEmpty", isSignal: true, isRequired: false, transformFunction: null }, hideOnSinglePage: { classPropertyName: "hideOnSinglePage", publicName: "hideOnSinglePage", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, linkFactory: { classPropertyName: "linkFactory", publicName: "linkFactory", isSignal: true, isRequired: false, transformFunction: null }, customAriaLabel: { classPropertyName: "customAriaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", page: "pageChange", paginated: "paginated" }, host: { properties: { "attr.role": "shouldRender() ? \"navigation\" : null", "class": "rootClasses()", "attr.aria-label": "shouldRender() ? resolvedAriaLabel() : null", "style.container-name": "containerName()" } }, queries: [{ propertyName: "labelDirectives", predicate: PaginatorLabelDirective, isSignal: true }, { propertyName: "emptyDirective", first: true, predicate: PaginatorEmptyDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeSelectorDirective", first: true, predicate: PaginatorPageSizeSelectorDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "focusableItems", predicate: PaginatorFocusableDirective, descendants: true, isSignal: true }], exportAs: ["twPaginator"], ngImport: i0, template: "@if (shouldRender()) {\n  <div [class]=\"innerClasses()\">\n    @if (isEmpty()) {\n      <!-- Empty state -->\n      @if (emptyDirective(); as emptyDir) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyDir.templateRef\"\n          [ngTemplateOutletContext]=\"labelContext()\"\n        />\n      } @else {\n        <span [class]=\"emptyStateClasses()\">{{ resolvedLabels().empty }}</span>\n      }\n    } @else {\n      <!-- Page-size selector region -->\n      @if (showPageSizeSelector() && pageSizeOptions().length > 0) {\n        <div [class]=\"pageSizeGroupClasses()\">\n          <label\n            [attr.for]=\"pageSizeSelectId\"\n            [class]=\"pageSizeLabelClasses()\"\n          >\n            @if (labelTemplateFor('pageSizeLabel'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              {{ resolvedLabels().pageSizeLabel }}\n            }\n          </label>\n\n          @if (pageSizeSelectorDirective(); as dir) {\n            <ng-container\n              [ngTemplateOutlet]=\"dir.templateRef\"\n              [ngTemplateOutletContext]=\"pageSizeContext()\"\n            />\n          } @else {\n            <select\n              [id]=\"pageSizeSelectId\"\n              [class]=\"pageSizeSelectClasses()\"\n              [disabled]=\"disabled()\"\n              [value]=\"effectivePageSize()\"\n              (change)=\"onPageSizeSelectChange($event)\"\n            >\n              @for (opt of pageSizeOptions(); track opt) {\n                <option [value]=\"opt\">{{ opt }}</option>\n              }\n            </select>\n          }\n        </div>\n      }\n\n      <!-- Page info region -->\n      @if (showPageInfo()) {\n        <div [class]=\"pageInfoClasses()\">\n          @if (labelTemplateFor('pageInfo'); as tmpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tmpl\"\n              [ngTemplateOutletContext]=\"labelContext()\"\n            />\n          } @else {\n            {{ formattedPageInfo() }}\n          }\n        </div>\n      }\n\n      <!-- Nav buttons region -->\n      <div\n        [class]=\"navGroupClasses()\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        <!-- First -->\n        @if (showFirstLastButtons()) {\n          @let firstDisabled = disabled() || isAtFirstPage();\n          @if (linkFactory()) {\n            <a\n              data-tw-paginator-focusable\n              [isDisabled]=\"firstDisabled\"\n              data-tw-paginator-nav=\"first\"\n              [class]=\"navButtonClasses()\"\n              [attr.href]=\"firstDisabled ? null : hrefFor(1)\"\n              [attr.aria-disabled]=\"firstDisabled ? 'true' : null\"\n              [attr.tabindex]=\"firstDisabled ? -1 : 0\"\n              [attr.aria-label]=\"resolvedLabels().first\"\n              (click)=\"onLinkClick($event, 1, firstDisabled, 'click')\"\n            >\n              @if (labelTemplateFor('first'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M10.78 4.22a.75.75 0 0 1 0 1.06L6.06 10l4.72 4.72a.75.75 0 0 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Zm6 0a.75.75 0 0 1 0 1.06L12.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              data-tw-paginator-focusable\n              [isDisabled]=\"firstDisabled\"\n              data-tw-paginator-nav=\"first\"\n              [class]=\"navButtonClasses()\"\n              [disabled]=\"firstDisabled\"\n              [attr.aria-label]=\"resolvedLabels().first\"\n              (click)=\"goTo(1, 'click')\"\n            >\n              @if (labelTemplateFor('first'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M10.78 4.22a.75.75 0 0 1 0 1.06L6.06 10l4.72 4.72a.75.75 0 0 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Zm6 0a.75.75 0 0 1 0 1.06L12.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </button>\n          }\n        }\n\n        <!-- Previous -->\n        @let prevDisabled = disabled() || isAtFirstPage();\n        @let prevTarget = previousTarget();\n        @if (linkFactory()) {\n          <a\n            data-tw-paginator-focusable\n            [isDisabled]=\"prevDisabled\"\n            data-tw-paginator-nav=\"prev\"\n            [class]=\"navButtonClasses()\"\n            [attr.href]=\"prevDisabled ? null : hrefFor(prevTarget)\"\n            [attr.aria-disabled]=\"prevDisabled ? 'true' : null\"\n            [attr.tabindex]=\"prevDisabled ? -1 : 0\"\n            [attr.aria-label]=\"resolvedLabels().previous\"\n            (click)=\"onLinkClick($event, prevTarget, prevDisabled, 'click')\"\n          >\n            @if (labelTemplateFor('previous'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            data-tw-paginator-focusable\n            [isDisabled]=\"prevDisabled\"\n            data-tw-paginator-nav=\"prev\"\n            [class]=\"navButtonClasses()\"\n            [disabled]=\"prevDisabled\"\n            [attr.aria-label]=\"resolvedLabels().previous\"\n            (click)=\"goTo(prevTarget, 'click')\"\n          >\n            @if (labelTemplateFor('previous'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </button>\n        }\n\n        <!-- Numbered page list -->\n        @if (type() === 'numbered') {\n          <div [class]=\"pageListClasses()\">\n            @for (item of range(); track $index) {\n              @if (item === 'ellipsis-left' || item === 'ellipsis-right') {\n                <span\n                  [class]=\"ellipsisClasses()\"\n                  [attr.aria-label]=\"resolvedLabels().ellipsis\"\n                >\n                  <span aria-hidden=\"true\">&hellip;</span>\n                </span>\n              } @else {\n                @let pageNumber = item;\n                @let isActive = pageNumber === clampedPage();\n                @let pageDisabled = disabled();\n                @if (linkFactory()) {\n                  <a\n                    data-tw-paginator-focusable\n                    [isDisabled]=\"pageDisabled\"\n                    data-tw-paginator-nav=\"page\"\n                    [class]=\"pageButtonClasses(isActive)\"\n                    [attr.href]=\"pageDisabled ? null : hrefFor(pageNumber)\"\n                    [attr.aria-disabled]=\"pageDisabled ? 'true' : null\"\n                    [attr.tabindex]=\"pageDisabled ? -1 : 0\"\n                    [attr.aria-current]=\"isActive ? 'page' : null\"\n                    [attr.aria-label]=\"\n                      isActive\n                        ? formatCurrentPageLabel(pageNumber)\n                        : formatPageButtonLabel(pageNumber)\n                    \"\n                    (click)=\"onLinkClick($event, pageNumber, pageDisabled, 'click')\"\n                  >{{ pageNumber }}</a>\n                } @else {\n                  <button\n                    type=\"button\"\n                    data-tw-paginator-focusable\n                    [isDisabled]=\"pageDisabled\"\n                    data-tw-paginator-nav=\"page\"\n                    [class]=\"pageButtonClasses(isActive)\"\n                    [disabled]=\"pageDisabled\"\n                    [attr.aria-current]=\"isActive ? 'page' : null\"\n                    [attr.aria-label]=\"\n                      isActive\n                        ? formatCurrentPageLabel(pageNumber)\n                        : formatPageButtonLabel(pageNumber)\n                    \"\n                    (click)=\"goTo(pageNumber, 'click')\"\n                  >{{ pageNumber }}</button>\n                }\n              }\n            }\n          </div>\n        }\n\n        <!-- Next -->\n        @let nextDisabled = disabled() || isAtLastPage();\n        @let nextTargetPage = nextTarget();\n        @if (linkFactory()) {\n          <a\n            data-tw-paginator-focusable\n            [isDisabled]=\"nextDisabled\"\n            data-tw-paginator-nav=\"next\"\n            [class]=\"navButtonClasses()\"\n            [attr.href]=\"nextDisabled ? null : hrefFor(nextTargetPage)\"\n            [attr.aria-disabled]=\"nextDisabled ? 'true' : null\"\n            [attr.tabindex]=\"nextDisabled ? -1 : 0\"\n            [attr.aria-label]=\"resolvedLabels().next\"\n            (click)=\"onLinkClick($event, nextTargetPage, nextDisabled, 'click')\"\n          >\n            @if (labelTemplateFor('next'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            data-tw-paginator-focusable\n            [isDisabled]=\"nextDisabled\"\n            data-tw-paginator-nav=\"next\"\n            [class]=\"navButtonClasses()\"\n            [disabled]=\"nextDisabled\"\n            [attr.aria-label]=\"resolvedLabels().next\"\n            (click)=\"goTo(nextTargetPage, 'click')\"\n          >\n            @if (labelTemplateFor('next'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </button>\n        }\n\n        <!-- Last -->\n        @if (showFirstLastButtons()) {\n          @let lastDisabled = disabled() || isAtLastPage();\n          @if (linkFactory()) {\n            <a\n              data-tw-paginator-focusable\n              [isDisabled]=\"lastDisabled\"\n              data-tw-paginator-nav=\"last\"\n              [class]=\"navButtonClasses()\"\n              [attr.href]=\"lastDisabled ? null : hrefFor(totalPages())\"\n              [attr.aria-disabled]=\"lastDisabled ? 'true' : null\"\n              [attr.tabindex]=\"lastDisabled ? -1 : 0\"\n              [attr.aria-label]=\"resolvedLabels().last\"\n              (click)=\"onLinkClick($event, totalPages(), lastDisabled, 'click')\"\n            >\n              @if (labelTemplateFor('last'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M3.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06-1.06L7.94 10 3.22 5.28a.75.75 0 0 1 0-1.06Zm6 0a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L13.94 10 9.22 5.28a.75.75 0 0 1 0-1.06Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              data-tw-paginator-focusable\n              [isDisabled]=\"lastDisabled\"\n              data-tw-paginator-nav=\"last\"\n              [class]=\"navButtonClasses()\"\n              [disabled]=\"lastDisabled\"\n              [attr.aria-label]=\"resolvedLabels().last\"\n              (click)=\"goTo(totalPages(), 'click')\"\n            >\n              @if (labelTemplateFor('last'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M3.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06-1.06L7.94 10 3.22 5.28a.75.75 0 0 1 0-1.06Zm6 0a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L13.94 10 9.22 5.28a.75.75 0 0 1 0-1.06Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PaginatorFocusableDirective, selector: "[data-tw-paginator-focusable]", inputs: ["isDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tw-paginator', exportAs: 'twPaginator', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, PaginatorFocusableDirective], host: {
+                        '[attr.role]': 'shouldRender() ? "navigation" : null',
+                        '[class]': 'rootClasses()',
+                        '[attr.aria-label]': 'shouldRender() ? resolvedAriaLabel() : null',
+                        '[style.container-name]': 'containerName()',
+                    }, template: "@if (shouldRender()) {\n  <div [class]=\"innerClasses()\">\n    @if (isEmpty()) {\n      <!-- Empty state -->\n      @if (emptyDirective(); as emptyDir) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyDir.templateRef\"\n          [ngTemplateOutletContext]=\"labelContext()\"\n        />\n      } @else {\n        <span [class]=\"emptyStateClasses()\">{{ resolvedLabels().empty }}</span>\n      }\n    } @else {\n      <!-- Page-size selector region -->\n      @if (showPageSizeSelector() && pageSizeOptions().length > 0) {\n        <div [class]=\"pageSizeGroupClasses()\">\n          <label\n            [attr.for]=\"pageSizeSelectId\"\n            [class]=\"pageSizeLabelClasses()\"\n          >\n            @if (labelTemplateFor('pageSizeLabel'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              {{ resolvedLabels().pageSizeLabel }}\n            }\n          </label>\n\n          @if (pageSizeSelectorDirective(); as dir) {\n            <ng-container\n              [ngTemplateOutlet]=\"dir.templateRef\"\n              [ngTemplateOutletContext]=\"pageSizeContext()\"\n            />\n          } @else {\n            <select\n              [id]=\"pageSizeSelectId\"\n              [class]=\"pageSizeSelectClasses()\"\n              [disabled]=\"disabled()\"\n              [value]=\"effectivePageSize()\"\n              (change)=\"onPageSizeSelectChange($event)\"\n            >\n              @for (opt of pageSizeOptions(); track opt) {\n                <option [value]=\"opt\">{{ opt }}</option>\n              }\n            </select>\n          }\n        </div>\n      }\n\n      <!-- Page info region -->\n      @if (showPageInfo()) {\n        <div [class]=\"pageInfoClasses()\">\n          @if (labelTemplateFor('pageInfo'); as tmpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"tmpl\"\n              [ngTemplateOutletContext]=\"labelContext()\"\n            />\n          } @else {\n            {{ formattedPageInfo() }}\n          }\n        </div>\n      }\n\n      <!-- Nav buttons region -->\n      <div\n        [class]=\"navGroupClasses()\"\n        (keydown)=\"onKeydown($event)\"\n      >\n        <!-- First -->\n        @if (showFirstLastButtons()) {\n          @let firstDisabled = disabled() || isAtFirstPage();\n          @if (linkFactory()) {\n            <a\n              data-tw-paginator-focusable\n              [isDisabled]=\"firstDisabled\"\n              data-tw-paginator-nav=\"first\"\n              [class]=\"navButtonClasses()\"\n              [attr.href]=\"firstDisabled ? null : hrefFor(1)\"\n              [attr.aria-disabled]=\"firstDisabled ? 'true' : null\"\n              [attr.tabindex]=\"firstDisabled ? -1 : 0\"\n              [attr.aria-label]=\"resolvedLabels().first\"\n              (click)=\"onLinkClick($event, 1, firstDisabled, 'click')\"\n            >\n              @if (labelTemplateFor('first'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M10.78 4.22a.75.75 0 0 1 0 1.06L6.06 10l4.72 4.72a.75.75 0 0 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Zm6 0a.75.75 0 0 1 0 1.06L12.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              data-tw-paginator-focusable\n              [isDisabled]=\"firstDisabled\"\n              data-tw-paginator-nav=\"first\"\n              [class]=\"navButtonClasses()\"\n              [disabled]=\"firstDisabled\"\n              [attr.aria-label]=\"resolvedLabels().first\"\n              (click)=\"goTo(1, 'click')\"\n            >\n              @if (labelTemplateFor('first'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M10.78 4.22a.75.75 0 0 1 0 1.06L6.06 10l4.72 4.72a.75.75 0 0 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Zm6 0a.75.75 0 0 1 0 1.06L12.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </button>\n          }\n        }\n\n        <!-- Previous -->\n        @let prevDisabled = disabled() || isAtFirstPage();\n        @let prevTarget = previousTarget();\n        @if (linkFactory()) {\n          <a\n            data-tw-paginator-focusable\n            [isDisabled]=\"prevDisabled\"\n            data-tw-paginator-nav=\"prev\"\n            [class]=\"navButtonClasses()\"\n            [attr.href]=\"prevDisabled ? null : hrefFor(prevTarget)\"\n            [attr.aria-disabled]=\"prevDisabled ? 'true' : null\"\n            [attr.tabindex]=\"prevDisabled ? -1 : 0\"\n            [attr.aria-label]=\"resolvedLabels().previous\"\n            (click)=\"onLinkClick($event, prevTarget, prevDisabled, 'click')\"\n          >\n            @if (labelTemplateFor('previous'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            data-tw-paginator-focusable\n            [isDisabled]=\"prevDisabled\"\n            data-tw-paginator-nav=\"prev\"\n            [class]=\"navButtonClasses()\"\n            [disabled]=\"prevDisabled\"\n            [attr.aria-label]=\"resolvedLabels().previous\"\n            (click)=\"goTo(prevTarget, 'click')\"\n          >\n            @if (labelTemplateFor('previous'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </button>\n        }\n\n        <!-- Numbered page list -->\n        @if (type() === 'numbered') {\n          <div [class]=\"pageListClasses()\">\n            @for (item of range(); track $index) {\n              @if (item === 'ellipsis-left' || item === 'ellipsis-right') {\n                <span\n                  [class]=\"ellipsisClasses()\"\n                  [attr.aria-label]=\"resolvedLabels().ellipsis\"\n                >\n                  <span aria-hidden=\"true\">&hellip;</span>\n                </span>\n              } @else {\n                @let pageNumber = item;\n                @let isActive = pageNumber === clampedPage();\n                @let pageDisabled = disabled();\n                @if (linkFactory()) {\n                  <a\n                    data-tw-paginator-focusable\n                    [isDisabled]=\"pageDisabled\"\n                    data-tw-paginator-nav=\"page\"\n                    [class]=\"pageButtonClasses(isActive)\"\n                    [attr.href]=\"pageDisabled ? null : hrefFor(pageNumber)\"\n                    [attr.aria-disabled]=\"pageDisabled ? 'true' : null\"\n                    [attr.tabindex]=\"pageDisabled ? -1 : 0\"\n                    [attr.aria-current]=\"isActive ? 'page' : null\"\n                    [attr.aria-label]=\"\n                      isActive\n                        ? formatCurrentPageLabel(pageNumber)\n                        : formatPageButtonLabel(pageNumber)\n                    \"\n                    (click)=\"onLinkClick($event, pageNumber, pageDisabled, 'click')\"\n                  >{{ pageNumber }}</a>\n                } @else {\n                  <button\n                    type=\"button\"\n                    data-tw-paginator-focusable\n                    [isDisabled]=\"pageDisabled\"\n                    data-tw-paginator-nav=\"page\"\n                    [class]=\"pageButtonClasses(isActive)\"\n                    [disabled]=\"pageDisabled\"\n                    [attr.aria-current]=\"isActive ? 'page' : null\"\n                    [attr.aria-label]=\"\n                      isActive\n                        ? formatCurrentPageLabel(pageNumber)\n                        : formatPageButtonLabel(pageNumber)\n                    \"\n                    (click)=\"goTo(pageNumber, 'click')\"\n                  >{{ pageNumber }}</button>\n                }\n              }\n            }\n          </div>\n        }\n\n        <!-- Next -->\n        @let nextDisabled = disabled() || isAtLastPage();\n        @let nextTargetPage = nextTarget();\n        @if (linkFactory()) {\n          <a\n            data-tw-paginator-focusable\n            [isDisabled]=\"nextDisabled\"\n            data-tw-paginator-nav=\"next\"\n            [class]=\"navButtonClasses()\"\n            [attr.href]=\"nextDisabled ? null : hrefFor(nextTargetPage)\"\n            [attr.aria-disabled]=\"nextDisabled ? 'true' : null\"\n            [attr.tabindex]=\"nextDisabled ? -1 : 0\"\n            [attr.aria-label]=\"resolvedLabels().next\"\n            (click)=\"onLinkClick($event, nextTargetPage, nextDisabled, 'click')\"\n          >\n            @if (labelTemplateFor('next'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </a>\n        } @else {\n          <button\n            type=\"button\"\n            data-tw-paginator-focusable\n            [isDisabled]=\"nextDisabled\"\n            data-tw-paginator-nav=\"next\"\n            [class]=\"navButtonClasses()\"\n            [disabled]=\"nextDisabled\"\n            [attr.aria-label]=\"resolvedLabels().next\"\n            (click)=\"goTo(nextTargetPage, 'click')\"\n          >\n            @if (labelTemplateFor('next'); as tmpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"tmpl\"\n                [ngTemplateOutletContext]=\"labelContext()\"\n              />\n            } @else {\n              <svg\n                [class]=\"iconClasses()\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0Z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            }\n          </button>\n        }\n\n        <!-- Last -->\n        @if (showFirstLastButtons()) {\n          @let lastDisabled = disabled() || isAtLastPage();\n          @if (linkFactory()) {\n            <a\n              data-tw-paginator-focusable\n              [isDisabled]=\"lastDisabled\"\n              data-tw-paginator-nav=\"last\"\n              [class]=\"navButtonClasses()\"\n              [attr.href]=\"lastDisabled ? null : hrefFor(totalPages())\"\n              [attr.aria-disabled]=\"lastDisabled ? 'true' : null\"\n              [attr.tabindex]=\"lastDisabled ? -1 : 0\"\n              [attr.aria-label]=\"resolvedLabels().last\"\n              (click)=\"onLinkClick($event, totalPages(), lastDisabled, 'click')\"\n            >\n              @if (labelTemplateFor('last'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M3.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06-1.06L7.94 10 3.22 5.28a.75.75 0 0 1 0-1.06Zm6 0a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L13.94 10 9.22 5.28a.75.75 0 0 1 0-1.06Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              data-tw-paginator-focusable\n              [isDisabled]=\"lastDisabled\"\n              data-tw-paginator-nav=\"last\"\n              [class]=\"navButtonClasses()\"\n              [disabled]=\"lastDisabled\"\n              [attr.aria-label]=\"resolvedLabels().last\"\n              (click)=\"goTo(totalPages(), 'click')\"\n            >\n              @if (labelTemplateFor('last'); as tmpl) {\n                <ng-container\n                  [ngTemplateOutlet]=\"tmpl\"\n                  [ngTemplateOutletContext]=\"labelContext()\"\n                />\n              } @else {\n                <svg\n                  [class]=\"iconClasses()\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    d=\"M3.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06-1.06L7.94 10 3.22 5.28a.75.75 0 0 1 0-1.06Zm6 0a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L13.94 10 9.22 5.28a.75.75 0 0 1 0-1.06Z\"\n                    clip-rule=\"evenodd\"\n                  />\n                </svg>\n              }\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [], 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"] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageInfo", required: false }] }], hideOnEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnEmpty", required: false }] }], hideOnSinglePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnSinglePage", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], linkFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkFactory", required: false }] }], customAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], paginated: [{ type: i0.Output, args: ["paginated"] }], labelDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PaginatorLabelDirective), { isSignal: true }] }], emptyDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginatorEmptyDirective), { isSignal: true }] }], pageSizeSelectorDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PaginatorPageSizeSelectorDirective), { isSignal: true }] }], focusableItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => PaginatorFocusableDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PaginatorComponent, PaginatorEmptyDirective, PaginatorLabelDirective, PaginatorPageSizeSelectorDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-paginator.mjs.map