codexly-ui 0.23.1 → 0.24.0

package/fesm2022/codexly-ui.mjs

@@ -17436,12 +17436,16 @@ class ClxProductTagService {
     badgesFor(ctx) {
         const styles = this._styles() ?? [];
         const manual = new Set(ctx.tags);
+        const hidden = new Set(ctx.hiddenSystemTags ?? []);
         const units = ctx.stockQuantity;
         const low = styles.find(s => s.kind === 'LOW_STOCK');
-        // "Últimas unidades" replaces "N en stock" — both would say the same.
-        const isLow = !!low && ctx.inStock && units != null && units > 0 && units <= (low.stockThreshold ?? 0);
+        const threshold = ctx.lowStockThreshold ?? low?.stockThreshold ?? 0;
+        // "Últimas unidades" replaces "N en stock" — both would say the same (unless it's hidden here).
+        const isLow = !!low && !hidden.has('LOW_STOCK') && ctx.inStock && units != null && units > 0 && units <= threshold;
         const out = [];
         for (const s of styles) {
+            if (s.kind !== 'MANUAL' && hidden.has(s.kind))
+                continue;
             let n = null;
             switch (s.kind) {
                 case 'MANUAL':
@@ -17595,6 +17599,7 @@ class ClxProductComponent {
         return p
             ? this._tagSvc.badgesFor({
                 tags: p.tags ?? [], inStock: p.in_stock, stockQuantity: p.stock_quantity, discountPercent: this._discountPct(),
+                hiddenSystemTags: p.hidden_system_tags, lowStockThreshold: p.low_stock_threshold,
             })
             : [];
     }, ...(ngDevMode ? [{ debugName: "_badges" }] : /* istanbul ignore next */ []));
@@ -18195,18 +18200,21 @@ class ClxProductDetailComponent {
         }
         return 0;
     }, ...(ngDevMode ? [{ debugName: "discount" }] : /* istanbul ignore next */ []));
-    /** The host's configured tags (ClxProductTagService) for the selected variation, over the gallery. */
+    /** The host's configured tags (ClxProductTagService) for the selected variation, over the gallery —
+     *  the variation's own tags and settings when the host sends them, else the product's. */
     _badges = computed(() => {
         const p = this.product();
         const v = this.activeVariation();
         if (!p || !v)
             return [];
         return this._tagSvc.badgesFor({
-            tags: p.tags ?? [],
+            tags: v.tags ?? p.tags ?? [],
             inStock: v.in_stock,
             stockQuantity: v.stock_quantity,
             showStockCount: true,
             discountPercent: p.has_discount ? this.discount() : 0,
+            hiddenSystemTags: v.hidden_system_tags ?? p.hidden_system_tags,
+            lowStockThreshold: v.low_stock_threshold !== undefined ? v.low_stock_threshold : p.low_stock_threshold,
         });
     }, ...(ngDevMode ? [{ debugName: "_badges" }] : /* istanbul ignore next */ []));
     /** An option is available if some in-stock variation matches it together with the rest of the
@@ -18972,6 +18980,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 +19104,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 +19248,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 +19408,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 +19552,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>