@nanahoshi/mona-ui 0.18.5 → 0.19.0

package/fesm2022/nanahoshi-mona-ui-otp-input.mjs

@@ -3,6 +3,7 @@ import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, signal, viewChild, contentChild, input, output, model, effect, Component } from '@angular/core';
 import { themeControlSurfaceClasses, AttributeBinderDirective } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
+import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
 class OtpInputSeparatorTemplateDirective {
@@ -22,6 +23,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+const OTP_INPUT_DEFAULT_MESSAGES = {
+    verificationCode: "Verification code"
+};
+
 const otpInputHostThemeVariants = cva(`
         relative inline-flex items-center gap-2
         outline-none
@@ -268,7 +273,9 @@ function computeSlotClasses(options) {
 }
 
 class OtpInputComponent {
+    #i18n;
     constructor() {
+        this.#i18n = inject(MonaI18nService);
         this.activeSlotIndex = computed(() => {
             if (!this.hasFocus()) {
                 return -1;
@@ -302,7 +309,7 @@ class OtpInputComponent {
                 return customAttrLabel;
             }
             const fallback = toNonEmptyString(this.ariaLabel());
-            return fallback ?? "Verification code";
+            return fallback ?? this.messages().verificationCode;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
         this.computedAriaLabelledby = computed(() => {
@@ -350,6 +357,7 @@ class OtpInputComponent {
             return Math.max(0, Math.min(this.selectionStart(), maxLogicalPosition));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "logicalSelectionStart" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("otpInput", OTP_INPUT_DEFAULT_MESSAGES);
         this.nativeInputType = computed(() => (this.type() === "password" ? "password" : "text"), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nativeInputType" }] : /* istanbul ignore next */ []));
         this.normalizedLength = computed(() => normalizeLength(this.length()), /* @ts-ignore */
@@ -426,9 +434,9 @@ class OtpInputComponent {
         ...(ngDevMode ? [{ debugName: "visualGroups" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible name for the inner `<input>` element.
-         * @default "Verification code"
+         * @default null
          */
-        this.ariaLabel = input("Verification code", /* @ts-ignore */
+        this.ariaLabel = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         /**
          * @description Regular expression used to determine whether each individual OTP character is allowed.
@@ -786,7 +794,7 @@ class OtpInputComponent {
         this.selectionEnd.set(el.selectionEnd ?? 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OtpInputComponent, isStandalone: true, selector: "mona-otp-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupLength: { classPropertyName: "groupLength", publicName: "groupLength", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorClass: { classPropertyName: "separatorClass", publicName: "separatorClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, slotClass: { classPropertyName: "slotClass", publicName: "slotClass", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete", inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { attributes: { "dir": "ltr" }, properties: { "attr.dir": "'ltr'", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidState() || null", "attr.data-complete": "isComplete() || null", "attr.data-focused": "hasFocus() || null", "class": "classes()" } }, queries: [{ propertyName: "separatorTemplate", first: true, predicate: OtpInputSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class.-space-x-px]=\"!spacing()\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: OtpInputComponent, isStandalone: true, selector: "mona-otp-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groupLength: { classPropertyName: "groupLength", publicName: "groupLength", isSignal: true, isRequired: false, transformFunction: null }, inputAttributes: { classPropertyName: "inputAttributes", publicName: "inputAttributes", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorClass: { classPropertyName: "separatorClass", publicName: "separatorClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, slotClass: { classPropertyName: "slotClass", publicName: "slotClass", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete", inputBlur: "inputBlur", inputFocus: "inputFocus", touch: "touch", value: "valueChange" }, host: { attributes: { "dir": "ltr" }, properties: { "attr.dir": "'ltr'", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "attr.data-invalid": "invalidState() || null", "attr.data-complete": "isComplete() || null", "attr.data-focused": "hasFocus() || null", "class": "classes()" } }, queries: [{ propertyName: "separatorTemplate", first: true, predicate: OtpInputSeparatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class]=\"!spacing() ? '[&>*:not(:first-child)]:-ms-px' : ''\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AttributeBinderDirective, selector: "[monaAttributeBinder]", inputs: ["monaAttributeBinder"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: OtpInputComponent, decorators: [{
             type: Component,
@@ -800,7 +808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-complete]": "isComplete() || null",
                         "[attr.data-focused]": "hasFocus() || null",
                         "[class]": "classes()"
-                    }, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class.-space-x-px]=\"!spacing()\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n" }]
+                    }, template: "<input\n    #input\n    [class]=\"inputClass()\"\n    tabindex=\"0\"\n    [value]=\"value()\"\n    [disabled]=\"disabled()\"\n    [readOnly]=\"readonly()\"\n    [required]=\"required()\"\n    [type]=\"nativeInputType()\"\n    [attr.inputmode]=\"derivedInputMode()\"\n    [attr.autocomplete]=\"derivedAutocomplete()\"\n    [attr.autocapitalize]=\"'off'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.aria-label]=\"computedAriaLabel()\"\n    [attr.aria-labelledby]=\"computedAriaLabelledby()\"\n    [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n    [attr.aria-required]=\"required() ? 'true' : null\"\n    [attr.maxlength]=\"normalizedLength()\"\n    [monaAttributeBinder]=\"sanitizedAttributes()\"\n    (beforeinput)=\"onBeforeInput($event)\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n    (paste)=\"onPaste($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (select)=\"onSelect()\"\n    (keyup)=\"onKeyUp()\"\n    (compositionstart)=\"onCompositionStart()\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n\n@for (group of visualGroups(); track group.index; let lastGroup = $last) {\n    <div\n        class=\"inline-flex items-center\"\n        [class.gap-1.5]=\"spacing()\"\n        [class]=\"!spacing() ? '[&>*:not(:first-child)]:-ms-px' : ''\"\n        [attr.data-group-index]=\"group.index\">\n        @for (slot of group.slots; track slot.index) {\n            <span\n                class=\"otp-slot\"\n                [class]=\"slot.classes\"\n                [attr.data-slot-index]=\"slot.index\"\n                [attr.data-active]=\"slot.active || null\"\n                [attr.data-selected]=\"slot.selected || null\"\n                [attr.data-filled]=\"slot.filled || null\"\n                [attr.data-placeholder]=\"slot.placeholder || null\"\n                [attr.data-disabled]=\"disabled() || null\"\n                [attr.data-readonly]=\"readonly() || null\"\n                [attr.data-invalid]=\"invalidState() || null\"\n                (pointerdown)=\"onSlotPointerDown($event, slot.index)\"\n                aria-hidden=\"true\">\n                {{ slot.displayCharacter }}\n                @if (slot.active && !slot.filled && hasFocus() && !disabled() && !readonly()) {\n                    <span\n                        class=\"pointer-events-none absolute inset-y-2 w-0.5 animate-pulse motion-reduce:animate-none bg-foreground\"\n                        aria-hidden=\"true\"></span>\n                }\n            </span>\n        }\n    </div>\n\n    @if (!lastGroup && (separator() || separatorTemplate())) {\n        <span\n            class=\"inline-flex items-center justify-center text-muted-foreground select-none px-1\"\n            [class]=\"separatorClass()\"\n            aria-hidden=\"true\">\n            @if (separatorTemplate(); as customTemplate) {\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        customTemplate;\n                        context: { $implicit: group.index, groupIndex: group.index }\n                    \"></ng-container>\n            } @else {\n                {{ separator() }}\n            }\n        </span>\n    }\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ["input", { isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OtpInputSeparatorTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groupLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupLength", required: false }] }], inputAttributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputAttributes", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], slotClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotClass", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
@@ -813,5 +821,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OtpInputComponent, OtpInputSeparatorTemplateDirective };
+export { OTP_INPUT_DEFAULT_MESSAGES, OtpInputComponent, OtpInputSeparatorTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-otp-input.mjs.map

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

@@ -10,10 +10,26 @@ 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 { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
+import { injectComponentDirection, MonaI18nService } 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';
 
+const PAGER_DEFAULT_MESSAGES = {
+    firstPageLabel: "First page",
+    jumpBackwardLabel: (pages) => `Jump back ${pages} pages`,
+    jumpForwardLabel: (pages) => `Jump forward ${pages} pages`,
+    lastPageLabel: "Last page",
+    nextPageLabel: "Next page",
+    ofText: "of",
+    pageLabel: (page) => `Page ${page}`,
+    pageSizeLabel: (pageSize) => `${pageSize} / page`,
+    pageStatus: (page, totalPages) => `Page ${page} of ${totalPages}`,
+    pageText: "Page",
+    previousPageLabel: "Previous page",
+    rangeStatus: (start, end, total) => `${start} - ${end} of ${total} items`
+};
+
 class PagerFocusableDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerFocusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: PagerFocusableDirective, isStandalone: true, selector: "[monaPagerFocusable]", host: { properties: { "attr.data-mona-pager-focusable": "'true'" } }, ngImport: i0 }); }
@@ -96,7 +112,7 @@ const pagerBaseThemeVariants = cva(`
         text-sm
         bg-(--mona-pager-background) ${themeRaisedBackdropClasses} text-foreground
         border border-border-subtle
-        [&_mona-numeric-text-box]:ml-4
+        [&_mona-numeric-text-box]:ms-4
         [&_mona-numeric-text-box]:w-12
         [&_mona-numeric-text-box_input]:bg-input-background
         [&_mona-numeric-text-box_input]:text-center
@@ -119,7 +135,7 @@ const pagerBaseThemeVariants = cva(`
     }
 });
 const pagerInfoThemeVariants = cva(`
-        flex flex-1 items-center justify-end pl-2
+        flex flex-1 items-center justify-end ps-2
         whitespace-nowrap text-muted-foreground
     `);
 const pagerInputThemeVariants = cva(`
@@ -147,18 +163,22 @@ const pagerListItemThemeVariants = cva("", {
 const PAGER_FOCUSABLE_ATTRIBUTE = "data-mona-pager-focusable";
 const FOCUSABLE_TARGET_SELECTOR = "button, input, select, textarea, a[href], [tabindex]";
 class PagerComponent {
+    #direction;
     #document;
     #hostElementRef;
+    #i18n;
     #infoVisible;
     #innerNavigationActive;
     #managedFocusTargets;
     #originalTabIndices;
     #skip;
-    #widthObserver;
     #previousPageSize;
+    #widthObserver;
     constructor() {
+        this.#direction = injectComponentDirection();
         this.#document = inject(DOCUMENT);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#infoVisible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#infoVisible" }] : /* istanbul ignore next */ []));
         this.#innerNavigationActive = signal(false, /* @ts-ignore */
@@ -167,8 +187,8 @@ class PagerComponent {
         this.#originalTabIndices = new WeakMap();
         this.#skip = linkedSignal(() => this.skip(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#skip" }] : /* istanbul ignore next */ []));
-        this.#widthObserver = null;
         this.#previousPageSize = 10;
+        this.#widthObserver = null;
         this.navigationButtonsTemplateList = contentChildren(PagerNavigationButtonsTemplateDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigationButtonsTemplateList" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
@@ -178,7 +198,6 @@ class PagerComponent {
             return twMerge(classes, userClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
-        this.firstPageLabel = "First page";
         this.firstPageNavigationTemplate = computed(() => {
             const navigationTemplates = this.navigationButtonsTemplateList();
             return navigationTemplates.find(t => t.type() === "first");
@@ -214,11 +233,10 @@ class PagerComponent {
         ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
         this.inputValue = linkedSignal(() => this.page(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
-        this.jumpNextLabel = computed(() => `Jump forward ${this.visiblePages()} pages`, /* @ts-ignore */
+        this.jumpNextLabel = computed(() => this.messages().jumpForwardLabel(this.visiblePages()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "jumpNextLabel" }] : /* istanbul ignore next */ []));
-        this.jumpPreviousLabel = computed(() => `Jump back ${this.visiblePages()} pages`, /* @ts-ignore */
+        this.jumpPreviousLabel = computed(() => this.messages().jumpBackwardLabel(this.visiblePages()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "jumpPreviousLabel" }] : /* istanbul ignore next */ []));
-        this.lastPageLabel = "Last page";
         this.lastPageNavigationTemplate = computed(() => {
             const navigationTemplates = this.navigationButtonsTemplateList();
             return navigationTemplates.find(t => t.type() === "last");
@@ -228,13 +246,13 @@ class PagerComponent {
             return pagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("pager", PAGER_DEFAULT_MESSAGES);
         this.nextJumperVisible = computed(() => {
             const pages = this.pages();
             const visiblePages = this.visiblePages();
             return pages.length > visiblePages && pages[pages.length - 1].page - pages[pages.length - 2].page > 1;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nextJumperVisible" }] : /* istanbul ignore next */ []));
-        this.nextPageLabel = "Next page";
         this.nextPageNavigationTemplate = computed(() => {
             const navigationTemplates = this.navigationButtonsTemplateList();
             return navigationTemplates.find(t => t.type() === "next");
@@ -254,8 +272,6 @@ class PagerComponent {
         ...(ngDevMode ? [{ debugName: "pageList" }] : /* istanbul ignore next */ []));
         this.pageListVisible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageListVisible" }] : /* istanbul ignore next */ []));
-        this.pageSizeDropdownList = viewChild("pageSizeDropdownList", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "pageSizeDropdownList" }] : /* istanbul ignore next */ []));
         this.pageSizeDropdownData = computed(() => {
             const values = this.pageSizeValues();
             if (values === false || (Array.isArray(values) && values.length === 0)) {
@@ -267,11 +283,13 @@ class PagerComponent {
             return [5, 10, 20, 50, 100];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageSizeDropdownData" }] : /* istanbul ignore next */ []));
+        this.pageSizeDropdownList = viewChild("pageSizeDropdownList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizeDropdownList" }] : /* istanbul ignore next */ []));
         this.pageSizeTemplate = contentChild(PagerPageSizeTemplateDirective, { ...(ngDevMode ? { debugName: "pageSizeTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.pagerInfo = computed(() => {
             const start = (this.page() - 1) * this.pagerPageSize() + 1;
             const end = Math.min(this.page() * this.pagerPageSize(), this.total());
-            return `${start} - ${end} of ${this.total()} items`;
+            return this.messages().rangeStatus(start, end, this.total());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerInfo" }] : /* istanbul ignore next */ []));
         this.pagerInfoTemplate = contentChild(PagerInfoTemplateDirective, /* @ts-ignore */
@@ -294,7 +312,6 @@ class PagerComponent {
         ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
         this.previousJumperVisible = computed(() => this.pages().length > this.visiblePages() && this.pages()[1].page - 1 > 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "previousJumperVisible" }] : /* istanbul ignore next */ []));
-        this.previousPageLabel = "Previous page";
         this.previousPageNavigationTemplate = computed(() => {
             const navigationTemplates = this.navigationButtonsTemplateList();
             return navigationTemplates.find(t => t.type() === "previous");
@@ -486,12 +503,22 @@ class PagerComponent {
                 event.preventDefault();
                 this.activateInnerNavigation();
                 break;
-            case NavigationKeys.ArrowLeft:
+            case NavigationKeys.ArrowLeft: {
+                event.preventDefault();
+                const delta = this.#direction() === "rtl" ? 1 : -1;
+                this.setKeyboardPage(this.page() + delta);
+                break;
+            }
+            case NavigationKeys.ArrowRight: {
+                event.preventDefault();
+                const delta = this.#direction() === "rtl" ? -1 : 1;
+                this.setKeyboardPage(this.page() + delta);
+                break;
+            }
             case NavigationKeys.PageUp:
                 event.preventDefault();
                 this.setKeyboardPage(this.page() - 1);
                 break;
-            case NavigationKeys.ArrowRight:
             case NavigationKeys.PageDown:
                 event.preventDefault();
                 this.setKeyboardPage(this.page() + 1);
@@ -622,7 +649,7 @@ class PagerComponent {
     }
     preparePages(currentPage, visiblePages, maxPages) {
         const half = Math.floor(visiblePages / 2);
-        let first = 1;
+        const first = 1;
         let index = 0;
         const pages = [];
         if (maxPages <= 5) {
@@ -700,7 +727,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]=\"'Page 1'\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ item }} / page</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>Page</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>of</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "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                            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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -723,7 +750,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]=\"'Page 1'\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"'Page ' + pageItem.text\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"'Page ' + pageCount()\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                <span>{{ item }} / page</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>Page</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>of</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
+                    }, 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" }]
         }], 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 }] }] } });
 
 /*
@@ -734,5 +761,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PageSizeChangeEvent, PagerComponent, PagerInfoTemplateDirective, PagerNavigationButtonsTemplateDirective, PagerNumericButtonsTemplateDirective, PagerPageSizeTemplateDirective };
+export { PAGER_DEFAULT_MESSAGES, PageSizeChangeEvent, PagerComponent, PagerInfoTemplateDirective, PagerNavigationButtonsTemplateDirective, PagerNumericButtonsTemplateDirective, PagerPageSizeTemplateDirective };
 //# sourceMappingURL=nanahoshi-mona-ui-pager.mjs.map