npm - @nanahoshi/mona-ui - Versions diffs - 0.24.4 → 0.24.6 - Mend

@nanahoshi/mona-ui 0.24.4 → 0.24.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

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

@@ -746,7 +746,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;\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]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(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]=\"messages().pageLabel(pageItem.page)\"\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]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(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 (hasPages() && 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                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\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                            [aria-label]=\"messages().pageSizeLabel(pageSize())\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                <span>{{ formatPageNumber(item) }}</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                @if (hasPages()) {\n                    <li class=\"flex items-center gap-2 mx-2\">\n                        <span>{{ messages().pageText }}</span>\n                        <mona-numeric-text-box\n                            monaPagerFocusable\n                            [spinners]=\"false\"\n                            [minValue]=\"1\"\n                            [maxValue]=\"pageCount()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                            [ngModel]=\"inputValue()\"\n                            (ngModelChange)=\"inputValue.set($event)\"\n                            (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                        <span>{{ messages().ofText }}</span>\n                        <span>{{ formatPageNumber(pageCount()) }}</span>\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    </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\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </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: !hasPages() || 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]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"!hasPages() || page() <= 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"!hasPages() || page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"!hasPages() || page() < 1 || page() >= pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"!hasPages() || page() >= pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [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", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], 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: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }, { 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]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(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]=\"messages().pageLabel(pageItem.page)\"\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]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(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 (hasPages() && 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                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\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                            [aria-label]=\"messages().pageSizeLabel(pageSize())\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                <span>{{ formatPageNumber(item) }}</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                @if (hasPages()) {\n                    <li class=\"flex items-center gap-2 mx-2\">\n                        <span>{{ messages().pageText }}</span>\n                        <mona-numeric-text-box\n                            monaPagerFocusable\n                            [spinners]=\"false\"\n                            [minValue]=\"1\"\n                            [maxValue]=\"pageCount()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                            [ngModel]=\"inputValue()\"\n                            (ngModelChange)=\"inputValue.set($event)\"\n                            (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                        <span>{{ messages().ofText }}</span>\n                        <span>{{ formatPageNumber(pageCount()) }}</span>\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    </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\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </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: !hasPages() || 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]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"!hasPages() || page() <= 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"!hasPages() || page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"!hasPages() || page() < 1 || page() >= pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [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: !hasPages() || 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]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"!hasPages() || page() >= pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [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", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["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-describedby", "aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "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: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }, { 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,