@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-pager.mjs

@@ -4,14 +4,13 @@ import { Directive, inject, TemplateRef, input, ElementRef, signal, linkedSignal
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { LucideEllipsis, LucideChevronsLeft, LucideChevronLeft, LucideChevronRight, LucideChevronsRight } from '@lucide/angular';
+import { range } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
 import { DropdownVirtualScrollDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { NavigationKeys } from '@nanahoshi/mona-ui/internal';
+import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { range } from '@mirei/ts-collections';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -92,18 +91,17 @@ class PageSizeChangeEvent extends PreventableEvent {
     }
 }
 
-const pagerBaseVariants = cva(`
-        flex py-1 px-2
-        bg-background text-foreground
-        border border-border
-        text-sm
-        [&_mona-numeric-text-box]:ml-4
-        [&_mona-numeric-text-box]:w-12
-        [&_mona-numeric-text-box_input]:text-center
-        [&_mona-numeric-text-box_input]:bg-input-background
-
-        [&_mona-dropdown-list]:mx-1
-        [&_mona-dropdown-list]:my-0
+const pagerBaseThemeVariants = cva(`
+        flex px-2 py-1
+        text-sm
+        bg-(--mona-pager-background) ${themeRaisedBackdropClasses} text-foreground
+        border border-border-subtle
+        [&_mona-numeric-text-box]:ml-4
+        [&_mona-numeric-text-box]:w-12
+        [&_mona-numeric-text-box_input]:bg-input-background
+        [&_mona-numeric-text-box_input]:text-center
+        [&_mona-dropdown-list]:mx-1
+        [&_mona-dropdown-list]:my-0
     `, {
     variants: {
         rounded: {
@@ -120,27 +118,24 @@ const pagerBaseVariants = cva(`
         }
     }
 });
-const pagerInfoVariants = cva(`
-        flex items-center justify-end
-        flex-1 pl-2 whitespace-nowrap
+const pagerInfoThemeVariants = cva(`
+        flex flex-1 items-center justify-end pl-2
+        whitespace-nowrap text-muted-foreground
     `);
-const pagerInputVariants = cva(`
-        flex items-center
-        [&_mona-numeric-text-box]:w-12
-        [&_mona-numeric-text-box]:mx-1
-
+const pagerInputThemeVariants = cva(`
+        flex items-center
+        [&_mona-numeric-text-box]:mx-1
+        [&_mona-numeric-text-box]:w-12
     `);
-const pagerListVariants = cva(`
-        flex flex-wrap
-        [&_li]:list-none
-        [&_li]:flex
-        [&_li]:items-center
-        [&_li]:justify-center
+const pagerListThemeVariants = cva(`
+        flex flex-wrap
+        [&_li]:flex [&_li]:list-none
+        [&_li]:items-center [&_li]:justify-center
     `);
-const pagerListItemVariants = cva("", {
+const pagerListItemThemeVariants = cva("", {
     variants: {
         active: {
-            true: "font-semibold",
+            true: "font-semibold text-foreground",
             false: ""
         }
     },
@@ -149,47 +144,6 @@ const pagerListItemVariants = cva("", {
     }
 });
 
-const pagerBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerBaseVariants;
-        default:
-            return pagerBaseVariants;
-    }
-};
-const pagerInfoThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerInfoVariants;
-        default:
-            return pagerInfoVariants;
-    }
-};
-const pagerInputThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerInputVariants;
-        default:
-            return pagerInputVariants;
-    }
-};
-const pagerListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerListVariants;
-        default:
-            return pagerListVariants;
-    }
-};
-const pagerListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return pagerListItemVariants;
-        default:
-            return pagerListItemVariants;
-    }
-};
-
 const PAGER_FOCUSABLE_ATTRIBUTE = "data-mona-pager-focusable";
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
 class PagerComponent {
@@ -200,7 +154,6 @@ class PagerComponent {
     #managedFocusTargets;
     #originalTabIndices;
     #skip;
-    #themeService;
     #widthObserver;
     #previousPageSize;
     constructor() {
@@ -214,16 +167,14 @@ class PagerComponent {
         this.#originalTabIndices = new WeakMap();
         this.#skip = linkedSignal(() => this.skip(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#skip" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.#widthObserver = null;
         this.#previousPageSize = 10;
         this.navigationButtonsTemplateList = contentChildren(PagerNavigationButtonsTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigationButtonsTemplateList" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const userClasses = this.userClasses();
-            const classes = pagerBaseThemeVariants(theme)({ rounded });
+            const classes = pagerBaseThemeVariants({ rounded });
             return twMerge(classes, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
@@ -248,8 +199,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
         this.infoClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerInfoThemeVariants(theme)();
+            return pagerInfoThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoClasses" }] : /* istanbul ignore next */ []));
         this.infoVisible = computed(() => {
@@ -259,8 +209,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoVisible" }] : /* istanbul ignore next */ []));
         this.inputClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerInputThemeVariants(theme)();
+            return pagerInputThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.inputValue = linkedSignal(() => this.page(), /* @ts-ignore */
@@ -276,8 +225,7 @@ class PagerComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lastPageNavigationTemplate" }] : /* istanbul ignore next */ []));
         this.listClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return pagerListThemeVariants(theme)();
+            return pagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
         this.nextJumperVisible = computed(() => {
@@ -599,7 +547,7 @@ class PagerComponent {
         this.setPage(page);
     }
     pageItemClasses(active) {
-        return pagerListItemThemeVariants(this.#themeService.theme())({ active });
+        return pagerListItemThemeVariants({ active });
     }
     activateInnerNavigation() {
         const targets = this.getFocusableTargets();
@@ -752,7 +700,7 @@ class PagerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\r\n@let pageSizeTemplateRef = pageSizeTemplate();\r\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\r\n\r\n@if (type() === \"numeric\") {\r\n    @if (pageListVisible()) {\r\n        <ol [class]=\"listClasses()\">\r\n            @if (firstLast()) {\r\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n            }\r\n            @if (previousNext()) {\r\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (numericButtonsTemplateRef) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\r\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\r\n            } @else {\r\n                @if (pages().length !== 0) {\r\n                    <li [class]=\"pageItemClasses(page() === 1)\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === 1\"\r\n                            [attr.aria-label]=\"'Page 1'\"\r\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\r\n                            (click)=\"onPageClick(1)\">\r\n                            1\r\n                        </button>\r\n                    </li>\r\n                }\r\n                @if (previousJumperVisible()) {\r\n                    <li>\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\r\n                            (click)=\"onJumpPreviousClick()\">\r\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\r\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === pageItem.page\"\r\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\r\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\r\n                            (click)=\"onPageClick(pageItem.page)\">\r\n                            {{ pageItem.text }}\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @if (nextJumperVisible()) {\r\n                    <li>\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [attr.aria-label]=\"jumpNextLabel()\"\r\n                            (click)=\"onJumpNextClick()\">\r\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @if (pages().length > 1) {\r\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === pageCount()\"\r\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\r\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\r\n                            (click)=\"onPageClick(pageCount())\">\r\n                            {{ pageCount() }}\r\n                        </button>\r\n                    </li>\r\n                }\r\n            }\r\n\r\n            @if (previousNext()) {\r\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (firstLast()) {\r\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (pageInputVisible() && pageInput()) {\r\n                <li>\r\n                    <mona-numeric-text-box\r\n                        monaPagerFocusable\r\n                        [spinners]=\"false\"\r\n                        [minValue]=\"1\"\r\n                        [maxValue]=\"pageCount()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"size()\"\r\n                        [ngModel]=\"inputValue()\"\r\n                        (ngModelChange)=\"inputValue.set($event)\"\r\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\r\n                </li>\r\n            }\r\n\r\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\r\n                <li>\r\n                    @if (pageSizeTemplateRef) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <mona-dropdown-list\r\n                            monaPagerFocusable\r\n                            [data]=\"pageSizeDropdownData()\"\r\n                            [ngModel]=\"pageSize()\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\r\n                            #pageSizeDropdownList>\r\n                            <ng-template monaDropDownListValueTemplate let-item>\r\n                                <span>{{ item }} / page</span>\r\n                            </ng-template>\r\n                        </mona-dropdown-list>\r\n                    }\r\n                </li>\r\n            }\r\n        </ol>\r\n    }\r\n    @if (infoVisible()) {\r\n        @if (pagerInfoTemplateRef) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\r\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\r\n        }\r\n    }\r\n}\r\n@if (type() === \"input\") {\r\n    <div [class]=\"inputClasses()\">\r\n        @if (pageListVisible()) {\r\n            <ol [class]=\"listClasses()\">\r\n                @if (firstLast()) {\r\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n                }\r\n                @if (previousNext()) {\r\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n                }\r\n                <li class=\"flex items-center gap-2 mx-2\">\r\n                    <span>Page</span>\r\n                    <mona-numeric-text-box\r\n                        monaPagerFocusable\r\n                        [spinners]=\"false\"\r\n                        [minValue]=\"1\"\r\n                        [maxValue]=\"pageCount()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"size()\"\r\n                        [ngModel]=\"inputValue()\"\r\n                        (ngModelChange)=\"inputValue.set($event)\"\r\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\r\n                    <span>of</span>\r\n                    <span>{{ pageCount() }}</span>\r\n                </li>\r\n                @if (previousNext()) {\r\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n                }\r\n                @if (firstLast()) {\r\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n                }\r\n            </ol>\r\n        }\r\n    </div>\r\n    @if (infoVisible()) {\r\n        @if (pagerInfoTemplateRef) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\r\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\r\n        }\r\n    }\r\n}\r\n@if (!pageListVisible()) {\r\n    <ol [class]=\"listClasses()\">\r\n        @if (firstLast()) {\r\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n        }\r\n        @if (previousNext()) {\r\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n        }\r\n        @if (pageCount() !== 0) {\r\n            <li>\r\n                <mona-dropdown-list\r\n                    monaPagerFocusable\r\n                    [data]=\"pageList()\"\r\n                    [ngModel]=\"page()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [size]=\"size()\"\r\n                    monaDropDownVirtualScroll\r\n                    (ngModelChange)=\"onPageClick($event)\"\r\n                    style=\"width: 75px\"></mona-dropdown-list>\r\n            </li>\r\n        }\r\n        @if (previousNext()) {\r\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n        }\r\n        @if (firstLast()) {\r\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n        }\r\n    </ol>\r\n}\r\n\r\n<ng-template #firstPageButton>\r\n    <li>\r\n        @let firstPageTemplate = firstPageNavigationTemplate();\r\n        @if (firstPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() === 1\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [attr.aria-label]=\"firstPageLabel\"\r\n                (click)=\"onPageClick(1)\"\r\n                [disabled]=\"page() === 1\">\r\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #previousPageButton>\r\n    <li>\r\n        @let previousPageTemplate = previousPageNavigationTemplate();\r\n        @if (previousPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() <= 1\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [disabled]=\"page() <= 1\"\r\n                [attr.aria-label]=\"previousPageLabel\"\r\n                (click)=\"onPreviousPageClick()\">\r\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #nextPageButton>\r\n    <li>\r\n        @let nextPageTemplate = nextPageNavigationTemplate();\r\n        @if (nextPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() < 1 || page() === pageCount()\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [disabled]=\"page() < 1 || page() === pageCount()\"\r\n                [attr.aria-label]=\"nextPageLabel\"\r\n                (click)=\"onNextPageClick()\">\r\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #lastPageButton>\r\n    <li>\r\n        @let lastPageTemplate = lastPageNavigationTemplate();\r\n        @if (lastPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() === pageCount()\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [attr.aria-label]=\"lastPageLabel\"\r\n                (click)=\"onPageClick(pageCount())\"\r\n                [disabled]=\"page() === pageCount()\">\r\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"'Page 1'\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ item }} / page</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>Page</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>of</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -775,7 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.tabindex]": "navigable() ? 0 : null",
                         "[class]": "baseClasses()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\r\n@let pageSizeTemplateRef = pageSizeTemplate();\r\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\r\n\r\n@if (type() === \"numeric\") {\r\n    @if (pageListVisible()) {\r\n        <ol [class]=\"listClasses()\">\r\n            @if (firstLast()) {\r\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n            }\r\n            @if (previousNext()) {\r\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (numericButtonsTemplateRef) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\r\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\r\n            } @else {\r\n                @if (pages().length !== 0) {\r\n                    <li [class]=\"pageItemClasses(page() === 1)\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === 1\"\r\n                            [attr.aria-label]=\"'Page 1'\"\r\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\r\n                            (click)=\"onPageClick(1)\">\r\n                            1\r\n                        </button>\r\n                    </li>\r\n                }\r\n                @if (previousJumperVisible()) {\r\n                    <li>\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\r\n                            (click)=\"onJumpPreviousClick()\">\r\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\r\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === pageItem.page\"\r\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\r\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\r\n                            (click)=\"onPageClick(pageItem.page)\">\r\n                            {{ pageItem.text }}\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @if (nextJumperVisible()) {\r\n                    <li>\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [attr.aria-label]=\"jumpNextLabel()\"\r\n                            (click)=\"onJumpNextClick()\">\r\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\r\n                        </button>\r\n                    </li>\r\n                }\r\n\r\n                @if (pages().length > 1) {\r\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\r\n                        <button\r\n                            monaPagerFocusable\r\n                            monaButton\r\n                            look=\"ghost\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            [selected]=\"page() === pageCount()\"\r\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\r\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\r\n                            (click)=\"onPageClick(pageCount())\">\r\n                            {{ pageCount() }}\r\n                        </button>\r\n                    </li>\r\n                }\r\n            }\r\n\r\n            @if (previousNext()) {\r\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (firstLast()) {\r\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n            }\r\n\r\n            @if (pageInputVisible() && pageInput()) {\r\n                <li>\r\n                    <mona-numeric-text-box\r\n                        monaPagerFocusable\r\n                        [spinners]=\"false\"\r\n                        [minValue]=\"1\"\r\n                        [maxValue]=\"pageCount()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"size()\"\r\n                        [ngModel]=\"inputValue()\"\r\n                        (ngModelChange)=\"inputValue.set($event)\"\r\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\r\n                </li>\r\n            }\r\n\r\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\r\n                <li>\r\n                    @if (pageSizeTemplateRef) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <mona-dropdown-list\r\n                            monaPagerFocusable\r\n                            [data]=\"pageSizeDropdownData()\"\r\n                            [ngModel]=\"pageSize()\"\r\n                            [rounded]=\"rounded()\"\r\n                            [size]=\"size()\"\r\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\r\n                            #pageSizeDropdownList>\r\n                            <ng-template monaDropDownListValueTemplate let-item>\r\n                                <span>{{ item }} / page</span>\r\n                            </ng-template>\r\n                        </mona-dropdown-list>\r\n                    }\r\n                </li>\r\n            }\r\n        </ol>\r\n    }\r\n    @if (infoVisible()) {\r\n        @if (pagerInfoTemplateRef) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\r\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\r\n        }\r\n    }\r\n}\r\n@if (type() === \"input\") {\r\n    <div [class]=\"inputClasses()\">\r\n        @if (pageListVisible()) {\r\n            <ol [class]=\"listClasses()\">\r\n                @if (firstLast()) {\r\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n                }\r\n                @if (previousNext()) {\r\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n                }\r\n                <li class=\"flex items-center gap-2 mx-2\">\r\n                    <span>Page</span>\r\n                    <mona-numeric-text-box\r\n                        monaPagerFocusable\r\n                        [spinners]=\"false\"\r\n                        [minValue]=\"1\"\r\n                        [maxValue]=\"pageCount()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [size]=\"size()\"\r\n                        [ngModel]=\"inputValue()\"\r\n                        (ngModelChange)=\"inputValue.set($event)\"\r\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\r\n                    <span>of</span>\r\n                    <span>{{ pageCount() }}</span>\r\n                </li>\r\n                @if (previousNext()) {\r\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n                }\r\n                @if (firstLast()) {\r\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n                }\r\n            </ol>\r\n        }\r\n    </div>\r\n    @if (infoVisible()) {\r\n        @if (pagerInfoTemplateRef) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\r\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\r\n        } @else {\r\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\r\n        }\r\n    }\r\n}\r\n@if (!pageListVisible()) {\r\n    <ol [class]=\"listClasses()\">\r\n        @if (firstLast()) {\r\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\r\n        }\r\n        @if (previousNext()) {\r\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\r\n        }\r\n        @if (pageCount() !== 0) {\r\n            <li>\r\n                <mona-dropdown-list\r\n                    monaPagerFocusable\r\n                    [data]=\"pageList()\"\r\n                    [ngModel]=\"page()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [size]=\"size()\"\r\n                    monaDropDownVirtualScroll\r\n                    (ngModelChange)=\"onPageClick($event)\"\r\n                    style=\"width: 75px\"></mona-dropdown-list>\r\n            </li>\r\n        }\r\n        @if (previousNext()) {\r\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\r\n        }\r\n        @if (firstLast()) {\r\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\r\n        }\r\n    </ol>\r\n}\r\n\r\n<ng-template #firstPageButton>\r\n    <li>\r\n        @let firstPageTemplate = firstPageNavigationTemplate();\r\n        @if (firstPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() === 1\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [attr.aria-label]=\"firstPageLabel\"\r\n                (click)=\"onPageClick(1)\"\r\n                [disabled]=\"page() === 1\">\r\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #previousPageButton>\r\n    <li>\r\n        @let previousPageTemplate = previousPageNavigationTemplate();\r\n        @if (previousPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() <= 1\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [disabled]=\"page() <= 1\"\r\n                [attr.aria-label]=\"previousPageLabel\"\r\n                (click)=\"onPreviousPageClick()\">\r\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #nextPageButton>\r\n    <li>\r\n        @let nextPageTemplate = nextPageNavigationTemplate();\r\n        @if (nextPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() < 1 || page() === pageCount()\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [disabled]=\"page() < 1 || page() === pageCount()\"\r\n                [attr.aria-label]=\"nextPageLabel\"\r\n                (click)=\"onNextPageClick()\">\r\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n\r\n<ng-template #lastPageButton>\r\n    <li>\r\n        @let lastPageTemplate = lastPageNavigationTemplate();\r\n        @if (lastPageTemplate) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\r\n                [ngTemplateOutletContext]=\"{\r\n                    totalPages: pageCount(),\r\n                    pageSize: pagerPageSize(),\r\n                    disabled: page() === pageCount()\r\n                }\">\r\n            </ng-container>\r\n        } @else {\r\n            <button\r\n                monaPagerFocusable\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                [attr.aria-label]=\"lastPageLabel\"\r\n                (click)=\"onPageClick(pageCount())\"\r\n                [disabled]=\"page() === pageCount()\">\r\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\r\n            </button>\r\n        }\r\n    </li>\r\n</ng-template>\r\n" }]
+                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"'Page 1'\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ item }} / page</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>Page</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>of</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { navigationButtonsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PagerNavigationButtonsTemplateDirective), { isSignal: true }] }], numericButtonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerNumericButtonsTemplateDirective), { isSignal: true }] }], pageSizeDropdownList: [{ type: i0.ViewChild, args: ["pageSizeDropdownList", { isSignal: true }] }], pageSizeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerPageSizeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], pagerInfoTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerInfoTemplateDirective), { isSignal: true }] }], firstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLast", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageInput", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], previousNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousNext", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], skip: [{ type: i0.Input, args: [{ isSignal: true, alias: "skip", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-placeholder.mjs

@@ -1,49 +1,28 @@
 import * as i0 from '@angular/core';
-import { inject, computed, input, Component } from '@angular/core';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { computed, input, Component } from '@angular/core';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const placeholderBaseVariants = cva(`
-        flex items-center justify-center
-        w-full h-full
-        p-2
+const placeholderBaseThemeVariants = cva(`
+        flex items-center justify-center
+        h-full w-full
+        p-2
+        bg-surface-muted/50
     `);
-const placeholderTextVariants = cva(`
-        text-muted-foreground
-        uppercase
+const placeholderTextThemeVariants = cva(`
+        uppercase text-muted-foreground
     `);
 
-const placeholderBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return placeholderBaseVariants;
-        default:
-            return placeholderBaseVariants;
-    }
-};
-const placeholderTextThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return placeholderTextVariants;
-        default:
-            return placeholderTextVariants;
-    }
-};
-
 class PlaceholderComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            const variantClass = placeholderBaseThemeVariants(theme)();
+            const variantClass = placeholderBaseThemeVariants();
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.textClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return placeholderTextThemeVariants(theme)();
+            return placeholderTextThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "textClass" }] : /* istanbul ignore next */ []));
         /**
@@ -60,15 +39,14 @@ class PlaceholderComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\n    <span [class]=\"textClass()\">{{ text() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-placeholder", host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }]
+                    }, template: "@if (text()) {\n    <span [class]=\"textClass()\">{{ text() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n" }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*