codexly-ui 0.0.82 → 0.0.84

package/assets/styles/_safelist.css

@@ -1,4 +1,5 @@
 /* ── Safelist: all color shades for dynamic class binding ── */
+@source inline("shadow-none shadow-sm shadow-md shadow-lg shadow-xl shadow-2xl");
 @source inline("{bg,hover:bg,ring,hover:ring,focus:ring,focus-within:ring,hover:border,border,focus:border,focus-within:border,text}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}{/10,/20,/25,/50,/75,}");
 @source inline("{bg,hover:bg,focus:ring,focus-within:ring,border,focus:border,focus-within:border,hover:border,border-t}-{white,black,transparent}");
 @source inline("border-white/30 border-t-white");

package/fesm2022/codexly-ui.mjs

@@ -2455,15 +2455,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
 const LIST_VARIANT_SHAPE = {
-    bordered: 'bg-white rounded-2xl border',
+    bordered: 'bg-white rounded-2xl overflow-hidden',
     flat: 'bg-transparent',
     flush: 'bg-transparent',
 };
-const LIST_VARIANT_HAS_BORDER = {
-    bordered: true,
-    flat: false,
-    flush: false,
-};
 const LIST_ITEM_HAS_DIVIDER = {
     bordered: true,
     flat: true,
@@ -2480,8 +2475,6 @@ class ClxListComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     variant = input('flat', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    headerIcon = input('', ...(ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []));
     numbered = input(false, ...(ngDevMode ? [{ debugName: "numbered" }] : /* istanbul ignore next */ []));
     _itemCounter = 0;
     sizeTokens = computed(() => LIST_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "sizeTokens" }] : /* istanbul ignore next */ []));
@@ -2490,50 +2483,20 @@ class ClxListComponent {
             return '';
         return `border-b ${resolveColor(this.color()).borderLight} last:border-b-0`;
     }, ...(ngDevMode ? [{ debugName: "dividerClass" }] : /* istanbul ignore next */ []));
-    _hostClass = computed(() => {
-        const shape = LIST_VARIANT_SHAPE[this.variant()];
-        const border = LIST_VARIANT_HAS_BORDER[this.variant()]
-            ? resolveColor(this.color()).borderLight
-            : '';
-        return `flex flex-col overflow-hidden ${shape} ${border}`.trim();
-    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
-    _headerClass = computed(() => {
-        const t = resolveColor(this.color());
-        return `flex items-center gap-2 px-4 py-3 border-b ${t.borderLight} text-sm font-semibold ${t.textSubtle}`;
-    }, ...(ngDevMode ? [{ debugName: "_headerClass" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => LIST_VARIANT_SHAPE[this.variant()], ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     registerItem() { return ++this._itemCounter; }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxListComponent, isStandalone: true, selector: "clx-list", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxListComponent, isStandalone: true, selector: "clx-list", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, numbered: { classPropertyName: "numbered", publicName: "numbered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
             { provide: CLX_LIST_CONTEXT, useExisting: forwardRef(() => ClxListComponent) },
-        ], ngImport: i0, template: `
-    @if (label()) {
-      <div [class]="_headerClass()">
-        @if (headerIcon()) {
-          <span clx-icon [name]="headerIcon()" size="sm"></span>
-        }
-        <span>{{ label() }}</span>
-      </div>
-    }
-    <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-list',
                     standalone: true,
-                    imports: [ClxIconComponent],
-                    template: `
-    @if (label()) {
-      <div [class]="_headerClass()">
-        @if (headerIcon()) {
-          <span clx-icon [name]="headerIcon()" size="sm"></span>
-        }
-        <span>{{ label() }}</span>
-      </div>
-    }
-    <ng-content />
-  `,
+                    imports: [],
+                    template: `<ng-content />`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -2544,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         { provide: CLX_LIST_CONTEXT, useExisting: forwardRef(() => ClxListComponent) },
                     ],
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], numbered: [{ type: i0.Input, args: [{ isSignal: true, alias: "numbered", required: false }] }] } });
 
 class ClxListItemComponent {
     _ctx = inject(CLX_LIST_CONTEXT);
@@ -2725,7 +2688,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 } }, 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 variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\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-all\"\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        <!-- 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-slate-400 uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-slate-800 leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-slate-500 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-slate-700\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-slate-400\">({{ 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-slate-800\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-slate-400 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          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\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 clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(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                        [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.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 variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">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 [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\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 [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\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 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-slate-800 mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-slate-500 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-slate-200 pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-slate-800\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-slate-800\">{{ 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-slate-500\">{{ 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 variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-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-slate-100 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-slate-600\">\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-slate-800 truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-slate-400\">{{ 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-slate-700\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-slate-500\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-slate-400\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "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", "label", "headerIcon", "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 }, 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 } }, 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 variant=\"solid\" [color]=\"clxColor()\" shape=\"circle\" size=\"md\"\n                    [iconOnly]=\"true\" clxTooltip=\"Add to Wishlist\" [clxTooltipColor]=\"clxColor()\" clxTooltipPosition=\"left\">\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-all\"\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        <!-- 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-slate-400 uppercase tracking-wide font-medium\">{{ p.trademark }}</p>\n          <h1 class=\"text-2xl font-bold text-slate-800 leading-tight mt-0.5\">{{ p.product_name }}</h1>\n          @if (v?.description) {\n            <p class=\"text-slate-500 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-slate-700\">{{ p.rating | number:'1.1-1' }}</span>\n          <span class=\"text-sm text-slate-400\">({{ 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-slate-800\">\n              {{ finalPrice() | currency:currency():'symbol':'1.0-0' }}\n            </span>\n            @if (p.has_discount && p.discount_price) {\n              <span class=\"text-lg text-slate-400 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          @if (v && !v.in_stock) {\n            <p class=\"text-sm text-rose-500 font-medium mt-1\">Out of stock</p>\n          }\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 clx-button\n                        [variant]=\"isSpecSelected(specType.id, opt.id) ? 'solid' : 'outline'\"\n                        [color]=\"asColor(opt.value)\"\n                        shape=\"circle\" size=\"xs\" [iconOnly]=\"true\"\n                        [disabled]=\"!isOptionAvailable(specType.id, opt.id)\"\n                        [clxTooltip]=\"opt.value\"\n                        [clxTooltipColor]=\"asColor(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                        [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.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 variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"bolt\"\n                  [disabled]=\"!v?.in_stock\">Buy Now</button>\n          <button clx-button variant=\"light\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"shopping_cart\"\n                  [disabled]=\"!v?.in_stock\">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 [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\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 [label]=\"spec.name + ':'\" [sublabel]=\"spec.value\" [icon]=\"spec.icon ?? ''\" />\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 max-w-3xl\">\n          @for (block of p.descriptions; track block.id) {\n            <div>\n              @if (block.title) {\n                <h3 class=\"text-base font-semibold text-slate-800 mb-1\">{{ block.title }}</h3>\n              }\n              <p class=\"text-sm text-slate-500 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-slate-200 pt-8\">\n\n      <div class=\"space-y-3\">\n        <h2 class=\"text-base font-bold text-slate-800\">Customer Reviews</h2>\n        <div class=\"flex items-end gap-3\">\n          <span class=\"text-5xl font-black text-slate-800\">{{ 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-slate-500\">{{ 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 variant=\"solid\" [color]=\"clxColor()\" size=\"md\" [block]=\"true\" icon=\"rate_review\">\n            Leave Us a Review\n          </button>\n          <button clx-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-slate-100 flex items-center justify-center shrink-0\">\n                <span class=\"text-sm font-bold text-slate-600\">\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-slate-800 truncate\">{{ review.author_name }}</p>\n                <p class=\"text-xs text-slate-400\">{{ 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-slate-700\">{{ review.title }}</span>\n                }\n              </div>\n              @if (review.body) {\n                <p class=\"text-sm text-slate-500\">{{ review.body }}</p>\n              }\n              <div class=\"flex items-center gap-3 pt-1\">\n                <span class=\"text-xs text-slate-400\">Helpful?</span>\n                <button clx-button variant=\"ghost\" color=\"slate\" size=\"xs\" icon=\"thumb_up\">{{ review.helpful }}</button>\n                <button clx-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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "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,
@@ -6316,6 +6279,14 @@ const CARD_PADDING_MAP = {
     md: 'p-5',
     lg: 'p-7',
 };
+const CARD_SHADOW_MAP = {
+    none: 'shadow-none',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    '2xl': 'shadow-2xl',
+};
 
 class ClxCardHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6348,6 +6319,7 @@ class ClxCardComponent {
     variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _bodySlot = contentChild(ClxCardBodyDirective, ...(ngDevMode ? [{ debugName: "_bodySlot" }] : /* istanbul ignore next */ []));
@@ -6362,21 +6334,25 @@ class ClxCardComponent {
     _hostClass = computed(() => {
         const variant = this.variant();
         const t = resolveColor(this.color());
+        const shadowInput = this.shadow();
         const hover = this.hover() ? `transition-shadow duration-200 hover:shadow-lg cursor-pointer` : '';
         let variantClass;
         if (variant === 'elevated') {
-            variantClass = `bg-white shadow-md border ${t.borderLight}`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : 'shadow-md';
+            variantClass = `bg-white ${shadowClass} border ${t.borderLight}`;
         }
         else if (variant === 'outlined') {
-            variantClass = `bg-white border ${t.border}`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
+            variantClass = `bg-white border ${t.border} ${shadowClass}`;
         }
         else {
-            variantClass = `bg-slate-50 border border-transparent`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
+            variantClass = `bg-slate-50 border border-transparent ${shadowClass}`;
         }
         return `flex flex-col rounded-xl overflow-hidden w-full ${variantClass} ${hover}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-5 py-4 border-b border-slate-100">
         <ng-content select="[clxCardHeader]" />
@@ -6427,7 +6403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const STEPPER_SIZE_MAP = {
     sm: { circle: 'w-7 h-7', iconSize: 'xs', label: 'text-xs', desc: 'text-xs', connector: 'h-0.5' },
@@ -6738,56 +6714,20 @@ class ClxTimelineComponent {
     lineStyle = input('dotted', ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
     mode = input('left', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
-    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
     sizeTokens = computed(() => TIMELINE_SIZE_MAP[this.size()], ...(ngDevMode ? [{ debugName: "sizeTokens" }] : /* istanbul ignore next */ []));
-    _hostClass = computed(() => {
-        const hasCard = this.label() || this.bordered();
-        const bg = hasCard ? 'bg-white rounded-2xl overflow-hidden' : '';
-        const border = this.bordered() ? `border ${resolveColor(this.color()).borderLight}` : 'shadow-sm';
-        return `flex flex-col w-full ${hasCard ? `${bg} ${border}` : ''}`.trim();
-    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
-    _headerClass = computed(() => {
-        const px = this.sizeTokens().item.split(' ')[0];
-        return `flex items-center justify-between ${px} py-3 border-b ${resolveColor(this.color()).borderLight}`;
-    }, ...(ngDevMode ? [{ debugName: "_headerClass" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => 'flex flex-col w-full', ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTimelineComponent, isStandalone: true, selector: "clx-timeline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxTimelineComponent, isStandalone: true, selector: "clx-timeline", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "_hostClass()" } }, providers: [
             { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
-        ], ngImport: i0, template: `
-    @if (label()) {
-      <div [class]="_headerClass()">
-        <span class="font-semibold text-slate-800">{{ label() }}</span>
-        @if (actionLabel()) {
-          <button clx-button variant="ghost" color="slate" size="sm" icon="expand_more">
-            {{ actionLabel() }}
-          </button>
-        }
-      </div>
-    }
-    <ng-content />
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTimelineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-timeline',
                     standalone: true,
-                    imports: [ClxButtonComponent],
-                    template: `
-    @if (label()) {
-      <div [class]="_headerClass()">
-        <span class="font-semibold text-slate-800">{{ label() }}</span>
-        @if (actionLabel()) {
-          <button clx-button variant="ghost" color="slate" size="sm" icon="expand_more">
-            {{ actionLabel() }}
-          </button>
-        }
-      </div>
-    }
-    <ng-content />
-  `,
+                    imports: [],
+                    template: `<ng-content />`,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -6798,7 +6738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         { provide: CLX_TIMELINE_CONTEXT, useExisting: forwardRef(() => ClxTimelineComponent) },
                     ],
                 }]
-        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class ClxTimelineItemComponent {
     _ctx = inject(CLX_TIMELINE_CONTEXT);