codexly-ui 0.23.0 → 0.23.2

package/fesm2022/codexly-ui.mjs

@@ -14075,11 +14075,6 @@ 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(() => {
@@ -14088,31 +14083,14 @@ 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". Debe emitir pageChange/sizeChange igual que la
-        // selección manual — si no, el consumidor (ej. clx-table → su padre real) nunca se entera
-        // del nuevo tamaño y sigue pidiendo datos al backend con el size viejo.
-        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);
-                this.currentPage.set(1);
-                this.sizeChange.emit({ pageSize: smallest });
-                this.pageChange.emit({ page: 1, pageSize: smallest });
-            }
-        });
+        // El pageSize solo cambia cuando el usuario lo elige: nunca se ajusta solo según totalItems.
+        // Antes se reducía a la opción más pequeña cuando había menos registros que el pageSize, lo
+        // que mostraba 5 por página donde cabían todos y obligaba al consumidor a pedir los datos de nuevo.
         // 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 });
@@ -18994,6 +18972,12 @@ class ClxCartComponent {
             : c.value;
     }, ...(ngDevMode ? [{ debugName: "_couponDiscount" }] : /* istanbul ignore next */ []));
     _total = computed(() => Math.max(0, this._subtotal() - this._couponDiscount()), ...(ngDevMode ? [{ debugName: "_total" }] : /* istanbul ignore next */ []));
+    _exceedsStock(item) {
+        return item.in_stock && item.max_quantity != null && item.quantity > item.max_quantity;
+    }
+    /** Lines that can't be bought as they are — out of stock, or more units than are left. While any
+     *  exists the checkout button stays disabled. */
+    _blockedItems = computed(() => this.items().filter(i => !i.in_stock || this._exceedsStock(i)), ...(ngDevMode ? [{ debugName: "_blockedItems" }] : /* istanbul ignore next */ []));
     _totalUnits = computed(() => this.items().reduce((s, i) => s + i.quantity, 0), ...(ngDevMode ? [{ debugName: "_totalUnits" }] : /* istanbul ignore next */ []));
     applyCoupon() {
         const code = this._couponCode.trim();
@@ -19112,6 +19096,17 @@ class ClxCartComponent {
                   <p class="text-sm text-clx-text-subtle truncate">{{ item.trademark }}</p>
                   <h3 class="text-sm font-semibold text-clx-text-label leading-snug line-clamp-2">{{ item.name }}</h3>
                   <p class="text-sm font-mono text-clx-text-subtle mt-0.5">{{ item.sku }}</p>
+                  @if (!item.in_stock) {
+                    <p class="flex items-center gap-1 text-xs font-medium text-red-600 mt-1">
+                      <span clx-icon name="block" size="xs"></span>
+                      Agotado — quítalo para continuar con tu compra
+                    </p>
+                  } @else if (_exceedsStock(item)) {
+                    <p class="flex items-center gap-1 text-xs font-medium text-amber-600 mt-1">
+                      <span clx-icon name="warning" size="xs"></span>
+                      Solo {{ item.max_quantity === 1 ? 'queda 1 disponible' : 'quedan ' + item.max_quantity + ' disponibles' }} — ajusta la cantidad
+                    </p>
+                  }
                 </div>
 
                 <!-- Price + Quantity row -->
@@ -19245,11 +19240,23 @@ class ClxCartComponent {
               </div>
             </dl>
 
+            <!-- Stock problems block the checkout: the order would be rejected anyway -->
+            @if (_blockedItems().length) {
+              <div class="flex items-start gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs text-amber-800">
+                <span clx-icon name="warning" size="sm" class="shrink-0 mt-px"></span>
+                <span>
+                  {{ _blockedItems().length === 1 ? 'Un producto de tu carrito no está disponible' : _blockedItems().length + ' productos de tu carrito no están disponibles' }}
+                  en la cantidad elegida. Quítalo o ajusta la cantidad para continuar.
+                </span>
+              </div>
+            }
+
             <!-- Checkout -->
             <button
               clx-button type="button" [color]="color()" variant="solid" size="md"
               icon="arrow_forward" iconPosition="right" [block]="true"
-              (click)="onCheckout.emit()">
+              [disabled]="_blockedItems().length > 0"
+              (click)="_blockedItems().length === 0 && onCheckout.emit()">
               Proceder al pago
             </button>
 
@@ -19393,6 +19400,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   <p class="text-sm text-clx-text-subtle truncate">{{ item.trademark }}</p>
                   <h3 class="text-sm font-semibold text-clx-text-label leading-snug line-clamp-2">{{ item.name }}</h3>
                   <p class="text-sm font-mono text-clx-text-subtle mt-0.5">{{ item.sku }}</p>
+                  @if (!item.in_stock) {
+                    <p class="flex items-center gap-1 text-xs font-medium text-red-600 mt-1">
+                      <span clx-icon name="block" size="xs"></span>
+                      Agotado — quítalo para continuar con tu compra
+                    </p>
+                  } @else if (_exceedsStock(item)) {
+                    <p class="flex items-center gap-1 text-xs font-medium text-amber-600 mt-1">
+                      <span clx-icon name="warning" size="xs"></span>
+                      Solo {{ item.max_quantity === 1 ? 'queda 1 disponible' : 'quedan ' + item.max_quantity + ' disponibles' }} — ajusta la cantidad
+                    </p>
+                  }
                 </div>
 
                 <!-- Price + Quantity row -->
@@ -19526,11 +19544,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               </div>
             </dl>
 
+            <!-- Stock problems block the checkout: the order would be rejected anyway -->
+            @if (_blockedItems().length) {
+              <div class="flex items-start gap-2 rounded-xl border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs text-amber-800">
+                <span clx-icon name="warning" size="sm" class="shrink-0 mt-px"></span>
+                <span>
+                  {{ _blockedItems().length === 1 ? 'Un producto de tu carrito no está disponible' : _blockedItems().length + ' productos de tu carrito no están disponibles' }}
+                  en la cantidad elegida. Quítalo o ajusta la cantidad para continuar.
+                </span>
+              </div>
+            }
+
             <!-- Checkout -->
             <button
               clx-button type="button" [color]="color()" variant="solid" size="md"
               icon="arrow_forward" iconPosition="right" [block]="true"
-              (click)="onCheckout.emit()">
+              [disabled]="_blockedItems().length > 0"
+              (click)="_blockedItems().length === 0 && onCheckout.emit()">
               Proceder al pago
             </button>