@cdevhub/ngx-tw 0.5.0 → 0.6.1

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

@@ -2,9 +2,11 @@ import * as i0 from '@angular/core';
 import { input, inject, TemplateRef, Directive, ElementRef, model, output, contentChildren, contentChild, viewChildren, computed, afterNextRender, isDevMode, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { LiveAnnouncer, FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
 import { tv } from 'tailwind-variants';
 
 // ── Default labels ────────────────────────────────────────────────
+/** English defaults. `Required<>` so every key reads back as a plain `string`. */
 const DEFAULT_LABELS = {
     ariaLabel: 'Pagination',
     previous: 'Previous',
@@ -104,6 +106,13 @@ function range(start, end) {
 }
 /** Replaces `{key}` placeholders in `template` with values from `vars`. */
 function formatLabel(template, vars) {
+    // Defence in depth. `resolvedLabels()` already filters explicitly-undefined
+    // consumer keys, so a non-string cannot reach here through the public
+    // `labels` input today. The guard exists so a future regression in that
+    // merge degrades to a missing label instead of throwing inside a `computed`
+    // and taking the render down.
+    if (typeof template !== 'string')
+        return '';
     return template.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(vars, key) ? String(vars[key]) : match);
 }
 // ── tv() config ───────────────────────────────────────────────────
@@ -124,42 +133,50 @@ const paginatorVariants = tv({
         icon: 'size-4 shrink-0',
     },
     variants: {
+        // Heights are pinned to the control scale (docs/vertical-rhythm.md):
+        // 24 / 32 / 36 / 44 / 48. Vertical padding is deleted deliberately — the
+        // buttons centre via `inline-flex items-center justify-center` and the
+        // native `<select>` centres its own text, so any surviving `py-*` would
+        // only fight the pinned height under `box-sizing: border-box`. `min-w-*`
+        // tracks the height so number buttons stay square until the digits
+        // widen them. `ellipsis` moves in lockstep or the numbered row
+        // reintroduces a height divergence inside the component.
         size: {
             xs: {
-                navButton: 'px-2 py-1 text-xs min-w-7 h-7',
-                pageButton: 'px-2 py-1 text-xs min-w-7 h-7',
-                pageSizeSelect: 'px-2 py-1 text-xs',
-                ellipsis: 'min-w-7 h-7 text-xs',
+                navButton: 'px-2 text-xs min-w-6 h-6',
+                pageButton: 'px-2 text-xs min-w-6 h-6',
+                pageSizeSelect: 'px-2 text-xs h-6',
+                ellipsis: 'min-w-6 h-6 text-xs',
                 // `size-3.5` (14px) half-step: neither size-3 nor size-4 aligns with
-                // text-xs glyph metrics inside a 28px nav button.
+                // text-xs glyph metrics inside a 24px nav button.
                 icon: 'size-3.5',
             },
             sm: {
-                navButton: 'px-2.5 py-1.5 text-sm min-w-8 h-8',
-                pageButton: 'px-2.5 py-1.5 text-sm min-w-8 h-8',
-                pageSizeSelect: 'px-2.5 py-1.5 text-sm',
+                navButton: 'px-2.5 text-sm min-w-8 h-8',
+                pageButton: 'px-2.5 text-sm min-w-8 h-8',
+                pageSizeSelect: 'px-2.5 text-sm h-8',
                 ellipsis: 'min-w-8 h-8 text-sm',
                 icon: 'size-4',
             },
             md: {
-                navButton: 'px-3 py-2 text-sm min-w-9 h-9',
-                pageButton: 'px-3 py-2 text-sm min-w-9 h-9',
-                pageSizeSelect: 'px-3 py-2 text-sm',
+                navButton: 'px-3 text-sm min-w-9 h-9',
+                pageButton: 'px-3 text-sm min-w-9 h-9',
+                pageSizeSelect: 'px-3 text-sm h-9',
                 ellipsis: 'min-w-9 h-9 text-sm',
                 icon: 'size-4',
             },
             lg: {
-                navButton: 'px-4 py-2.5 text-base min-w-10 h-10',
-                pageButton: 'px-4 py-2.5 text-base min-w-10 h-10',
-                pageSizeSelect: 'px-4 py-2.5 text-base',
-                ellipsis: 'min-w-10 h-10 text-base',
+                navButton: 'px-4 text-base min-w-11 h-11',
+                pageButton: 'px-4 text-base min-w-11 h-11',
+                pageSizeSelect: 'px-4 text-base h-11',
+                ellipsis: 'min-w-11 h-11 text-base',
                 icon: 'size-5',
             },
             xl: {
-                navButton: 'px-5 py-3 text-base min-w-11 h-11',
-                pageButton: 'px-5 py-3 text-base min-w-11 h-11',
-                pageSizeSelect: 'px-5 py-3 text-base',
-                ellipsis: 'min-w-11 h-11 text-base',
+                navButton: 'px-5 text-base min-w-12 h-12',
+                pageButton: 'px-5 text-base min-w-12 h-12',
+                pageSizeSelect: 'px-5 text-base h-12',
+                ellipsis: 'min-w-12 h-12 text-base',
                 icon: 'size-5',
             },
         },
@@ -266,7 +283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 // 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. */
+    /** When true, the element is skipped by `FocusKeyManager` roving focus. Defaults to `false`. */
     isDisabled = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     focus() {
@@ -297,10 +314,10 @@ class PaginatorComponent {
     /** Total number of items across all pages. Defaults to `0`. */
     totalItems = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-    /** Items per page. Two-way bindable via `[(pageSize)]`. Defaults to `10`. */
+    /** Items per page. Two-way bindable via `[(pageSize)]`; writes back when the user picks a different size in the page-size selector. Defaults to `10`. */
     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`. */
+    /** 1-based current page. Two-way bindable via `[(page)]`; writes back when the user navigates, and whenever the value is clamped into the valid `1…totalPages` range. Defaults to `1`. */
     page = model(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
     /** Rendering type. Defaults to `'numbered'`. */
@@ -321,9 +338,7 @@ class PaginatorComponent {
     /** How many pages to always show at the start and end boundaries. Defaults to `1`. */
     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.
+    /** When true, renders jump-to-first and jump-to-last buttons. Defaults to `true` — first/last jumps are the standard pagination affordance for any list large enough to need a paginator; the special case is a compact paginator that opts out. */
     showFirstLastButtons = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : /* istanbul ignore next */ []));
     /** When true, renders the page-size selector region. Defaults to `false`. */
@@ -332,14 +347,10 @@ class PaginatorComponent {
     /** Options for the default page-size selector. Ignored when `*twPaginatorPageSizeSelector` is projected. Defaults to `[10, 25, 50, 100]`. */
     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.
+    /** When true, renders the page-info text region. Defaults to `true` — showing "X–Y of Z" is the expected pagination context; the special case is an ultra-compact paginator in tight UI that opts out. */
     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.
+    /** When true, renders nothing when `totalItems === 0`. Defaults to `true` — hiding the paginator on empty data is the expected UX; the special case is a layout that opts out to reserve the paginator's vertical space. */
     hideOnEmpty = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hideOnEmpty" }] : /* istanbul ignore next */ []));
     /** When true, renders nothing when `totalPages <= 1`. Defaults to `false`. */
@@ -357,7 +368,16 @@ class PaginatorComponent {
     /** When provided, buttons render as anchor links using the returned `href`. Defaults to `undefined` (renders as buttons). */
     linkFactory = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "linkFactory" }] : /* istanbul ignore next */ []));
-    /** Overrides `labels.ariaLabel` for the root `<nav>` element. */
+    /**
+     * Overrides `labels.ariaLabel` for the root `<nav>` element. Bound as `aria-label`.
+     * Defaults to `undefined` (the resolved `labels.ariaLabel` is used).
+     *
+     * The host renders as a `navigation` landmark, so a page showing more than one
+     * paginator (the common "controls above and below a table" shape) MUST give each
+     * one a distinct name here — two landmarks of the same role sharing an accessible
+     * name are indistinguishable to a screen-reader landmark list (axe:
+     * `landmark-unique`).
+     */
     customAriaLabel = input(undefined, { ...(ngDevMode ? { debugName: "customAriaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     // ── Outputs ──
     /** Fires when `page` or `pageSize` changes. Payload includes derived helpers (`start`, `end`, `totalPages`, `source`). Use `[(page)]` / `[(pageSize)]` for two-way binding; subscribe to this for the rich event payload. */
@@ -375,6 +395,11 @@ class PaginatorComponent {
     // ── Injected services ──
     _liveAnnouncer = inject(LiveAnnouncer);
     _elementRef = inject((ElementRef));
+    /**
+     * Optional so a consumer that never imports `BidiModule` still gets a working
+     * paginator — the key manager falls back to `'ltr'` when the token is absent.
+     */
+    _directionality = inject(Directionality, { optional: true });
     // ── View children ──
     /** @internal All nav-group focusables (first/prev/page/next/last) for `FocusKeyManager`. */
     focusableItems = viewChildren(PaginatorFocusableDirective, /* @ts-ignore */
@@ -415,11 +440,23 @@ class PaginatorComponent {
     /** @internal Visible page range for the numbered type. */
     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(),
-    }), /* @ts-ignore */
+    /**
+     * @internal Merged labels.
+     *
+     * Explicitly-undefined keys are dropped before merging. Root `tsconfig.json`
+     * does not set `exactOptionalPropertyTypes`, so
+     * `[labels]="{ pageButtonAriaLabel: i18n.pageBtn }"` type-checks even when
+     * the i18n bundle has no such key — and a plain spread would then overwrite
+     * the default with `undefined`, which reaches `formatLabel()` and throws
+     * `Cannot read properties of undefined (reading 'replace')` inside a
+     * `computed`, taking the whole page down on first render. Same filter
+     * `table.ts` and `timeline.ts` already use; `Required<>` then guarantees the
+     * template a string for every label.
+     */
+    resolvedLabels = computed(() => {
+        const overrides = Object.fromEntries(Object.entries(this.labels() ?? {}).filter(([, value]) => value !== undefined));
+        return { ...DEFAULT_LABELS, ...overrides };
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : /* istanbul ignore next */ []));
     /** @internal Resolved aria-label for the root. */
     resolvedAriaLabel = computed(() => this.customAriaLabel() ?? this.resolvedLabels().ariaLabel, /* @ts-ignore */
@@ -608,21 +645,34 @@ class PaginatorComponent {
             });
         });
         // Rebuild the FocusKeyManager whenever the focusable set changes (e.g. the
-        // numbered page list re-renders when total or current page shifts). No
-        // `.withWrap()` — paginators should NOT loop from page 1 ArrowLeft to the
-        // last page; that would be disorienting. Mirrors `accordion.ts` and the S12
-        // tabs/tab-nav migration. The `disabled` getter on `PaginatorFocusableDirective`
-        // resolves the `isDisabled()` signal so the manager skips disabled controls.
+        // numbered page list re-renders when total or current page shifts) or the
+        // app flips `dir` at runtime. No `.withWrap()` — paginators should NOT loop
+        // from page 1 ArrowLeft to the last page; that would be disorienting, and
+        // this is a deliberate divergence from `tabs`/`tab-nav`, which do wrap.
+        //
+        // The orientation is fed from the live layout direction rather than a
+        // hardcoded `'ltr'`: CDK's ListKeyManager maps ArrowLeft to
+        // `setPreviousItemActive()` under `'ltr'` and `setNextItemActive()` under
+        // `'rtl'`, so pinning `'ltr'` inverts ArrowLeft/ArrowRight in RTL locales —
+        // the arrow steps backwards in DOM order but forwards visually.
+        // `Directionality.valueSignal` is read directly (CDK 22+) so this effect
+        // re-runs on a direction change without a manual subscription mirror; that
+        // is the same behaviour `tab-nav` gets from its `Directionality.change`
+        // subscription, with less boilerplate.
+        //
+        // The `disabled` getter on `PaginatorFocusableDirective` resolves the
+        // `isDisabled()` signal so the manager skips disabled controls.
         // `onCleanup` fires both on rebuild AND on component destroy, so no separate
         // `_destroyRef.onDestroy` is needed.
         effect((onCleanup) => {
             const items = this.focusableItems();
+            const direction = this._directionality?.valueSignal() ?? 'ltr';
             if (items.length === 0) {
                 this._keyManager = null;
                 return;
             }
             const manager = new FocusKeyManager(items)
-                .withHorizontalOrientation('ltr')
+                .withHorizontalOrientation(direction)
                 .withHomeAndEnd();
             this._keyManager = manager;
             onCleanup(() => {
@@ -741,7 +791,7 @@ class PaginatorComponent {
         }
     }
     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 });
+    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.role]=\"firstDisabled ? 'link' : null\"\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.role]=\"prevDisabled ? 'link' : null\"\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                <!--\n                  The gap marker carries its name as visually-hidden text rather\n                  than an aria-label. A span has no role, and ARIA prohibits a\n                  name on a roleless generic element (axe: aria-prohibited-attr),\n                  so the label was being dropped by assistive tech anyway. The\n                  sr-only child is real text content, which every AT exposes.\n                -->\n                <span [class]=\"ellipsisClasses()\">\n                  <span aria-hidden=\"true\">&hellip;</span>\n                  <span class=\"sr-only\">{{ resolvedLabels().ellipsis }}</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.role]=\"pageDisabled ? 'link' : null\"\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.role]=\"nextDisabled ? 'link' : null\"\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.role]=\"lastDisabled ? 'link' : null\"\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: "22.0.7", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
@@ -750,7 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[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. 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" }]
+                    }, 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.role]=\"firstDisabled ? 'link' : null\"\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.role]=\"prevDisabled ? 'link' : null\"\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                <!--\n                  The gap marker carries its name as visually-hidden text rather\n                  than an aria-label. A span has no role, and ARIA prohibits a\n                  name on a roleless generic element (axe: aria-prohibited-attr),\n                  so the label was being dropped by assistive tech anyway. The\n                  sr-only child is real text content, which every AT exposes.\n                -->\n                <span [class]=\"ellipsisClasses()\">\n                  <span aria-hidden=\"true\">&hellip;</span>\n                  <span class=\"sr-only\">{{ resolvedLabels().ellipsis }}</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.role]=\"pageDisabled ? 'link' : null\"\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.role]=\"nextDisabled ? 'link' : null\"\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.role]=\"lastDisabled ? 'link' : null\"\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 }] }] } });
 
 /**