codexly-ui 0.10.67 → 0.10.69

package/fesm2022/codexly-ui.mjs

@@ -14444,7 +14444,11 @@ class ClxProductDetailComponent {
     _carousel = viewChild(ClxCarouselComponent, ...(ngDevMode ? [{ debugName: "_carousel" }] : /* istanbul ignore next */ []));
     quantity = signal(1, ...(ngDevMode ? [{ debugName: "quantity" }] : /* istanbul ignore next */ []));
     activeTab = signal('general', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /** Only holds specs the visitor has explicitly clicked — starts empty, not pre-filled with the
+     *  initial variation's specs, so a spec option can be toggled off (click again to deselect)
+     *  without fighting a "fully selected" starting state that never lets go of its last value. */
     selectedSpecs = signal({}, ...(ngDevMode ? [{ debugName: "selectedSpecs" }] : /* istanbul ignore next */ []));
+    _initialVariation = signal(null, ...(ngDevMode ? [{ debugName: "_initialVariation" }] : /* istanbul ignore next */ []));
     /** Same card treatment as clx-product (bg-clx-surface + shadow-sm) — keeps the gallery/info
      *  panels visually consistent with the rest of the e-commerce card set. */
     _panelClass = 'bg-clx-surface rounded-2xl shadow-sm p-4';
@@ -14453,14 +14457,30 @@ class ClxProductDetailComponent {
         { id: 'specs', label: 'Especificaciones' },
         { id: 'description', label: 'Descripción' },
     ];
+    /** Tracks which product the spec selection was initialized for — the init effect below must run
+     *  once per actual product change, not every time initialVariationId() changes. A host app that
+     *  syncs its own ?variant= URL param from the (variationChange) output (see codexly-store's
+     *  product-detail page) feeds that id back into this same input; without this guard, every spec
+     *  click would round-trip through the host and re-trigger initialization, silently overwriting
+     *  the visitor's in-progress selection with the just-resolved variation's full spec set. */
+    _initializedForProductId = null;
     constructor() {
         effect(() => {
             const p = this.product();
             if (!p?.variations?.length)
                 return;
+            if (this._initializedForProductId === p.product_id)
+                return;
+            this._initializedForProductId = p.product_id;
             const initialId = this.initialVariationId();
             const initial = (initialId && p.variations.find(v => v.id === initialId)) || p.variations[0];
-            this.selectedSpecs.set({ ...initial.specs });
+            this._initialVariation.set(initial);
+            // Pre-select the full spec combination only when the landing variation has stock — every
+            // other combination stays reachable by changing any one spec. When it's sold out, starting
+            // fully selected would fix both Color and Talla to a combination that can never resolve to
+            // an in-stock variation, hiding every other option (see isOptionAvailable's fallback) with
+            // no selected value left to toggle off — so start empty and let the visitor pick from scratch.
+            this.selectedSpecs.set(initial.in_stock ? { ...initial.specs } : {});
         });
         effect(() => {
             const v = this.activeVariation();
@@ -14468,12 +14488,22 @@ class ClxProductDetailComponent {
                 this.variationChange.emit(v);
         });
     }
+    /** With no specs selected (fresh load, or every spec toggled back off) this is the variation
+     *  the visitor originally landed on. Otherwise, resolves the variation matching every currently
+     *  selected spec — with a partial selection (some spec types still untouched), any variation
+     *  whose specs are a superset of the selection counts as a match, since the visitor hasn't
+     *  narrowed those other spec types down to one value yet. */
     activeVariation = computed(() => {
         const p = this.product();
         if (!p?.variations?.length)
             return null;
         const sel = this.selectedSpecs();
-        return p.variations.find(v => Object.entries(v.specs).every(([typeId, optId]) => sel[typeId] === optId)) ?? p.variations[0];
+        if (Object.keys(sel).length === 0)
+            return this._initialVariation() ?? p.variations[0];
+        const matches = p.variations.filter(v => Object.entries(sel).every(([typeId, optId]) => v.specs[typeId] === optId));
+        // With a partial selection, several variations can match (e.g. only Color chosen) — prefer
+        // one with stock so the price/gallery/CTA reflect a purchasable option by default.
+        return matches.find(v => v.in_stock) ?? matches[0] ?? this._initialVariation() ?? p.variations[0];
     }, ...(ngDevMode ? [{ debugName: "activeVariation" }] : /* istanbul ignore next */ []));
     finalPrice = computed(() => {
         const v = this.activeVariation();
@@ -14512,8 +14542,19 @@ class ClxProductDetailComponent {
         }
         return variations.some(v => v.specs[specTypeId] === specOptionId && v.in_stock && matchesCrossSelection(v));
     }
+    /** Clicking an already-selected option deselects it (toggle) instead of being a no-op — the only
+     *  way to escape a narrowed-down selection and see all options again, per the "hide unavailable
+     *  options" design: there's no separate disabled state to click through, so toggling off is the
+     *  sole path back. Once every spec is toggled off, activeVariation() falls back to the variation
+     *  the visitor originally landed on (see _initialVariation). */
     selectSpec(specTypeId, specOptionId) {
-        this.selectedSpecs.update(s => ({ ...s, [specTypeId]: specOptionId }));
+        this.selectedSpecs.update(s => {
+            if (s[specTypeId] === specOptionId) {
+                const { [specTypeId]: _removed, ...rest } = s;
+                return rest;
+            }
+            return { ...s, [specTypeId]: specOptionId };
+        });
         this._carousel()?.goTo(0);
     }
     isSpecSelected(specTypeId, specOptionId) {