codexly-ui 0.12.17 → 0.12.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.12.17",
+  "version": "0.12.19",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -3452,6 +3452,11 @@ declare class ClxProductDetailComponent {
      *  independent: setting one never affects any other, so a host can, say, pin addToCartColor to
      *  the theme's secondaryColor while leaving buyNowColor/specButtonColor on the shared clxColor. */
     readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
+    /** Selected-thumbnail border in the gallery strip — was a malformed literal string concat
+     *  ('border-' + clxColor() + '-500', which double-appends a shade when clxColor already carries
+     *  one, e.g. 'yellow-400' → the invalid class "border-yellow-400-500"). resolveColor() builds
+     *  the correct border-{color}-{shade} class from whatever shade clxColor actually resolves to. */
+    protected readonly _thumbBorderClass: _angular_core.Signal<string>;
     readonly buyNowColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly buyNowTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _buyNowColor: _angular_core.Signal<ClxColorInput>;
@@ -3491,6 +3496,10 @@ declare class ClxProductDetailComponent {
     /** Hides the tabs (Características/Especificaciones/Descripción) and the Reviews section —
      *  for contexts like a quick-view modal where only the gallery + spec selector + CTA matter. */
     readonly compact: _angular_core.InputSignal<boolean>;
+    /** Drop shadow for the gallery/info panels and each review card — same ClxCardShadow scale as
+     *  clx-card ('none' turns it off entirely). Falls back to 'sm', the shadow these have always
+     *  rendered with. */
+    readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
     readonly addToCart: _angular_core.OutputEmitterRef<{
         variationId: string;
         quantity: number;
@@ -3513,9 +3522,13 @@ declare class ClxProductDetailComponent {
      *  without fighting a "fully selected" starting state that never lets go of its last value. */
     readonly selectedSpecs: _angular_core.WritableSignal<Record<string, string>>;
     private readonly _initialVariation;
-    /** Same card treatment as clx-product (bg-clx-surface + shadow-sm) — keeps the gallery/info
-     *  panels visually consistent with the rest of the e-commerce card set. */
-    protected readonly _panelClass = "bg-clx-surface rounded-2xl shadow-sm p-4";
+    private readonly _themeSvc;
+    /** Same card treatment as clx-product/clx-wishlist/clx-cart — themed border (cardBorderColor)
+     *  + configurable shadow, keeps the gallery/info panels visually consistent with the rest of
+     *  the e-commerce card set. Was bg-clx-surface + shadow-sm with no border at all. */
+    protected readonly _panelClass: _angular_core.Signal<string>;
+    /** Same border/shadow treatment for each individual review card. */
+    protected readonly _reviewCardClass: _angular_core.Signal<string>;
     readonly tabItems: ClxTabItem[];
     /** Tracks which product the spec selection was initialized for — the init effect below must run
      *  once per actual product change, not every time initialVariationId() changes. A host app that
@@ -3577,7 +3590,7 @@ declare class ClxProductDetailComponent {
     specsLeft<T>(specs: T[]): T[];
     specsRight<T>(specs: T[]): T[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductDetailComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "initialVariationId": { "alias": "initialVariationId"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "buyNowColor": { "alias": "buyNowColor"; "required": false; "isSignal": true; }; "buyNowTextColor": { "alias": "buyNowTextColor"; "required": false; "isSignal": true; }; "addToCartColor": { "alias": "addToCartColor"; "required": false; "isSignal": true; }; "addToCartTextColor": { "alias": "addToCartTextColor"; "required": false; "isSignal": true; }; "leaveReviewColor": { "alias": "leaveReviewColor"; "required": false; "isSignal": true; }; "leaveReviewTextColor": { "alias": "leaveReviewTextColor"; "required": false; "isSignal": true; }; "wishlistColor": { "alias": "wishlistColor"; "required": false; "isSignal": true; }; "wishlistTextColor": { "alias": "wishlistTextColor"; "required": false; "isSignal": true; }; "wishlistVariant": { "alias": "wishlistVariant"; "required": false; "isSignal": true; }; "stockBadgeColor": { "alias": "stockBadgeColor"; "required": false; "isSignal": true; }; "discountBadgeColor": { "alias": "discountBadgeColor"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "specButtonColor": { "alias": "specButtonColor"; "required": false; "isSignal": true; }; "specButtonTextColor": { "alias": "specButtonTextColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "initialVariationId": { "alias": "initialVariationId"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "buyNowColor": { "alias": "buyNowColor"; "required": false; "isSignal": true; }; "buyNowTextColor": { "alias": "buyNowTextColor"; "required": false; "isSignal": true; }; "addToCartColor": { "alias": "addToCartColor"; "required": false; "isSignal": true; }; "addToCartTextColor": { "alias": "addToCartTextColor"; "required": false; "isSignal": true; }; "leaveReviewColor": { "alias": "leaveReviewColor"; "required": false; "isSignal": true; }; "leaveReviewTextColor": { "alias": "leaveReviewTextColor"; "required": false; "isSignal": true; }; "wishlistColor": { "alias": "wishlistColor"; "required": false; "isSignal": true; }; "wishlistTextColor": { "alias": "wishlistTextColor"; "required": false; "isSignal": true; }; "wishlistVariant": { "alias": "wishlistVariant"; "required": false; "isSignal": true; }; "stockBadgeColor": { "alias": "stockBadgeColor"; "required": false; "isSignal": true; }; "discountBadgeColor": { "alias": "discountBadgeColor"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "specButtonColor": { "alias": "specButtonColor"; "required": false; "isSignal": true; }; "specButtonTextColor": { "alias": "specButtonTextColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
 }
 
 interface ClxProductQuickViewData {