@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,790 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Directive, inject, TemplateRef, input, ElementRef, signal, linkedSignal, contentChildren, computed, contentChild, viewChild, output, effect, untracked, afterRenderEffect, DestroyRef, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { LucideEllipsis, LucideChevronsLeft, LucideChevronLeft, LucideChevronRight, LucideChevronsRight } from '@lucide/angular';
+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 { 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';
+
+class PagerFocusableDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerFocusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PagerFocusableDirective, isStandalone: true, selector: "[monaPagerFocusable]", host: { properties: { "attr.data-mona-pager-focusable": "'true'" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaPagerFocusable]",
+                    host: {
+                        "[attr.data-mona-pager-focusable]": "'true'"
+                    }
+                }]
+        }] });
+
+class PagerInfoTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerInfoTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PagerInfoTemplateDirective, isStandalone: true, selector: "ng-template[monaPagerInfoTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerInfoTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPagerInfoTemplate]"
+                }]
+        }] });
+
+class PagerNavigationButtonsTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.type = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerNavigationButtonsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: PagerNavigationButtonsTemplateDirective, isStandalone: true, selector: "ng-template[monaPagerNavigationButtonsTemplate]", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerNavigationButtonsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPagerNavigationButtonsTemplate]"
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }] } });
+
+class PagerNumericButtonsTemplateDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerNumericButtonsTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PagerNumericButtonsTemplateDirective, isStandalone: true, selector: "ng-template[monaPagerNumericButtonsTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerNumericButtonsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPagerNumericButtonsTemplate]"
+                }]
+        }] });
+
+class PagerPageSizeTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerPageSizeTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PagerPageSizeTemplateDirective, isStandalone: true, selector: "ng-template[monaPagerPageSizeTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerPageSizeTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaPagerPageSizeTemplate]"
+                }]
+        }] });
+
+class PageSizeChangeEvent extends PreventableEvent {
+    constructor(newPageSize, oldPageSize) {
+        super("pageSizeChange");
+        this.newPageSize = newPageSize;
+        this.oldPageSize = oldPageSize;
+    }
+}
+
+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
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-base"
+        }
+    }
+});
+const pagerInfoVariants = cva(`
+        flex items-center justify-end
+        flex-1 pl-2 whitespace-nowrap
+    `);
+const pagerInputVariants = cva(`
+        flex items-center
+        [&_mona-numeric-text-box]:w-12
+        [&_mona-numeric-text-box]:mx-1
+
+    `);
+const pagerListVariants = cva(`
+        flex flex-wrap
+        [&_li]:list-none
+        [&_li]:flex
+        [&_li]:items-center
+        [&_li]:justify-center
+    `);
+const pagerListItemVariants = cva("", {
+    variants: {
+        active: {
+            true: "font-semibold",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        active: false
+    }
+});
+
+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 {
+    #document;
+    #hostElementRef;
+    #infoVisible;
+    #innerNavigationActive;
+    #managedFocusTargets;
+    #originalTabIndices;
+    #skip;
+    #themeService;
+    #widthObserver;
+    #previousPageSize;
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#hostElementRef = inject(ElementRef);
+        this.#infoVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#infoVisible" }] : /* istanbul ignore next */ []));
+        this.#innerNavigationActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#innerNavigationActive" }] : /* istanbul ignore next */ []));
+        this.#managedFocusTargets = new Set();
+        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 });
+            return twMerge(classes, userClasses);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
+        this.firstPageLabel = "First page";
+        this.firstPageNavigationTemplate = computed(() => {
+            const navigationTemplates = this.navigationButtonsTemplateList();
+            return navigationTemplates.find(t => t.type() === "first");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstPageNavigationTemplate" }] : /* istanbul ignore next */ []));
+        this.iconSize = computed(() => {
+            const size = this.size();
+            switch (size) {
+                case "small":
+                    return 18;
+                case "medium":
+                    return 20;
+                case "large":
+                    return 22;
+                default:
+                    return 20;
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+        this.infoClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return pagerInfoThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infoClasses" }] : /* istanbul ignore next */ []));
+        this.infoVisible = computed(() => {
+            const showInfo = this.showInfo();
+            const visible = this.#infoVisible();
+            return showInfo && visible;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infoVisible" }] : /* istanbul ignore next */ []));
+        this.inputClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return pagerInputThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+        this.inputValue = linkedSignal(() => this.page(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
+        this.jumpNextLabel = computed(() => `Jump forward ${this.visiblePages()} pages`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jumpNextLabel" }] : /* istanbul ignore next */ []));
+        this.jumpPreviousLabel = computed(() => `Jump back ${this.visiblePages()} pages`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jumpPreviousLabel" }] : /* istanbul ignore next */ []));
+        this.lastPageLabel = "Last page";
+        this.lastPageNavigationTemplate = computed(() => {
+            const navigationTemplates = this.navigationButtonsTemplateList();
+            return navigationTemplates.find(t => t.type() === "last");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lastPageNavigationTemplate" }] : /* istanbul ignore next */ []));
+        this.listClasses = computed(() => {
+            const theme = this.#themeService.theme();
+            return pagerListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+        this.nextJumperVisible = computed(() => {
+            const pages = this.pages();
+            const visiblePages = this.visiblePages();
+            return pages.length > visiblePages && pages[pages.length - 1].page - pages[pages.length - 2].page > 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextJumperVisible" }] : /* istanbul ignore next */ []));
+        this.nextPageLabel = "Next page";
+        this.nextPageNavigationTemplate = computed(() => {
+            const navigationTemplates = this.navigationButtonsTemplateList();
+            return navigationTemplates.find(t => t.type() === "next");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nextPageNavigationTemplate" }] : /* istanbul ignore next */ []));
+        this.numericButtonsTemplate = contentChild(PagerNumericButtonsTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numericButtonsTemplate" }] : /* istanbul ignore next */ []));
+        this.page = computed(() => Math.floor(this.#skip() / this.pagerPageSize()) + 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.pageCount = computed(() => Math.ceil(this.total() / this.pagerPageSize()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageCount" }] : /* istanbul ignore next */ []));
+        this.pageInputVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageInputVisible" }] : /* istanbul ignore next */ []));
+        this.pageList = computed(() => {
+            return range(1, this.pageCount()).toArray();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageList" }] : /* istanbul ignore next */ []));
+        this.pageListVisible = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageListVisible" }] : /* istanbul ignore next */ []));
+        this.pageSizeDropdownList = viewChild("pageSizeDropdownList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizeDropdownList" }] : /* istanbul ignore next */ []));
+        this.pageSizeDropdownData = computed(() => {
+            const values = this.pageSizeValues();
+            if (values === false || (Array.isArray(values) && values.length === 0)) {
+                return [];
+            }
+            if (Array.isArray(values)) {
+                return values;
+            }
+            return [5, 10, 20, 50, 100];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizeDropdownData" }] : /* istanbul ignore next */ []));
+        this.pageSizeTemplate = contentChild(PagerPageSizeTemplateDirective, { ...(ngDevMode ? { debugName: "pageSizeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.pagerInfo = computed(() => {
+            const start = (this.page() - 1) * this.pagerPageSize() + 1;
+            const end = Math.min(this.page() * this.pagerPageSize(), this.total());
+            return `${start} - ${end} of ${this.total()} items`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerInfo" }] : /* istanbul ignore next */ []));
+        this.pagerInfoTemplate = contentChild(PagerInfoTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerInfoTemplate" }] : /* istanbul ignore next */ []));
+        this.pagerInfoTemplateContext = computed(() => {
+            return {
+                currentPage: this.page(),
+                pageSize: this.pagerPageSize(),
+                skip: this.#skip(),
+                total: this.total(),
+                totalPages: this.pageCount()
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerInfoTemplateContext" }] : /* istanbul ignore next */ []));
+        this.pagerPageSize = linkedSignal(() => this.pageSize(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagerPageSize" }] : /* istanbul ignore next */ []));
+        this.pages = computed(() => {
+            return this.preparePages(this.page(), this.visiblePages(), this.pageCount());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+        this.previousJumperVisible = computed(() => this.pages().length > this.visiblePages() && this.pages()[1].page - 1 > 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousJumperVisible" }] : /* istanbul ignore next */ []));
+        this.previousPageLabel = "Previous page";
+        this.previousPageNavigationTemplate = computed(() => {
+            const navigationTemplates = this.navigationButtonsTemplateList();
+            return navigationTemplates.find(t => t.type() === "previous");
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousPageNavigationTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Shows the first and last page navigation buttons.
+         * @default true
+         */
+        this.firstLast = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstLast" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables keyboard navigation on the pager wrapper and its inner controls.
+         * @default true
+         */
+        this.navigable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigable" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the current page changes.
+         */
+        this.pageChange = output();
+        /**
+         * @description Shows a numeric input for jumping directly to a page.
+         * @default false
+         */
+        this.pageInput = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageInput" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Number of items displayed per page.
+         * @default 5
+         */
+        this.pageSize = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the page size changes. Cancelable via `preventDefault()` on the event.
+         */
+        this.pageSizeChange = output();
+        /**
+         * @description Page-size options shown in the page-size dropdown. Set to `false` or an empty array to hide the dropdown.
+         * @default [5, 10, 20, 50, 100]
+         */
+        this.pageSizeValues = input([5, 10, 20, 50, 100], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizeValues" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Shows the previous and next page navigation buttons.
+         * @default true
+         */
+        this.previousNext = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previousNext" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Collapses sections of the pager as the host element narrows.
+         * @default true
+         */
+        this.responsive = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Border-radius preset applied to the component.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Displays the summary of the current page range and total item count.
+         * @default true
+         */
+        this.showInfo = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showInfo" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Size preset controlling the component's dimensions.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Number of items to skip before the current page. Determines the current page together with `pageSize`.
+         * @default 0
+         */
+        this.skip = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "skip" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Total number of items in the paged collection.
+         * @default 0
+         */
+        this.total = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Visual mode of the pager: numeric page buttons, or a page-jump input.
+         * @default "numeric"
+         */
+        this.type = input("numeric", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClasses = input("", { ...(ngDevMode ? { debugName: "userClasses" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Number of numeric page buttons shown at once before collapsing into jump controls.
+         * @default 5
+         */
+        this.visiblePages = input(5, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visiblePages" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const pageSize = this.pageSize();
+            untracked(() => (this.#previousPageSize = pageSize));
+        });
+        effect(() => {
+            const navigable = this.navigable();
+            if (!navigable) {
+                untracked(() => {
+                    this.#innerNavigationActive.set(false);
+                    this.restoreManagedFocusTargets();
+                });
+            }
+        });
+        effect(() => {
+            const page = this.page();
+            untracked(() => this.pageChange.emit({ page, skip: this.#skip(), take: this.pagerPageSize() }));
+        });
+        afterRenderEffect(() => {
+            if (this.responsive()) {
+                this.#widthObserver = new ResizeObserver(() => {
+                    untracked(() => {
+                        this.#infoVisible.set(this.#hostElementRef.nativeElement.clientWidth >= 790);
+                        this.pageInputVisible.set(this.#hostElementRef.nativeElement.clientWidth >= 640);
+                        this.pageListVisible.set(this.#hostElementRef.nativeElement.clientWidth >= 480);
+                    });
+                });
+                this.#widthObserver.observe(this.#hostElementRef.nativeElement);
+            }
+            else if (this.#widthObserver) {
+                untracked(() => {
+                    this.#infoVisible.set(true);
+                    this.pageInputVisible.set(true);
+                    this.pageListVisible.set(true);
+                });
+                this.#widthObserver.disconnect();
+                this.#widthObserver = null;
+            }
+        });
+        afterRenderEffect(() => {
+            this.navigable();
+            this.#innerNavigationActive();
+            this.firstLast();
+            this.page();
+            this.pageCount();
+            this.pageInput();
+            this.pageInputVisible();
+            this.pageListVisible();
+            this.pageSizeDropdownData();
+            this.pages();
+            this.previousNext();
+            this.type();
+            untracked(() => this.syncFocusableTabIndexes());
+        });
+        inject(DestroyRef).onDestroy(() => this.#widthObserver?.disconnect());
+    }
+    onJumpNextClick() {
+        const page = Math.min(this.page() + this.visiblePages(), this.pageCount());
+        this.setPage(page);
+    }
+    onJumpPreviousClick() {
+        const page = Math.max(this.page() - this.visiblePages(), 1);
+        this.setPage(page);
+    }
+    onKeydown(event) {
+        if (!this.navigable()) {
+            return;
+        }
+        if (event.key === NavigationKeys.Home) {
+            event.preventDefault();
+            this.setKeyboardPage(1);
+            return;
+        }
+        if (event.key === NavigationKeys.End) {
+            event.preventDefault();
+            this.setKeyboardPage(this.pageCount());
+            return;
+        }
+        if (this.#innerNavigationActive()) {
+            this.handleInnerNavigationKeydown(event);
+            return;
+        }
+        if (event.target !== this.#hostElementRef.nativeElement) {
+            return;
+        }
+        switch (event.key) {
+            case NavigationKeys.Enter:
+                event.preventDefault();
+                this.activateInnerNavigation();
+                break;
+            case NavigationKeys.ArrowLeft:
+            case NavigationKeys.PageUp:
+                event.preventDefault();
+                this.setKeyboardPage(this.page() - 1);
+                break;
+            case NavigationKeys.ArrowRight:
+            case NavigationKeys.PageDown:
+                event.preventDefault();
+                this.setKeyboardPage(this.page() + 1);
+                break;
+        }
+    }
+    onNextPageClick() {
+        const page = Math.min(this.page() + 1, this.pageCount());
+        this.setPage(page);
+    }
+    onPageClick(page) {
+        if (page === this.page()) {
+            return;
+        }
+        this.setPage(page);
+    }
+    onPageInputBlur() {
+        if (this.inputValue() === null || this.inputValue() === this.page()) {
+            this.inputValue.set(this.page());
+            return;
+        }
+        if (this.inputValue() < 1) {
+            this.inputValue.set(1);
+        }
+        else if (this.inputValue() > this.pageCount()) {
+            this.inputValue.set(this.pageCount());
+        }
+        this.setPage(this.inputValue());
+    }
+    onPageSizeValueChange(value) {
+        if (value === this.pagerPageSize()) {
+            return;
+        }
+        const event = new PageSizeChangeEvent(value, this.pagerPageSize());
+        const pageSizeDropdownList = this.pageSizeDropdownList();
+        this.pageSizeChange.emit(event);
+        if (event.isDefaultPrevented()) {
+            this.pagerPageSize.set(this.#previousPageSize);
+            if (pageSizeDropdownList) {
+                pageSizeDropdownList.setValue(this.#previousPageSize);
+            }
+            return;
+        }
+        this.#previousPageSize = value;
+        this.pagerPageSize.set(value);
+        if (pageSizeDropdownList) {
+            pageSizeDropdownList.setValue(value);
+        }
+        this.setPage(1);
+    }
+    onPreviousPageClick() {
+        const page = Math.max(this.page() - 1, 1);
+        this.setPage(page);
+    }
+    pageItemClasses(active) {
+        return pagerListItemThemeVariants(this.#themeService.theme())({ active });
+    }
+    activateInnerNavigation() {
+        const targets = this.getFocusableTargets();
+        if (targets.length === 0) {
+            return;
+        }
+        this.#innerNavigationActive.set(true);
+        targets[0].focus();
+    }
+    focusNextTarget(backwards) {
+        const targets = this.getFocusableTargets();
+        if (targets.length === 0) {
+            return;
+        }
+        const activeElement = this.#document.activeElement;
+        const currentIndex = activeElement
+            ? targets.findIndex(target => target === activeElement || target.contains(activeElement))
+            : -1;
+        const nextIndex = currentIndex === -1 ? 0 : (currentIndex + (backwards ? -1 : 1) + targets.length) % targets.length;
+        targets[nextIndex].focus();
+    }
+    getFocusableTargets() {
+        const host = this.#hostElementRef.nativeElement;
+        const markedElements = Array.from(host.querySelectorAll(`[${PAGER_FOCUSABLE_ATTRIBUTE}="true"]`));
+        const targets = [];
+        const seen = new Set();
+        for (const element of markedElements) {
+            const target = this.resolveFocusableTarget(element);
+            if (!target || seen.has(target) || this.isElementDisabled(target) || this.isElementHidden(target)) {
+                continue;
+            }
+            seen.add(target);
+            targets.push(target);
+        }
+        return targets;
+    }
+    handleInnerNavigationKeydown(event) {
+        if (event.key === NavigationKeys.Escape) {
+            event.preventDefault();
+            this.#innerNavigationActive.set(false);
+            this.#hostElementRef.nativeElement.focus();
+            return;
+        }
+        if (event.key === "Tab") {
+            event.preventDefault();
+            this.focusNextTarget(event.shiftKey);
+        }
+    }
+    isElementDisabled(element) {
+        if ((element instanceof HTMLButtonElement ||
+            element instanceof HTMLInputElement ||
+            element instanceof HTMLSelectElement ||
+            element instanceof HTMLTextAreaElement) &&
+            element.disabled) {
+            return true;
+        }
+        return element.getAttribute("aria-disabled") === "true" || element.hasAttribute("disabled");
+    }
+    isElementHidden(element) {
+        if (element.closest("[hidden]") || element.getAttribute("aria-hidden") === "true") {
+            return true;
+        }
+        const style = this.#document.defaultView?.getComputedStyle(element);
+        return style?.display === "none" || style?.visibility === "hidden";
+    }
+    overrideTabIndex(element) {
+        if (!this.#originalTabIndices.has(element)) {
+            this.#originalTabIndices.set(element, element.getAttribute("tabindex"));
+        }
+        element.setAttribute("tabindex", "-1");
+        this.#managedFocusTargets.add(element);
+    }
+    preparePages(currentPage, visiblePages, maxPages) {
+        const half = Math.floor(visiblePages / 2);
+        let first = 1;
+        let index = 0;
+        const pages = [];
+        if (maxPages <= 5) {
+            for (index = 1; index <= maxPages; index++) {
+                pages.push({ page: index, text: index.toString() });
+            }
+        }
+        else if (currentPage < visiblePages) {
+            pages.push({ page: first, text: first.toString() });
+            for (index = 2; index < (maxPages < visiblePages ? maxPages : visiblePages) + 1; index++) {
+                pages.push({ page: index, text: index.toString() });
+            }
+            pages.push({ page: maxPages, text: maxPages.toString() });
+        }
+        else if (currentPage >= visiblePages && currentPage <= maxPages - visiblePages) {
+            pages.push({ page: first, text: first.toString() });
+            for (index = currentPage - half; index < currentPage + visiblePages - half; index++) {
+                pages.push({ page: index, text: index.toString() });
+            }
+            pages.push({ page: maxPages, text: maxPages.toString() });
+        }
+        else if (currentPage >= maxPages - visiblePages) {
+            pages.push({ page: first, text: first.toString() });
+            index = maxPages - visiblePages < currentPage ? maxPages - visiblePages : currentPage;
+            for (; index <= maxPages; index++) {
+                pages.push({ page: index, text: index.toString() });
+            }
+        }
+        return pages;
+    }
+    resolveFocusableTarget(element) {
+        if (element.matches(FOCUSABLE_TARGET_SELECTOR)) {
+            return element;
+        }
+        return (Array.from(element.querySelectorAll(FOCUSABLE_TARGET_SELECTOR)).find(target => !this.isElementDisabled(target) && !this.isElementHidden(target)) ?? null);
+    }
+    restoreManagedFocusTarget(element) {
+        const originalTabIndex = this.#originalTabIndices.get(element);
+        if (originalTabIndex == null) {
+            element.removeAttribute("tabindex");
+        }
+        else {
+            element.setAttribute("tabindex", originalTabIndex);
+        }
+        this.#managedFocusTargets.delete(element);
+    }
+    restoreManagedFocusTargets() {
+        for (const element of Array.from(this.#managedFocusTargets)) {
+            this.restoreManagedFocusTarget(element);
+        }
+    }
+    setKeyboardPage(page) {
+        const pageCount = this.pageCount();
+        if (pageCount < 1) {
+            return;
+        }
+        this.setPage(Math.min(Math.max(page, 1), pageCount));
+    }
+    setPage(page) {
+        this.#skip.set((page - 1) * this.pagerPageSize());
+    }
+    syncFocusableTabIndexes() {
+        const focusableTargets = this.getFocusableTargets();
+        const currentTargets = new Set(focusableTargets);
+        for (const element of Array.from(this.#managedFocusTargets)) {
+            if (!this.navigable() || !currentTargets.has(element)) {
+                this.restoreManagedFocusTarget(element);
+            }
+        }
+        if (!this.navigable()) {
+            return;
+        }
+        for (const target of focusableTargets) {
+            this.overrideTabIndex(target);
+        }
+    }
+    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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-pager", imports: [
+                        ButtonDirective,
+                        NumericTextBoxComponent,
+                        FormsModule,
+                        DropdownListComponent,
+                        PagerFocusableDirective,
+                        SlicePipe,
+                        DropdownVirtualScrollDirective,
+                        NgTemplateOutlet,
+                        DropdownListValueTemplateDirective,
+                        LucideEllipsis,
+                        LucideChevronsLeft,
+                        LucideChevronLeft,
+                        LucideChevronRight,
+                        LucideChevronsRight
+                    ], host: {
+                        "[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" }]
+        }], 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 }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/pager
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PageSizeChangeEvent, PagerComponent, PagerInfoTemplateDirective, PagerNavigationButtonsTemplateDirective, PagerNumericButtonsTemplateDirective, PagerPageSizeTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-pager.mjs.map