codexly-ui 0.10.1 → 0.10.2

package/fesm2022/codexly-ui.mjs

@@ -11584,6 +11584,11 @@ class ClxPaginationComponent {
     _destroyRef = inject(DestroyRef);
     // ── FormControl interno para el select de pageSize ─────────────────────────
     _pageSizeCtrl = new FormControl(null);
+    /** True once the user has explicitly picked a pageSize from the select — after that, their
+     *  choice is respected even if a later filter shrinks totalItems below it. Until then, a
+     *  caller-provided default (e.g. 20) that exceeds a small totalItems is auto-corrected down
+     *  to the smallest available option, so the select never opens pre-selected on the largest value. */
+    _userTouchedPageSize = false;
     constructor() {
         // Sincroniza el pageSize model → FormControl cada vez que cambia desde afuera
         effect(() => {
@@ -11592,11 +11597,26 @@ class ClxPaginationComponent {
                 this._pageSizeCtrl.setValue(ps, { emitEvent: false });
             }
         });
+        // Mientras el usuario no haya elegido un pageSize a propósito, si el default provisto por el
+        // padre excede totalItems, se ajusta al más pequeño disponible en vez de quedar seleccionado
+        // como si fuera el "más grande elegido".
+        effect(() => {
+            if (this._userTouchedPageSize)
+                return;
+            const total = this.totalItems();
+            if (!total || total <= 0)
+                return;
+            const smallest = this._pageSizeOptions()[0]?.value;
+            if (smallest != null && this.pageSize() > total && smallest !== this.pageSize()) {
+                this.pageSize.set(smallest);
+            }
+        });
         // Sincroniza el FormControl → pageSize model cuando el usuario elige
         this._pageSizeCtrl.valueChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(val => {
             const newSize = Number(val);
             if (!val || !Number.isFinite(newSize) || newSize <= 0 || newSize === this.pageSize())
                 return;
+            this._userTouchedPageSize = true;
             this.pageSize.set(newSize);
             this.currentPage.set(1);
             this.sizeChange.emit({ pageSize: newSize });