@nanahoshi/mona-ui 0.19.0 → 0.20.0

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

@@ -8,9 +8,9 @@ import { range } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
-import { DropdownVirtualScrollDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownVirtualScrollDirective, DropdownItemTemplateDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -469,6 +469,15 @@ class PagerComponent {
         });
         inject(DestroyRef).onDestroy(() => this.#widthObserver?.disconnect());
     }
+    formatPageNumber(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 0,
+            useGrouping: false
+        });
+    }
     onJumpNextClick() {
         const page = Math.min(this.page() + this.visiblePages(), this.pageCount());
         this.setPage(page);
@@ -654,28 +663,28 @@ class PagerComponent {
         const pages = [];
         if (maxPages <= 5) {
             for (index = 1; index <= maxPages; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
         }
         else if (currentPage < visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             for (index = 2; index < (maxPages < visiblePages ? maxPages : visiblePages) + 1; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
-            pages.push({ page: maxPages, text: maxPages.toString() });
+            pages.push({ page: maxPages, text: this.formatPageNumber(maxPages) });
         }
         else if (currentPage >= visiblePages && currentPage <= maxPages - visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             for (index = currentPage - half; index < currentPage + visiblePages - half; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
-            pages.push({ page: maxPages, text: maxPages.toString() });
+            pages.push({ page: maxPages, text: this.formatPageNumber(maxPages) });
         }
         else if (currentPage >= maxPages - visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             index = maxPages - visiblePages < currentPage ? maxPages - visiblePages : currentPage;
             for (; index <= maxPages; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
         }
         return pages;
@@ -727,7 +736,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                            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                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [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                            [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                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ 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>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"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: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"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: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"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: 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]=\"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", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "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", "valuePrimitive", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"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 (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                            [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                <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                @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: 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]=\"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: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"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: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"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: 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]=\"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", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "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", "valuePrimitive", "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: "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,
@@ -741,6 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         DropdownVirtualScrollDirective,
                         NgTemplateOutlet,
                         DropdownListValueTemplateDirective,
+                        DropdownItemTemplateDirective,
                         LucideEllipsis,
                         LucideChevronsLeft,
                         LucideChevronLeft,
@@ -750,7 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.tabindex]": "navigable() ? 0 : null",
                         "[class]": "baseClasses()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\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                            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                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [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                            [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                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ 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>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"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: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"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: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"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: 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]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
+                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"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 (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                            [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                <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                @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: 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]=\"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: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"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: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"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: 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]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { navigationButtonsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PagerNavigationButtonsTemplateDirective), { isSignal: true }] }], numericButtonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerNumericButtonsTemplateDirective), { isSignal: true }] }], pageSizeDropdownList: [{ type: i0.ViewChild, args: ["pageSizeDropdownList", { isSignal: true }] }], pageSizeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerPageSizeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], pagerInfoTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerInfoTemplateDirective), { isSignal: true }] }], firstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLast", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageInput", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], previousNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousNext", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], skip: [{ type: i0.Input, args: [{ isSignal: true, alias: "skip", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }] } });
 
 /*

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

@@ -4,7 +4,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { select } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 /**
@@ -210,8 +210,6 @@ class StepperComponent {
         this.#direction = injectComponentDirection();
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
-        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.#trackItemSize = computed(() => {
             const stepCount = this.viewSteps().length;
             return stepCount !== 0 ? 100 / stepCount : 0;
@@ -252,6 +250,8 @@ class StepperComponent {
         this.indicatorTemplate = contentChild(StepperIndicatorTemplateDirective, {
             read: TemplateRef
         });
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.labelTemplate = contentChild(StepperLabelTemplateDirective, { read: TemplateRef });
         this.listClass = computed(() => {
             const orientation = this.orientation();
@@ -363,6 +363,15 @@ class StepperComponent {
             read: () => this.setKeyboardEvents()
         });
     }
+    formatStepNumber(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 0,
+            useGrouping: false
+        });
+    }
     isStepActive(step) {
         const active = this.activeStep();
         return active != null && step.index <= active.index;
@@ -464,7 +473,7 @@ class StepperComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || messages().stepper", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() || messages().stepper", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ formatStepNumber(step.index + 1) }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
@@ -473,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.aria-label]": "ariaLabel() || messages().stepper",
                         "[class]": "baseClass()",
                         "[style]": "hostStyles()"
-                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ step.index + 1 }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
+                    }, template: "<ol [class]=\"listClass()\">\n    @for (step of viewSteps(); track step.index) {\n        @let active = isStepActive(step);\n        @let locked = isStepLocked(step);\n        @let focused = step.index === highlightedStep();\n        @let options = step.options;\n        @let index = step.index;\n        @let currentIndex = activeStep()?.index ?? -1;\n        @let disabled = !!options.disabled;\n        <li\n            [class]=\"listItemClass()\"\n            [class.cursor-pointer]=\"!locked\"\n            [class.cursor-not-allowed]=\"locked\"\n            [style]=\"trackItemStyles()\"\n            role=\"presentation\"\n            (click)=\"onStepClick(step)\">\n            @if (stepTemplate()) {\n                <span\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"stepTemplate()\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: options,\n                            index,\n                            active,\n                            currentIndex,\n                            disabled\n                        }\"></ng-container>\n                </span>\n            } @else {\n                <span\n                    monaStepperIndicator\n                    [rounded]=\"rounded()\"\n                    [active]=\"active\"\n                    [focused]=\"focused\"\n                    role=\"button\"\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\n                    [attr.aria-label]=\"options.label\"\n                    [attr.tabindex]=\"focused ? 0 : -1\"\n                    (focus)=\"onIndicatorFocus(step)\">\n                    @if (indicatorTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: options,\n                                index,\n                                active,\n                                currentIndex,\n                                disabled\n                            }\"></ng-container>\n                    } @else {\n                        {{ formatStepNumber(step.index + 1) }}\n                    }\n                </span>\n            }\n            @if (labelTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"labelTemplate()\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: options,\n                        index,\n                        active,\n                        currentIndex,\n                        disabled\n                    }\"></ng-container>\n            } @else {\n                <span aria-hidden=\"true\">{{ options.label }}</span>\n            }\n        </li>\n    }\n</ol>\n<div\n    [class]=\"trackClass()\"\n    [style]=\"trackStyles()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"step()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"progressMax()\"\n    [attr.aria-label]=\"progressAriaLabel() || messages().stepProgress\">\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { indicatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperIndicatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperStepTemplateDirective), { ...{

package/fesm2022/nanahoshi-mona-ui-time-picker.mjs

@@ -5,7 +5,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, dropdownPopupThemeVariants, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { MonaI18nService, gregorianDateTime, getLocaleTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
@@ -96,14 +96,22 @@ class TimePickerComponent {
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.currentDateString = linkedSignal(() => {
             const value = this.value();
-            const format = this.format();
+            const format = this.effectiveFormat();
             const locale = this.#i18n.localeId();
             if (!value) {
                 return "";
             }
-            return DateTime.fromJSDate(value).setLocale(locale).toFormat(format);
+            return gregorianDateTime(value, locale).toFormat(format);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
+        this.effectiveFormat = computed(() => {
+            return (this.format() ??
+                getLocaleTimeInputFormat(this.#i18n.localeId(), {
+                    hourFormat: this.hourFormat(),
+                    showSeconds: this.showSeconds()
+                }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#dropdownService.popupRef() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.inputAttributes = computed(() => {
@@ -153,9 +161,10 @@ class TimePickerComponent {
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the format of the time picker.
+         * @description Sets the format of the time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @default null
          */
-        this.format = input("HH:mm", /* @ts-ignore */
+        this.format = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the hour format of the time picker.
@@ -329,16 +338,16 @@ class TimePickerComponent {
     dateStringEquals(date1, date2) {
         if (date1 && date2) {
             const locale = this.#i18n.localeId();
-            return (DateTime.fromJSDate(date1).setLocale(locale).toFormat(this.format()) ===
-                DateTime.fromJSDate(date2).setLocale(locale).toFormat(this.format()));
+            return (gregorianDateTime(date1, locale).toFormat(this.effectiveFormat()) ===
+                gregorianDateTime(date2, locale).toFormat(this.effectiveFormat()));
         }
         return date1 === date2;
     }
     generateValidDateTime(dateString) {
         const value = this.value();
         const locale = this.#i18n.localeId();
-        const valueDate = value ? DateTime.fromJSDate(value).setLocale(locale) : DateTime.now().setLocale(locale);
-        let dateTime = DateTime.fromFormat(dateString, this.format(), { locale });
+        const valueDate = value ? gregorianDateTime(value, locale) : gregorianDateTime(new Date(), locale);
+        let dateTime = parseGregorianDate(dateString, this.effectiveFormat(), locale);
         if (dateTime.isValid) {
             return dateTime.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
         }
@@ -346,7 +355,7 @@ class TimePickerComponent {
         const minDate = this.min();
         const date = minDate ?? maxDate;
         if (date) {
-            const newDate = DateTime.fromJSDate(date).setLocale(locale);
+            const newDate = gregorianDateTime(date, locale);
             dateTime = newDate.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
             return dateTime;
         }
@@ -395,14 +404,14 @@ class TimePickerComponent {
         this.touch.emit();
     }
     setCurrentDateString(date) {
-        this.updateCurrentDateString(date, this.format());
+        this.updateCurrentDateString(date, this.effectiveFormat());
     }
     setDateValues() {
         const value = this.value();
         const locale = this.#i18n.localeId();
         this.navigatedDate.set(value ?? DateTime.now().setLocale(locale).toJSDate());
         if (value) {
-            this.updateCurrentDateString(value, this.format());
+            this.updateCurrentDateString(value, this.effectiveFormat());
         }
     }
     setKeyboardNavigation() {
@@ -424,7 +433,7 @@ class TimePickerComponent {
             this.currentDateString.set("");
             return;
         }
-        const dateString = DateTime.fromJSDate(date).setLocale(this.#i18n.localeId()).toFormat(format);
+        const dateString = gregorianDateTime(date, this.#i18n.localeId()).toFormat(format);
         this.currentDateString.set(dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }

package/locales/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-locales.mjs",
+  "typings": "../types/nanahoshi-mona-ui-locales.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -227,6 +227,10 @@
       "types": "./types/nanahoshi-mona-ui-list-view.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-list-view.mjs"
     },
+    "./locales": {
+      "types": "./types/nanahoshi-mona-ui-locales.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-locales.mjs"
+    },
     "./menubar": {
       "types": "./types/nanahoshi-mona-ui-menubar.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-menubar.mjs"