@cdevhub/ngx-tw 0.2.0 → 0.3.0

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

@@ -203,17 +203,18 @@ const paginatorVariants = tv({
  */
 class PaginatorLabelDirective {
     /** The label slot this template overrides. */
-    slot = input.required(...(ngDevMode ? [{ debugName: "slot" }] : /* istanbul ignore next */ []));
+    slot = input.required(/* @ts-ignore */
+    ...(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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorLabelDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[twPaginatorLabel]' }]
         }], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: true }] }] } });
@@ -228,10 +229,10 @@ class PaginatorEmptyDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorEmptyDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[twPaginatorEmpty]' }]
         }] });
@@ -246,10 +247,10 @@ class PaginatorPageSizeSelectorDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorPageSizeSelectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorPageSizeSelectorDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[twPaginatorPageSizeSelector]' }]
         }] });
@@ -260,10 +261,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Applied via attribute selector on the existing `data-tw-paginator-focusable`
  * marker so the spec's button queries continue to match.
  */
+// Selector deliberately matches the existing `data-tw-paginator-focusable`
+// data-attribute marker emitted in the template; camelCasing would break the
+// spec's button queries. See the JSDoc above this declaration.
 class PaginatorFocusableDirective {
     elementRef = inject((ElementRef));
     /** When true, the element is skipped by `FocusKeyManager` roving focus. */
-    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     focus() {
         this.elementRef.nativeElement.focus();
     }
@@ -275,12 +280,13 @@ class PaginatorFocusableDirective {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorFocusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorFocusableDirective, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[data-tw-paginator-focusable]',
                 }]
         }], propDecorators: { isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }] } });
@@ -289,49 +295,68 @@ 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 */ []));
+    totalItems = input(0, /* @ts-ignore */
+    ...(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 */ []));
+    pageSize = model(10, /* @ts-ignore */
+    ...(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 */ []));
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     /** Rendering type. Defaults to `'numbered'`. */
-    type = input('numbered', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    type = input('numbered', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     /** Layout density. Defaults to `'compact'`. */
-    layout = input('compact', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    layout = input('compact', /* @ts-ignore */
+    ...(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 */ []));
+    size = input('md', /* @ts-ignore */
+    ...(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 */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(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 */ []));
+    siblingCount = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    boundaryCount = input(1, /* @ts-ignore */
+    ...(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 */ []));
+    showFirstLastButtons = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    showPageSizeSelector = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    pageSizeOptions = input([10, 25, 50, 100], /* @ts-ignore */
+    ...(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 */ []));
+    showPageInfo = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    hideOnEmpty = input(true, /* @ts-ignore */
+    ...(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 */ []));
+    hideOnSinglePage = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideOnSinglePage" }] : /* istanbul ignore next */ []));
     /** Responsive collapse mode. Defaults to `'auto'`. */
-    responsive = input('auto', ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+    responsive = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
     /** When true, every button is disabled. Defaults to `false`. */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(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 */ []));
+    labels = input({}, /* @ts-ignore */
+    ...(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 */ []));
+    linkFactory = input(undefined, /* @ts-ignore */
+    ...(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 ──
@@ -339,63 +364,81 @@ class PaginatorComponent {
     paginated = output();
     // ── Projected templates ──
     /** @internal */
-    labelDirectives = contentChildren(PaginatorLabelDirective, ...(ngDevMode ? [{ debugName: "labelDirectives" }] : /* istanbul ignore next */ []));
+    labelDirectives = contentChildren(PaginatorLabelDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelDirectives" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyDirective = contentChild(PaginatorEmptyDirective, ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
+    emptyDirective = contentChild(PaginatorEmptyDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
     /** @internal */
-    pageSizeSelectorDirective = contentChild(PaginatorPageSizeSelectorDirective, ...(ngDevMode ? [{ debugName: "pageSizeSelectorDirective" }] : /* istanbul ignore next */ []));
+    pageSizeSelectorDirective = contentChild(PaginatorPageSizeSelectorDirective, /* @ts-ignore */
+    ...(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 */ []));
+    focusableItems = viewChildren(PaginatorFocusableDirective, /* @ts-ignore */
+    ...(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 */ []));
+    effectivePageSize = computed(() => Math.max(1, this.pageSize()), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    clampedPage = computed(() => Math.min(Math.max(1, this.page()), this.totalPages()), /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @ts-ignore */
+    ...(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 */ []));
+    range = computed(() => buildPaginationRange(this.clampedPage(), this.totalPages(), this.siblingCount(), this.boundaryCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
     /** @internal Merged labels. */
     resolvedLabels = computed(() => ({
         ...DEFAULT_LABELS,
         ...this.labels(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(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 */ []));
+    resolvedAriaLabel = computed(() => this.customAriaLabel() ?? this.resolvedLabels().ariaLabel, /* @ts-ignore */
+    ...(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 */ []));
+    containerName = computed(() => this.responsive() === 'auto' ? 'paginator' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerName" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.totalItems() <= 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    isAtFirstPage = computed(() => this.clampedPage() <= 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAtFirstPage" }] : /* istanbul ignore next */ []));
+    isAtLastPage = computed(() => this.clampedPage() >= this.totalPages(), /* @ts-ignore */
+    ...(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 */ []));
+    previousTarget = computed(() => Math.max(1, this.clampedPage() - 1), /* @ts-ignore */
+    ...(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 */ []));
+    nextTarget = computed(() => Math.min(this.totalPages(), this.clampedPage() + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextTarget" }] : /* istanbul ignore next */ []));
     /** @internal Whether the component should render at all. */
     shouldRender = computed(() => {
         if (this.isEmpty() && this.hideOnEmpty())
@@ -403,7 +446,8 @@ class PaginatorComponent {
         if (this.hideOnSinglePage() && this.totalPages() <= 1 && !this.isEmpty())
             return false;
         return true;
-    }, ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldRender" }] : /* istanbul ignore next */ []));
     // ── Variant class computation ──
     _variantResult = computed(() => paginatorVariants({
         size: this.size(),
@@ -411,19 +455,32 @@ class PaginatorComponent {
         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 */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this._variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    innerClasses = computed(() => this._variantResult().inner(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
+    pageSizeGroupClasses = computed(() => this._variantResult().pageSizeGroup(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeGroupClasses" }] : /* istanbul ignore next */ []));
+    pageSizeLabelClasses = computed(() => this._variantResult().pageSizeLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeLabelClasses" }] : /* istanbul ignore next */ []));
+    pageSizeSelectClasses = computed(() => this._variantResult().pageSizeSelect(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeSelectClasses" }] : /* istanbul ignore next */ []));
+    pageInfoClasses = computed(() => this._variantResult().pageInfo(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageInfoClasses" }] : /* istanbul ignore next */ []));
+    navGroupClasses = computed(() => this._variantResult().navGroup(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navGroupClasses" }] : /* istanbul ignore next */ []));
+    pageListClasses = computed(() => this._variantResult().pageList(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageListClasses" }] : /* istanbul ignore next */ []));
+    navButtonClasses = computed(() => this._variantResult().navButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navButtonClasses" }] : /* istanbul ignore next */ []));
+    ellipsisClasses = computed(() => this._variantResult().ellipsis(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ellipsisClasses" }] : /* istanbul ignore next */ []));
+    emptyStateClasses = computed(() => this._variantResult().emptyState(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyStateClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this._variantResult().icon(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
     /** @internal Applies active-color classes to the current page button. */
     pageButtonClasses(active) {
         const base = this._variantResult().pageButton();
@@ -449,7 +506,8 @@ class PaginatorComponent {
             pageSize: this.effectivePageSize(),
             disabled: this.disabled(),
         },
-    }), ...(ngDevMode ? [{ debugName: "labelContext" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelContext" }] : /* istanbul ignore next */ []));
     /** @internal */
     pageSizeContext = computed(() => ({
         $implicit: {
@@ -457,7 +515,8 @@ class PaginatorComponent {
             options: this.pageSizeOptions(),
             setPageSize: (n) => this._setPageSize(n),
         },
-    }), ...(ngDevMode ? [{ debugName: "pageSizeContext" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeContext" }] : /* istanbul ignore next */ []));
     // ── Rendered strings ──
     /** @internal Default page-info string (type-aware). */
     formattedPageInfo = computed(() => {
@@ -472,7 +531,8 @@ class PaginatorComponent {
             });
         }
         return `${labels.pageInfo} ${this.clampedPage()}${labels.pageInfoSeparator}${this.totalPages()}`;
-    }, ...(ngDevMode ? [{ debugName: "formattedPageInfo" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedPageInfo" }] : /* istanbul ignore next */ []));
     /** @internal ARIA label for a numbered page button. */
     formatPageButtonLabel(page) {
         return formatLabel(this.resolvedLabels().pageButtonAriaLabel, { page });
@@ -507,6 +567,16 @@ class PaginatorComponent {
         });
         // Emit pageChange whenever page or pageSize changes (after initial render).
         // When an out-of-range page is detected, clamp and emit with source 'programmatic'.
+        //
+        // DOCUMENTED no-write-in-effect exception (see CLAUDE.md). This effect reads
+        // `page()` *and* writes `page.set(clamped)` — an intrinsic cycle, because the
+        // clamp must fire both when `totalPages` shrinks AND when the consumer assigns
+        // an out-of-range page (so `page` must stay a tracked dependency). The cycle is
+        // bounded by the `clamped !== newPage` guard: the write re-triggers the effect
+        // exactly once, the re-run sees an in-range value, and it settles. It never
+        // loops/freezes. The `untracked()` wrapper does NOT break this cycle (page is
+        // tracked above); its job is to keep the signal reads inside `_emitChange` /
+        // `_announce` from registering as effect dependencies.
         effect(() => {
             const newPage = this.page();
             const newSize = this.pageSize();
@@ -670,17 +740,17 @@ class PaginatorComponent {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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. Roving focus is owned by FocusKeyManager on the\n           child buttons; this wrapper only relays keydown to the manager, so\n           it does not need its own tabindex. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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" }]
+                    }, 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. Roving focus is owned by FocusKeyManager on the\n           child buttons; this wrapper only relays keydown to the manager, so\n           it does not need its own tabindex. -->\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\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 }] }] } });
 
 /**