@nanahoshi/mona-ui 0.15.2 → 0.15.3

package/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -146,6 +146,7 @@ class ListService {
             enabled: false,
             firstLast: false,
             showInfo: true,
+            pageSize: 10,
             pageSizeValues: true,
             previousNext: false,
             type: "numeric",

package/fesm2022/nanahoshi-mona-ui-list-view.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, effect, untracked, afterRenderEffect, Optional, SkipSelf, Component, afterNextRender } from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, effect, untracked, afterRenderEffect, Optional, SkipSelf, Component, model, afterNextRender } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ListService, ListComponent, ListHeaderTemplateDirective, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { PagerComponent } from '@nanahoshi/mona-ui/pager';
@@ -390,35 +390,54 @@ class ListViewPageableDirective {
             firstLast: false,
             type: "numeric",
             previousNext: true,
+            pageSize: 10,
             pageSizeValues: [5, 10, 20, 25, 50, 100],
             visiblePages: 5
         };
         this.#listService = inject(ListService);
         this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewPageable" });
+        /**
+         * @description The current page. Supports two-way binding via `[(page)]`; updates when the user navigates the pager and can be set to navigate programmatically.
+         * @default 1
+         */
+        this.page = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
         effect(() => {
             const options = this.options();
             untracked(() => {
-                if (options === "") {
-                    this.#listService.setPageableOptions(this.#defaultOptions);
+                const mergedOptions = options === "" ? this.#defaultOptions : { ...this.#defaultOptions, ...options };
+                this.#listService.setPageableOptions(mergedOptions);
+                this.#listService.pageState.update(s => ({ ...s, take: mergedOptions.pageSize }));
+            });
+        });
+        effect(() => {
+            const page = this.page();
+            untracked(() => {
+                const pageState = this.#listService.pageState();
+                if (pageState.page === page) {
+                    return;
                 }
-                else {
-                    this.#listService.setPageableOptions({
-                        ...this.#defaultOptions,
-                        ...options
-                    });
+                this.#listService.pageState.set({ page, skip: (page - 1) * pageState.take, take: pageState.take });
+            });
+        });
+        effect(() => {
+            const pageState = this.#listService.pageState();
+            untracked(() => {
+                if (this.page() !== pageState.page) {
+                    this.page.set(pageState.page);
                 }
             });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewPageableDirective, isStandalone: true, selector: "mona-list-view[monaListViewPageable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewPageable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewPageableDirective, isStandalone: true, selector: "mona-list-view[monaListViewPageable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewPageable", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "mona-list-view[monaListViewPageable]"
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewPageable", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewPageable", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
 class ListViewSelectableDirective {
     #defaultOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-internal-list.d.ts

@@ -70,6 +70,7 @@ type NavigationDirection = "next" | "previous" | "first" | "last" | "pageup" | "
 interface PagerSettings {
     enabled: boolean;
     firstLast: boolean;
+    pageSize: number;
     pageSizeValues: number[] | boolean;
     previousNext: boolean;
     showInfo: boolean;

package/types/nanahoshi-mona-ui-list-view.d.ts

@@ -159,10 +159,15 @@ declare class ListViewNoDataTemplateDirective {
 
 declare class ListViewPageableDirective {
     #private;
-    options: _angular_core.InputSignal<"" | Partial<PagerSettings>>;
+    readonly options: _angular_core.InputSignal<"" | Partial<PagerSettings>>;
+    /**
+     * @description The current page. Supports two-way binding via `[(page)]`; updates when the user navigates the pager and can be set to navigate programmatically.
+     * @default 1
+     */
+    readonly page: _angular_core.ModelSignal<number>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListViewPageableDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListViewPageableDirective, "mona-list-view[monaListViewPageable]", never, { "options": { "alias": "monaListViewPageable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ListViewPageableDirective, "mona-list-view[monaListViewPageable]", never, { "options": { "alias": "monaListViewPageable"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; }, { "page": "pageChange"; }, never, never, true, never>;
 }
 
 declare class ListViewSelectableDirective<T, K = unknown> {