codexly-ui 0.23.1 → 0.23.2

package/fesm2022/codexly-ui.mjs

@@ -18972,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();
@@ -19090,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 -->
@@ -19223,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>
 
@@ -19371,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 -->
@@ -19504,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>