codexly-ui 0.12.23 → 0.12.25

package/package.json

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

package/types/codexly-ui.d.ts

@@ -2415,7 +2415,11 @@ declare class ClxModalComponent {
     protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
     protected readonly _confirmVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
     protected readonly _cancelText: _angular_core.Signal<string>;
-    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    /** Undefined when the caller didn't pass an explicit cancelButton.color — lets the button's own
+     *  emphasis="secondary" resolve the theme's secondaryColor (with secondaryButtonTextColor
+     *  auto-applied on solid variants) instead of hardcoding 'slate', same convention as
+     *  clx-alert/clx-product-detail/clx-wishlist's secondary actions. */
+    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput | undefined>;
     protected readonly _cancelVariant: _angular_core.Signal<codexly_ui.ClxButtonVariant>;
     protected _close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxModalComponent, never>;
@@ -2591,7 +2595,11 @@ declare class ClxAlertComponent implements OnInit, OnDestroy {
     protected readonly _confirmText: _angular_core.WritableSignal<string>;
     protected readonly _confirmColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
     protected readonly _cancelText: _angular_core.WritableSignal<string>;
-    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput>;
+    /** Undefined when the caller didn't pass an explicit cancelButton.color — lets the button's own
+     *  emphasis="secondary" resolve the theme's secondaryColor (with secondaryButtonTextColor
+     *  auto-applied on solid variants), same convention as clx-product-detail/clx-wishlist's
+     *  secondary CTAs, instead of hardcoding secondaryColor here and losing that auto-text-color. */
+    protected readonly _cancelColor: _angular_core.Signal<codexly_ui.ClxColorInput | undefined>;
     protected readonly _cancelVariant: _angular_core.WritableSignal<ClxButtonVariant>;
     protected readonly _timerTotal: _angular_core.WritableSignal<number>;
     protected readonly _progressPct: _angular_core.WritableSignal<number>;
@@ -3326,9 +3334,11 @@ declare class ClxProductComponent {
      *  variant="ghost" (text tinted at textSubtle strength, not a solid fill), so contrast risk is
      *  low, but this is still exposed for full parity with clx-product-detail/clx-wishlist. */
     readonly actionTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    /** Card drop shadow — same ClxCardShadow scale as clx-card ('none' turns it off entirely).
-     *  Falls back to 'sm', the shadow this card has always rendered with. */
-    readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
+    /** Same ClxCardVariant concept as clx-card: 'elevated' (border + shadow, the default this card
+     *  has always rendered with), 'outlined' (border, no shadow), 'flat' (neither). The border
+     *  itself always reads cardBorderColor() regardless of variant — only whether it's shown at
+     *  all, and whether a shadow accompanies it, changes. */
+    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
     readonly imageFit: _angular_core.InputSignal<"contain" | "cover">;
     readonly addToCart: _angular_core.OutputEmitterRef<ClxProduct>;
     readonly addToWishlist: _angular_core.OutputEmitterRef<ClxProduct>;
@@ -3361,7 +3371,7 @@ declare class ClxProductComponent {
     protected readonly _descClass: _angular_core.Signal<string>;
     protected readonly _priceClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductComponent, "clx-product", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "priority": { "alias": "priority"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "imageFit": { "alias": "imageFit"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "addToWishlist": "addToWishlist"; "viewOptions": "viewOptions"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductComponent, "clx-product", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "priority": { "alias": "priority"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "imageFit": { "alias": "imageFit"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "addToWishlist": "addToWishlist"; "viewOptions": "viewOptions"; }, never, never, true, never>;
 }
 
 /** st_spec_options */
@@ -3507,10 +3517,11 @@ 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>;
+    /** Same ClxCardVariant concept as clx-card: 'elevated' (border + shadow, the default the
+     *  gallery/info panels and each review card have always rendered with), 'outlined' (border, no
+     *  shadow), 'flat' (neither). The border itself always reads cardBorderColor() regardless of
+     *  variant. */
+    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
     readonly addToCart: _angular_core.OutputEmitterRef<{
         variationId: string;
         quantity: number;
@@ -3535,7 +3546,7 @@ declare class ClxProductDetailComponent {
     private readonly _initialVariation;
     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
+     *  + variant-driven 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. */
@@ -3601,7 +3612,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; }; "shadow": { "alias": "shadow"; "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; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
 }
 
 interface ClxProductQuickViewData {
@@ -3677,9 +3688,10 @@ declare class ClxWishlistComponent {
     readonly actionColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly actionTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _actionColor: _angular_core.Signal<ClxColorInput>;
-    /** Product card drop shadow — same ClxCardShadow scale as clx-card ('none' turns it off
-     *  entirely). Falls back to 'sm', the shadow these cards have always rendered with. */
-    readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
+    /** Same ClxCardVariant concept as clx-card: 'elevated' (border + shadow, the default these
+     *  cards have always rendered with), 'outlined' (border, no shadow), 'flat' (neither). The
+     *  border itself always reads cardBorderColor() regardless of variant. */
+    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
     readonly sortOptions: _angular_core.InputSignal<ClxSelectOption[]>;
     readonly currentPage: _angular_core.ModelSignal<number>;
     readonly pageSize: _angular_core.ModelSignal<number>;
@@ -3726,7 +3738,7 @@ declare class ClxWishlistComponent {
     handleRemove(item: ClxWishlistItem): void;
     handleCheckoutAll(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxWishlistComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWishlistComponent, "clx-wishlist", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "checkoutAllColor": { "alias": "checkoutAllColor"; "required": false; "isSignal": true; }; "checkoutAllTextColor": { "alias": "checkoutAllTextColor"; "required": false; "isSignal": true; }; "checkoutAllEmphasis": { "alias": "checkoutAllEmphasis"; "required": false; "isSignal": true; }; "actionColor": { "alias": "actionColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "sortValue": { "alias": "sortValue"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "sortValue": "sortValueChange"; "searchValue": "searchValueChange"; "onRemove": "onRemove"; "onAddToCart": "onAddToCart"; "onSearchChange": "onSearchChange"; "onSortChange": "onSortChange"; "onPageChange": "onPageChange"; "onCheckoutAll": "onCheckoutAll"; "onBrowseCatalog": "onBrowseCatalog"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxWishlistComponent, "clx-wishlist", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "checkoutAllColor": { "alias": "checkoutAllColor"; "required": false; "isSignal": true; }; "checkoutAllTextColor": { "alias": "checkoutAllTextColor"; "required": false; "isSignal": true; }; "checkoutAllEmphasis": { "alias": "checkoutAllEmphasis"; "required": false; "isSignal": true; }; "actionColor": { "alias": "actionColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "sortValue": { "alias": "sortValue"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "sortValue": "sortValueChange"; "searchValue": "searchValueChange"; "onRemove": "onRemove"; "onAddToCart": "onAddToCart"; "onSearchChange": "onSearchChange"; "onSortChange": "onSortChange"; "onPageChange": "onPageChange"; "onCheckoutAll": "onCheckoutAll"; "onBrowseCatalog": "onBrowseCatalog"; }, never, never, true, never>;
 }
 
 /** Refleja sa_cart_items + ca_variants + ca_products */
@@ -3767,15 +3779,15 @@ declare class ClxCartComponent {
      *  showing a code input that always fails would read as broken, not "not built yet". */
     readonly showCoupon: _angular_core.InputSignal<boolean>;
     readonly coupon: _angular_core.ModelSignal<ClxCouponResult | null>;
-    /** Drop shadow for the item cards and Order Summary panel — 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>;
+    /** Same ClxCardVariant concept as clx-card: 'elevated' (border + shadow, the default the item
+     *  cards and Order Summary panel have always rendered with), 'outlined' (border, no shadow),
+     *  'flat' (neither). The border itself always reads cardBorderColor() regardless of variant. */
+    readonly variant: _angular_core.InputSignal<ClxCardVariant>;
     private readonly _themeSvc;
     protected readonly _quantityColor: _angular_core.Signal<ClxColorInput>;
     /** Item cards — was bg-clx-surface + shadow-sm with NO border at all (unlike clx-product/
-     *  clx-wishlist, which already read cardBorderColor). Now consistent: themed border +
-     *  configurable shadow, same borderLight treatment as clx-card's own elevated variant. */
+     *  clx-wishlist, which already read cardBorderColor). Now consistent: themed border, shadow
+     *  driven by variant, same borderLight treatment as clx-card's own elevated variant. */
     protected readonly _cardClass: _angular_core.Signal<string>;
     /** Order Summary panel — same border/shadow treatment as _cardClass, but no hover lift (it's a
      *  static panel, not a clickable card). */
@@ -3800,7 +3812,7 @@ declare class ClxCartComponent {
     applyCoupon(): void;
     removeCoupon(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCartComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCartComponent, "clx-cart", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "showCoupon": { "alias": "showCoupon"; "required": false; "isSignal": true; }; "coupon": { "alias": "coupon"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; }, { "coupon": "couponChange"; "onRemove": "onRemove"; "onQuantityChange": "onQuantityChange"; "onClearCart": "onClearCart"; "onApplyCoupon": "onApplyCoupon"; "onCheckout": "onCheckout"; "onBrowseCatalog": "onBrowseCatalog"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCartComponent, "clx-cart", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "showCoupon": { "alias": "showCoupon"; "required": false; "isSignal": true; }; "coupon": { "alias": "coupon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "coupon": "couponChange"; "onRemove": "onRemove"; "onQuantityChange": "onQuantityChange"; "onClearCart": "onClearCart"; "onApplyCoupon": "onApplyCoupon"; "onCheckout": "onCheckout"; "onBrowseCatalog": "onBrowseCatalog"; }, never, never, true, never>;
 }
 
 interface ClxCartSummaryData {