@nanahoshi/mona-ui 0.1.0 → 0.1.1

package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs

@@ -26,26 +26,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const numericTextboxVariants = cva(`
-        flex items-center w-full min-w-0
-        bg-transparent
-        border border-input-border p-0
-        outline-none overflow-hidden
-
-        placeholder:text-muted-foreground
-
-        selection:bg-primary selection:text-primary-foreground
-        transition-[color,box-shadow,border] ease-in-out duration-300
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        focus-within:ring-2 focus-within:ring-primary/40
-        focus-within:border-primary
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const numericTextboxVariants = cva(`
+        flex items-center w-full min-w-0
+        bg-transparent
+        border border-input-border p-0
+        outline-none overflow-hidden
+
+        placeholder:text-muted-foreground
+
+        selection:bg-primary selection:text-primary-foreground
+        transition-[color,box-shadow,border] ease-in-out duration-300
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        focus-within:ring-2 focus-within:ring-primary/40
+        focus-within:border-primary
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -62,71 +62,71 @@ const numericTextboxVariants = cva(`
         }
     }
 });
-const numericTextboxInputVariants = cva(`
-        border-0 outline-none ring-0
-        h-full w-full
-        focus-visible:ring-0 shadow-none
-        rounded-none
+const numericTextboxInputVariants = cva(`
+        border-0 outline-none ring-0
+        h-full w-full
+        focus-visible:ring-0 shadow-none
+        rounded-none
     `, {
     variants: {
         leftRounded: {
-            full: `
-                    rounded-tl-full rounded-bl-full
+            full: `
+                    rounded-tl-full rounded-bl-full
                 `,
-            large: `
-                    rounded-tl-lg rounded-bl-lg
+            large: `
+                    rounded-tl-lg rounded-bl-lg
                 `,
-            medium: `
-                    rounded-tl-md rounded-bl-md
+            medium: `
+                    rounded-tl-md rounded-bl-md
                 `,
-            none: `
-                    rounded-tl-none rounded-bl-none
+            none: `
+                    rounded-tl-none rounded-bl-none
                 `,
-            small: `
-                    rounded-tl-sm rounded-bl-sm
+            small: `
+                    rounded-tl-sm rounded-bl-sm
                 `
         },
         rightRounded: {
-            full: `
-                    rounded-tr-full rounded-br-full
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+            full: `
+                    rounded-tr-full rounded-br-full
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
                 `,
-            large: `
-                    rounded-tr-lg rounded-br-lg
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+            large: `
+                    rounded-tr-lg rounded-br-lg
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
                 `,
-            medium: `
-                    rounded-tr-md rounded-br-md
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+            medium: `
+                    rounded-tr-md rounded-br-md
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
                 `,
-            none: `
-                    rounded-tr-none rounded-br-none
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+            none: `
+                    rounded-tr-none rounded-br-none
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
                 `,
-            small: `
-                    rounded-tr-sm rounded-br-sm
-                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
+            small: `
+                    rounded-tr-sm rounded-br-sm
+                    data-[spinners='true']:rounded-tr-none data-[spinners='true']:rounded-br-none
                 `
         }
     }
 });
-const numericTextboxButtonVariants = cva(`
-        h-full flex flex-col border-l border-input-border
-        overflow-y-hidden
-        [&>button]:flex-1
-        [&>button]:flex
-        [&>button]:items-center
-        [&>button]:p-0
-        [&>button]:rounded-none
-
-        [&>button]:first:rounded-tl-none
-        [&>button]:first:rounded-bl-none
-        [&>button]:first:rounded-br-none
-        [&>button]:first:h-1/2
-        [&>button]:last:rounded-tl-none
-        [&>button]:last:rounded-bl-none
-        [&>button]:last:rounded-tr-none
-        [&>button]:last:h-1/2
+const numericTextboxButtonVariants = cva(`
+        h-full flex flex-col border-l border-input-border
+        overflow-y-hidden
+        [&>button]:flex-1
+        [&>button]:flex
+        [&>button]:items-center
+        [&>button]:p-0
+        [&>button]:rounded-none
+
+        [&>button]:first:rounded-tl-none
+        [&>button]:first:rounded-bl-none
+        [&>button]:first:rounded-br-none
+        [&>button]:first:h-1/2
+        [&>button]:last:rounded-tl-none
+        [&>button]:last:rounded-bl-none
+        [&>button]:last:rounded-tr-none
+        [&>button]:last:h-1/2
     `, {
     variants: {
         size: {
@@ -570,7 +570,7 @@ class NumericTextBoxComponent {
         return parseFloat(sanitizedValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    monaTextBox\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [type]=\"'text'\"\r\n    inputmode=\"numeric\"\r\n    [readonly]=\"readonly()\"\r\n    [tabIndex]=\"tabindex()\"\r\n    [ngModel]=\"formattedValue()\"\r\n    (ngModelChange)=\"applyRawValue($event)\"\r\n    (keydown)=\"keydown$.next($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    (focusout)=\"inputFocusOut.emit($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (beforeinput)=\"beforeInput$.next($event)\"\r\n    (wheel)=\"wheel$.next($event)\"\r\n    [size]=\"size()\"\r\n    [class]=\"inputClasses()\"\r\n    autocomplete=\"off\"\r\n    role=\"spinbutton\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-invalid]=\"invalidInput() || null\"\r\n    [attr.aria-readonly]=\"readonly()\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuetext]=\"formattedValue()\"\r\n    [attr.data-spinners]=\"spinners()\"\r\n    #valueTextBox />\r\n@if (spinners()) {\r\n    <div [class]=\"spinButtonClasses()\">\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('+')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Increase value\">\r\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('-')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Decrease value\">\r\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n    </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NumericTextBoxComponent, isStandalone: true, selector: "mona-numeric-text-box", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, decimals: { classPropertyName: "decimals", publicName: "decimals", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, nullable: { classPropertyName: "nullable", publicName: "nullable", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spinners: { classPropertyName: "spinners", publicName: "spinners", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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: { inputBlur: "inputBlur", inputFocus: "inputFocus", inputFocusOut: "inputFocusOut", touch: "touch", value: "valueChange" }, host: { properties: { "class": "classes()", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidInput() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null" } }, queries: [{ propertyName: "prefixTemplateList", predicate: NumericTextBoxPrefixTemplateDirective, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "valueTextBoxRef", first: true, predicate: ["valueTextBox"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["rounded", "size", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
@@ -580,7 +580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-invalid]": "invalidInput() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null"
-                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\r\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\r\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\r\n    </span>\r\n}\r\n<input\r\n    monaTextBox\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [type]=\"'text'\"\r\n    inputmode=\"numeric\"\r\n    [readonly]=\"readonly()\"\r\n    [tabIndex]=\"tabindex()\"\r\n    [ngModel]=\"formattedValue()\"\r\n    (ngModelChange)=\"applyRawValue($event)\"\r\n    (keydown)=\"keydown$.next($event)\"\r\n    (focus)=\"inputFocus.emit($event)\"\r\n    (focusout)=\"inputFocusOut.emit($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (beforeinput)=\"beforeInput$.next($event)\"\r\n    (wheel)=\"wheel$.next($event)\"\r\n    [size]=\"size()\"\r\n    [class]=\"inputClasses()\"\r\n    autocomplete=\"off\"\r\n    role=\"spinbutton\"\r\n    [attr.aria-disabled]=\"disabled()\"\r\n    [attr.aria-invalid]=\"invalidInput() || null\"\r\n    [attr.aria-readonly]=\"readonly()\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    [attr.aria-valuenow]=\"value()\"\r\n    [attr.aria-valuemin]=\"minValue()\"\r\n    [attr.aria-valuemax]=\"maxValue()\"\r\n    [attr.aria-valuetext]=\"formattedValue()\"\r\n    [attr.data-spinners]=\"spinners()\"\r\n    #valueTextBox />\r\n@if (spinners()) {\r\n    <div [class]=\"spinButtonClasses()\">\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('+')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Increase value\">\r\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n        <button\r\n            monaButton\r\n            [disabled]=\"disabled()\"\r\n            [tabindex]=\"-1\"\r\n            look=\"secondary\"\r\n            [size]=\"size()\"\r\n            (mousedown)=\"$event.preventDefault()\"\r\n            (pointerdown)=\"spin$.next('-')\"\r\n            (pointerup)=\"spinStop$.next()\"\r\n            (pointerleave)=\"spinStop$.next()\"\r\n            aria-label=\"Decrease value\">\r\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\r\n        </button>\r\n    </div>\r\n}\r\n" }]
+                    }, template: "@for (prefixTemplate of prefixTemplateList(); track $index) {\n    <span class=\"flex items-center flex-none flex-wrap h-full overflow-hidden border-none\">\n        <ng-container *ngTemplateOutlet=\"prefixTemplate\"></ng-container>\n    </span>\n}\n<input\n    monaTextBox\n    [disabled]=\"disabled()\"\n    [required]=\"required()\"\n    [type]=\"'text'\"\n    inputmode=\"numeric\"\n    [readonly]=\"readonly()\"\n    [tabIndex]=\"tabindex()\"\n    [ngModel]=\"formattedValue()\"\n    (ngModelChange)=\"applyRawValue($event)\"\n    (keydown)=\"keydown$.next($event)\"\n    (focus)=\"inputFocus.emit($event)\"\n    (focusout)=\"inputFocusOut.emit($event)\"\n    (blur)=\"onBlur($event)\"\n    (beforeinput)=\"beforeInput$.next($event)\"\n    (wheel)=\"wheel$.next($event)\"\n    [size]=\"size()\"\n    [class]=\"inputClasses()\"\n    autocomplete=\"off\"\n    role=\"spinbutton\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-invalid]=\"invalidInput() || null\"\n    [attr.aria-readonly]=\"readonly()\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-valuenow]=\"value()\"\n    [attr.aria-valuemin]=\"minValue()\"\n    [attr.aria-valuemax]=\"maxValue()\"\n    [attr.aria-valuetext]=\"formattedValue()\"\n    [attr.data-spinners]=\"spinners()\"\n    #valueTextBox />\n@if (spinners()) {\n    <div [class]=\"spinButtonClasses()\">\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('+')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Increase value\">\n            <svg lucideChevronUp [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n        <button\n            monaButton\n            [disabled]=\"disabled()\"\n            [tabindex]=\"-1\"\n            look=\"secondary\"\n            [size]=\"size()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (pointerdown)=\"spin$.next('-')\"\n            (pointerup)=\"spinStop$.next()\"\n            (pointerleave)=\"spinStop$.next()\"\n            aria-label=\"Decrease value\">\n            <svg lucideChevronDown [size]=\"spinButtonIconSize()\"></svg>\n        </button>\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { prefixTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NumericTextBoxPrefixTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], valueTextBoxRef: [{ type: i0.ViewChild, args: ["valueTextBox", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], decimals: [{ type: i0.Input, args: [{ isSignal: true, alias: "decimals", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputFocusOut: [{ type: i0.Output, args: ["inputFocusOut"] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], nullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullable", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], spinners: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinners", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", 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"] }] } });

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

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

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

@@ -4,14 +4,14 @@ import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const placeholderBaseVariants = cva(`
-        flex items-center justify-center
-        w-full h-full
-        p-2
+const placeholderBaseVariants = cva(`
+        flex items-center justify-center
+        w-full h-full
+        p-2
     `);
-const placeholderTextVariants = cva(`
-        text-muted-foreground
-        uppercase
+const placeholderTextVariants = cva(`
+        text-muted-foreground
+        uppercase
     `);
 
 const placeholderBaseThemeVariants = (theme) => {
@@ -62,13 +62,13 @@ class PlaceholderComponent {
     }
     #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PlaceholderComponent, isStandalone: true, selector: "mona-placeholder", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "@if (text()) {\n    <span [class]=\"textClass()\">{{ text() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlaceholderComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-placeholder", host: {
                         "[class]": "baseClass()"
-                    }, template: "@if (text()) {\r\n    <span [class]=\"textClass()\">{{ text() }}</span>\r\n} @else {\r\n    <ng-content></ng-content>\r\n}\r\n" }]
+                    }, template: "@if (text()) {\n    <span [class]=\"textClass()\">{{ text() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n" }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*