codexly-ui 0.10.23 → 0.10.25

package/fesm2022/codexly-ui.mjs

@@ -3854,7 +3854,10 @@ class ClxSelectComponent {
     _disabled = computed(() => this._cvaDisabled() || this.disabled() || !!this._cardDisabled?.(), ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
     _sizeConfig = computed(() => SELECT_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
     _hasValue = computed(() => this._selectedVals().length > 0, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
-    _isInvalid = computed(() => this._wasTouched() && (this._ngControl?.control?.invalid ?? false), ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
+    _isInvalid = computed(() => {
+        this._selectedVals(); // re-evaluate control.invalid (imperatively updated by Angular Forms) on each selection change
+        return this._wasTouched() && (this._ngControl?.control?.invalid ?? false);
+    }, ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
     _selectedOptions = computed(() => {
         const vals = this._selectedVals();
         return (this.options() ?? []).filter(o => vals.includes(o.value));
@@ -14112,6 +14115,10 @@ class ClxProductComponent {
     imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : /* istanbul ignore next */ []));
     addToCart = output();
     addToWishlist = output();
+    /** Emitted instead of addToCart when option_count > 1 — the card can't identify a single
+     *  purchasable combination, so the host should route to the product page instead of adding
+     *  directly (see ClxProduct.option_count). */
+    viewOptions = output();
     PRODUCT_TAG_LABEL = PRODUCT_TAG_LABEL;
     PRODUCT_TAG_COLOR = PRODUCT_TAG_COLOR;
     PRODUCT_TAG_VARIANT = PRODUCT_TAG_VARIANT;
@@ -14119,6 +14126,7 @@ class ClxProductComponent {
     _sm = computed(() => this.size() === 'sm', ...(ngDevMode ? [{ debugName: "_sm" }] : /* istanbul ignore next */ []));
     _tags = computed(() => (this.product()?.tags ?? []), ...(ngDevMode ? [{ debugName: "_tags" }] : /* istanbul ignore next */ []));
     _disabled = computed(() => !this.product()?.in_stock, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _hasMultipleOptions = computed(() => (this.product()?.option_count ?? 1) > 1, ...(ngDevMode ? [{ debugName: "_hasMultipleOptions" }] : /* istanbul ignore next */ []));
     _price = computed(() => this.product()?.sale_price ?? this.product()?.product_sale_price ?? 0, ...(ngDevMode ? [{ debugName: "_price" }] : /* istanbul ignore next */ []));
     _buttonSize = computed(() => this._sm() ? 'sm' : 'md', ...(ngDevMode ? [{ debugName: "_buttonSize" }] : /* istanbul ignore next */ []));
     _skeletonW = computed(() => this._sm() ? 'sm:w-32' : 'sm:w-44', ...(ngDevMode ? [{ debugName: "_skeletonW" }] : /* istanbul ignore next */ []));
@@ -14157,7 +14165,7 @@ class ClxProductComponent {
         return `${sz} font-bold ${color}`;
     }, ...(ngDevMode ? [{ debugName: "_priceClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist", viewOptions: "viewOptions" }, ngImport: i0, template: `
     @if (loading()) {
       @if (_h()) {
         <!-- Skeleton Horizontal -->
@@ -14272,13 +14280,13 @@ class ClxProductComponent {
               [color]="clxColor()"
               variant="ghost"
               [size]="_buttonSize()"
-              icon="shopping_cart"
+              [icon]="_hasMultipleOptions() ? 'tune' : 'shopping_cart'"
               iconPosition="left"
               [disabled]="_disabled()"
               [block]="true"
-              (click)="addToCart.emit(product()!)"
+              (click)="_hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
             >
-              Añadir al carrito
+              {{ _hasMultipleOptions() ? 'Ver opciones' : 'Añadir al carrito' }}
             </button>
           </div>
         </div>
@@ -14407,13 +14415,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               [color]="clxColor()"
               variant="ghost"
               [size]="_buttonSize()"
-              icon="shopping_cart"
+              [icon]="_hasMultipleOptions() ? 'tune' : 'shopping_cart'"
               iconPosition="left"
               [disabled]="_disabled()"
               [block]="true"
-              (click)="addToCart.emit(product()!)"
+              (click)="_hasMultipleOptions() ? viewOptions.emit(product()!) : addToCart.emit(product()!)"
             >
-              Añadir al carrito
+              {{ _hasMultipleOptions() ? 'Ver opciones' : 'Añadir al carrito' }}
             </button>
           </div>
         </div>
@@ -14423,10 +14431,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }] } });
+        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }], viewOptions: [{ type: i0.Output, args: ["viewOptions"] }] } });
 
 class ClxProductDetailComponent {
     product = input(null, ...(ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []));
+    /** Variation id to preselect instead of variations[0] — set this when the visitor arrived from a
+     *  catalog card that already represents a specific variation (e.g. a "Color" group), so the specs
+     *  land pre-selected instead of defaulting to whichever variation happens to be first. */
+    initialVariationId = input(null, ...(ngDevMode ? [{ debugName: "initialVariationId" }] : /* istanbul ignore next */ []));
     clxColor = input('indigo', ...(ngDevMode ? [{ debugName: "clxColor" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     currency = input('COP', ...(ngDevMode ? [{ debugName: "currency" }] : /* istanbul ignore next */ []));
@@ -14446,13 +14458,17 @@ class ClxProductDetailComponent {
         { id: 'specs', label: 'Especificaciones' },
         { id: 'description', label: 'Descripción' },
     ];
-    // Cuando llega un nuevo producto, inicializa la selección con la primera variación
+    // Cuando llega un nuevo producto, inicializa la selección con la variación pedida por
+    // initialVariationId (ej. la card del catálogo de la que vino el visitante) o, si no aplica,
+    // la primera variación.
     constructor() {
         effect(() => {
             const p = this.product();
             if (!p?.variations?.length)
                 return;
-            this.selectedSpecs.set({ ...p.variations[0].specs });
+            const initialId = this.initialVariationId();
+            const initial = (initialId && p.variations.find(v => v.id === initialId)) || p.variations[0];
+            this.selectedSpecs.set({ ...initial.specs });
         });
     }
     // Variación activa: la que coincide exactamente con la selección actual
@@ -14517,7 +14533,7 @@ class ClxProductDetailComponent {
     specsLeft(specs) { return specs.slice(0, Math.ceil(specs.length / 2)); }
     specsRight(specs) { return specs.slice(Math.ceil(specs.length / 2)); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", buyNow: "buyNow", wishlist: "wishlist" }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'rose'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button\n                        type=\"button\"\n                        class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0\"\n                        [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                        [style.background-color]=\"opt.value\"\n                        [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                        [style.cursor]=\"isOptionAvailable(specType.id, opt.id) ? 'pointer' : 'not-allowed'\"\n                        [style.opacity]=\"isOptionAvailable(specType.id, opt.id) ? null : '0.35'\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.label ?? opt.value\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        type=\"button\"\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.label ?? opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Buy Now</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductDetailComponent, isStandalone: true, selector: "clx-product-detail", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, initialVariationId: { classPropertyName: "initialVariationId", publicName: "initialVariationId", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", buyNow: "buyNow", wishlist: "wishlist" }, viewQueries: [{ propertyName: "_carousel", first: true, predicate: ClxCarouselComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'rose'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button\n                        type=\"button\"\n                        class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0\"\n                        [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                        [style.background-color]=\"opt.value\"\n                        [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                        [style.cursor]=\"isOptionAvailable(specType.id, opt.id) ? 'pointer' : 'not-allowed'\"\n                        [style.opacity]=\"isOptionAvailable(specType.id, opt.id) ? null : '0.35'\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.label ?? opt.value\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        type=\"button\"\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.label ?? opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Buy Now</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxButtonGroupComponent, selector: "clx-button-group", inputs: ["label", "shape", "attached", "orientation"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxSkeletonComponent, selector: "clx-skeleton", inputs: ["variant", "size", "width", "height"] }, { kind: "component", type: ClxRatingComponent, selector: "clx-rating", inputs: ["value", "max", "color"] }, { kind: "component", type: ClxCarouselComponent, selector: "clx-carousel", inputs: ["clxColor", "autoPlay", "interval", "loop", "aspectRatio", "transparent"] }, { kind: "directive", type: ClxCarouselDirective, selector: "[clxSlide]" }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }, { kind: "directive", type: ClxTabDirective, selector: "[clxTabPanel]", inputs: ["clxTabPanel"] }, { kind: "component", type: ClxNumberComponent, selector: "clx-number", inputs: ["variant", "size", "color", "label", "placeholder", "hint", "prefixIcon", "min", "max", "step", "value", "disabled"] }, { kind: "directive", type: ClxTooltipDirective, selector: "[clxTooltip]", inputs: ["clxTooltip", "clxTooltipPosition", "clxTooltipColor", "clxTooltipSize", "clxTooltipDelay"] }, { kind: "component", type: ClxListComponent, selector: "clx-list", inputs: ["color", "variant", "size", "numbered"] }, { kind: "component", type: ClxListItemComponent, selector: "clx-list-item", inputs: ["label", "sublabel", "icon", "meta", "metaColor", "disabled"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductDetailComponent, decorators: [{
             type: Component,
@@ -14540,7 +14556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ClxListComponent,
                         ClxListItemComponent,
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2550\u2550 SKELETON \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (loading()) {\n  <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 p-6\">\n    <div class=\"space-y-3\">\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"420px\" class=\"rounded-2xl\"></clx-skeleton>\n      <div class=\"flex gap-2\">\n        @for (t of [1,2,3,4]; track t) {\n          <clx-skeleton variant=\"rectangular\" width=\"80px\" height=\"80px\" class=\"rounded-xl\"></clx-skeleton>\n        }\n      </div>\n    </div>\n    <div class=\"space-y-4 pt-2\">\n      <clx-skeleton variant=\"text\" size=\"lg\" width=\"70%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"sm\" width=\"40%\"></clx-skeleton>\n      <clx-skeleton variant=\"text\" size=\"xl\" width=\"50%\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"100px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n      <clx-skeleton variant=\"rectangular\" width=\"100%\" height=\"52px\" class=\"rounded-xl\"></clx-skeleton>\n    </div>\n  </div>\n}\n\n<!-- \u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n@if (!loading() && product(); as p) {\n  @let v = activeVariation();\n  <div class=\"space-y-8\">\n\n    <div class=\"grid grid-cols-1 xl:grid-cols-2 gap-8 xl:items-start\">\n\n      <!-- \u2500\u2500 Column 1: Image Gallery \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-3\">\n        <div class=\"relative\">\n          <clx-carousel [clxColor]=\"clxColor()\" aspectRatio=\"4/3\" [loop]=\"true\">\n            @for (img of v?.images ?? []; track img) {\n              <ng-template clxSlide>\n                <img [src]=\"img\" [alt]=\"p.product_name\" class=\"w-full h-full object-cover\" loading=\"lazy\" />\n              </ng-template>\n            }\n          </clx-carousel>\n          <div class=\"absolute top-3 right-3 z-10\">\n            <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\"\n                    (click)=\"wishlist.emit()\">\n              <span clx-icon name=\"favorite_border\" size=\"sm\"></span>\n            </button>\n          </div>\n        </div>\n        <div class=\"flex flex-wrap gap-2\">\n          @for (img of v?.images ?? []; track img; let i = $index) {\n            <img [src]=\"img\" [alt]=\"p.product_name\"\n                 class=\"w-20 h-20 rounded-xl object-cover border-[3px] cursor-pointer shrink-0 transition-[border-color,opacity]\"\n                 [class]=\"_carousel()?.currentPageIndex() === i\n                   ? 'border-' + clxColor() + '-500 opacity-100'\n                   : 'border-transparent opacity-60 hover:opacity-90'\"\n                 loading=\"lazy\"\n                 (click)=\"_carousel()?.goTo(i)\" />\n          }\n        </div>\n      </div>\n\n      <!-- \u2500\u2500 Column 2: Purchase Info \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div class=\"space-y-5\">\n\n        <!-- Stock status -->\n        @if (v) {\n          <span clx-badge [variant]=\"v.in_stock ? 'light' : 'solid'\" [color]=\"v.in_stock ? clxColor() : 'rose'\" size=\"sm\" shape=\"pill\">\n            @if (v.in_stock) {\n              @if (v.stock_quantity != null) {\n                {{ v.stock_quantity }} en stock\n              } @else {\n                En stock\n              }\n            } @else {\n              Sin stock\n            }\n          </span>\n        }\n\n        <!-- Tags (st_products.tags) -->\n        <div class=\"flex flex-wrap gap-2\">\n          @for (tag of p.tags; track tag) {\n            <span clx-badge variant=\"light\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">{{ tag }}</span>\n          }\n        </div>\n\n        <!-- Title -->\n        <div>\n          <p class=\"text-xs text-clx-text-subtle uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-clx-text-label leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (p.product_detail) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ p.product_detail }}</p>\n          }\n          @if (v?.description) {\n            <p class=\"text-clx-text-muted text-sm mt-1\">{{ v!.description }}</p>\n          }\n        </div>\n\n        <!-- Rating -->\n        <div class=\"flex items-center gap-2\">\n          <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n          <span class=\"text-sm font-semibold text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-clx-text-subtle\">({{ p.review_count }} reviews)</span>\n        </div>\n\n        <!-- Price block -->\n        <div class=\"py-4\">\n          <div class=\"flex items-baseline gap-3\">\n            <span class=\"text-4xl font-black text-clx-text-label\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-clx-text-subtle line-through\">\n                {{ p.discount_price | currency:currency():'symbol':'1.0-0' }}\n              </span>\n              <span clx-badge variant=\"solid\" [color]=\"clxColor()\" size=\"sm\" shape=\"pill\">\n                -{{ discount() }}%\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Selectores de variaci\u00F3n (st_spec_types + st_spec_options) -->\n        @for (specType of p.spec_types; track specType.id) {\n          @if (specType.input_type === 'color') {\n            <clx-button-group [label]=\"specType.name\" shape=\"circular\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button\n                        type=\"button\"\n                        class=\"w-7 h-7 rounded-full border-2 transition-[transform,box-shadow] shrink-0\"\n                        [class]=\"isSpecSelected(specType.id, opt.id) ? 'scale-110 shadow-md' : 'opacity-90 hover:opacity-100'\"\n                        [style.background-color]=\"opt.value\"\n                        [style.border-color]=\"isSpecSelected(specType.id, opt.id) ? 'var(--clx-text-label, #111)' : 'transparent'\"\n                        [style.cursor]=\"isOptionAvailable(specType.id, opt.id) ? 'pointer' : 'not-allowed'\"\n                        [style.opacity]=\"isOptionAvailable(specType.id, opt.id) ? null : '0.35'\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.label ?? opt.value\"\n                        clxTooltipPosition=\"top\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                </button>\n              }\n            </clx-button-group>\n          } @else {\n            <clx-button-group [label]=\"specType.name\" shape=\"flat\" [attached]=\"false\">\n              @for (opt of specType.options; track opt.id) {\n                <button clx-button\n                        type=\"button\"\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"clxColor()\" size=\"sm\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        (click)=\"selectSpec(specType.id, opt.id)\">\n                  {{ opt.label ?? opt.value }}\n                </button>\n              }\n            </clx-button-group>\n          }\n        }\n\n        <!-- Quantity -->\n        <clx-number label=\"Quantity:\" variant=\"stepper\" [color]=\"clxColor()\"\n            [min]=\"1\" [max]=\"99\" [ngModel]=\"quantity()\" (ngModelChange)=\"quantity.set($event)\">\n        </clx-number>\n\n        <!-- CTA -->\n        <div class=\"flex gap-3\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitBuyNow()\">Buy Now</button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\" (click)=\"_emitAddToCart()\">Add to Cart</button>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <clx-tabs [tabs]=\"tabItems\" [clxColor]=\"clxColor()\" [(activeTab)]=\"activeTab\">\n\n      <!-- Tab: Caracter\u00EDsticas generales (st_product_specs \u2014 ficha t\u00E9cnica global) -->\n      <ng-template [clxTabPanel]=\"'general'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsLeft(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (spec of specsRight(p.product_specs); track spec.id) {\n              <clx-list-item [icon]=\"spec.icon ?? ''\">\n                <div clxContent>\n                  <p class=\"text-sm font-medium text-clx-text-label\">{{ spec.name }}:</p>\n                  <p class=\"text-sm text-clx-text-muted mt-0.5\">{{ spec.value }}</p>\n                </div>\n              </clx-list-item>\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Especificaciones (st_spec_types \u2014 specs de la variaci\u00F3n activa) -->\n      <ng-template [clxTabPanel]=\"'specs'\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-x-8\">\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsLeft(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n          <clx-list [color]=\"clxColor()\" variant=\"flush\" size=\"sm\">\n            @for (st of specsRight(p.spec_types); track st.id) {\n              <clx-list-item [label]=\"st.name + ':'\" [sublabel]=\"selectedOptionLabel(st)\" [icon]=\"st.icon ?? ''\" />\n            }\n          </clx-list>\n        </div>\n      </ng-template>\n\n      <!-- Tab: Descripci\u00F3n (st_product_descriptions) -->\n      <ng-template [clxTabPanel]=\"'description'\">\n        <div class=\"space-y-5\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-clx-text-label mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-clx-text-muted leading-relaxed\">{{ block.body }}</p>\n            </div>\n          }\n        </div>\n      </ng-template>\n\n    </clx-tabs>\n\n    <!-- \u2500\u2500 Reviews \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"grid grid-cols-1 xl:grid-cols-3 gap-8 border-t border-clx-border pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-clx-text-label\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-clx-text-label\">{{ p.rating | number:'1.1-1' }}</span>\n          <div class=\"pb-1 space-y-1\">\n            <clx-rating [value]=\"p.rating\" [color]=\"clxColor()\"></clx-rating>\n            <p class=\"text-xs text-clx-text-muted\">{{ p.review_count }} verified ratings</p>\n          </div>\n        </div>\n        <p class=\"text-sm font-semibold\" [class]=\"'text-' + clxColor() + '-600'\">Very Good</p>\n        <div class=\"pt-2 space-y-2\">\n          <button clx-button type=\"button\" variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-button type=\"button\" variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"flag\">\n            Report abuse\n          </button>\n        </div>\n      </div>\n\n      <div class=\"lg:col-span-2 space-y-4\">\n        @for (review of p.reviews ?? []; track review.id) {\n          <div class=\"rounded-2xl overflow-hidden shadow-sm\">\n            <div class=\"flex items-center gap-3 px-4 py-3\">\n              <div class=\"w-10 h-10 rounded-full bg-clx-surface-2 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-clx-text-muted\">\n                  {{ review.author_name.substring(0,1) }}{{ review.author_name.split(' ')[1]?.substring(0,1) ?? '' }}\n                </span>\n              </div>\n              <div class=\"flex-1 min-w-0\">\n                <p class=\"font-semibold text-sm text-clx-text-label truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-clx-text-subtle\">{{ review.created_at }}</p>\n              </div>\n              @if (review.is_verified) {\n                <span clx-badge variant=\"light\" color=\"emerald\" size=\"sm\" shape=\"pill\">Verified</span>\n              }\n            </div>\n            <div class=\"px-4 pb-4 space-y-2\">\n              <div class=\"flex items-center gap-2\">\n                <clx-rating [value]=\"review.rating\" [color]=\"clxColor()\"></clx-rating>\n                @if (review.title) {\n                  <span class=\"text-sm font-semibold text-clx-text-label\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-clx-text-muted\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-clx-text-subtle\">Helpful?</span>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-button type=\"button\" variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_down\">{{ review.not_helpful }}</button>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n\n    </div>\n\n  </div>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], buyNow: [{ type: i0.Output, args: ["buyNow"] }], wishlist: [{ type: i0.Output, args: ["wishlist"] }], _carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClxCarouselComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], initialVariationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialVariationId", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], buyNow: [{ type: i0.Output, args: ["buyNow"] }], wishlist: [{ type: i0.Output, args: ["wishlist"] }], _carousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ClxCarouselComponent), { isSignal: true }] }] } });
 
 const WISHLIST_PAGE_SIZE_DEFAULT = 6;
 const WISHLIST_SORT_OPTIONS = [