codexly-ui 0.12.12 → 0.12.14

package/package.json

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

package/types/codexly-ui.d.ts

@@ -2928,6 +2928,11 @@ declare class ClxFilterPanelComponent {
      *  host keep a saturated brand color on checkboxes/slider (small accents) while giving the CTA
      *  button its own color and a bigger size if the sidebar's width calls for it. */
     readonly applyButtonColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Text color for the same "Aplicar filtros" button — independent of applyButtonColor, same
+     *  rationale as clx-button's own [textColor]: a saturated applyButtonColor can leave the
+     *  auto-resolved contrast text illegible. Undefined leaves clx-button's own automatic
+     *  resolution untouched. */
+    readonly applyButtonTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly applyButtonSize: _angular_core.InputSignal<ClxButtonSize>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _applyButtonColor: _angular_core.Signal<ClxColorInput>;
@@ -2954,7 +2959,7 @@ declare class ClxFilterPanelComponent {
     protected _badgeCls(): string;
     protected _fieldBadgeCls(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxFilterPanelComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxFilterPanelComponent, "clx-filter-panel", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showApply": { "alias": "showApply"; "required": false; "isSignal": true; }; "applyButtonColor": { "alias": "applyButtonColor"; "required": false; "isSignal": true; }; "applyButtonSize": { "alias": "applyButtonSize"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "filterChange": "filterChange"; "applyChange": "applyChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxFilterPanelComponent, "clx-filter-panel", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showApply": { "alias": "showApply"; "required": false; "isSignal": true; }; "applyButtonColor": { "alias": "applyButtonColor"; "required": false; "isSignal": true; }; "applyButtonTextColor": { "alias": "applyButtonTextColor"; "required": false; "isSignal": true; }; "applyButtonSize": { "alias": "applyButtonSize"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "filterChange": "filterChange"; "applyChange": "applyChange"; }, never, never, true, never>;
 }
 
 declare class ClxCarouselDirective {
@@ -3306,6 +3311,11 @@ declare class ClxProductComponent {
     readonly layout: _angular_core.InputSignal<ClxProductLayout>;
     readonly size: _angular_core.InputSignal<ClxProductSize>;
     readonly clxColor: _angular_core.InputSignal<ClxColorInput>;
+    /** Text color for the wishlist (heart) and "Añadir al carrito"/"Ver opciones" buttons —
+     *  independent of clxColor, same rationale as clx-button's own [textColor]. Both buttons are
+     *  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>;
     readonly imageFit: _angular_core.InputSignal<"contain" | "cover">;
     readonly addToCart: _angular_core.OutputEmitterRef<ClxProduct>;
     readonly addToWishlist: _angular_core.OutputEmitterRef<ClxProduct>;
@@ -3338,7 +3348,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; }; "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; }; "imageFit": { "alias": "imageFit"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "addToWishlist": "addToWishlist"; "viewOptions": "viewOptions"; }, never, never, true, never>;
 }
 
 /** st_spec_options */
@@ -3428,24 +3438,25 @@ interface ClxProductDetailData {
 declare class ClxProductDetailComponent {
     readonly product: _angular_core.InputSignal<ClxProductDetailData | null>;
     readonly initialVariationId: _angular_core.InputSignal<string | null>;
+    /** Fallback accent for every zone below that doesn't get its own explicit override — same "one
+     *  shared default, every zone can opt out independently" convention as the rest of this library
+     *  (see ClxThemeConfig/formControls). Each {zone}Color/{zone}TextColor pair below is fully
+     *  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>;
-    /** Optional override for just the two CTA buttons (Comprar ahora / Agrega al carrito) — some
-     *  brand colors (e.g. a saturated yellow) read fine as small accents (badges, tags, selected
-     *  spec chips) via clxColor but look garish filling a large solid button; this lets a host swap
-     *  only the CTAs to a calmer color without losing the accent everywhere else. Falls back to
-     *  clxColor() when not set, so existing consumers are unaffected. */
-    readonly actionColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _actionColor: _angular_core.Signal<ClxColorInput>;
-    /** Text color for the same three CTAs (Comprar ahora / Agrega al carrito / Dejar una reseña) —
-     *  independent of actionColor, same rationale as clx-button's own [textColor]: a saturated
-     *  actionColor (e.g. brand yellow) can force a background where the auto-resolved white/dark-800
-     *  contrast text still reads poorly, and this lets a host pin the exact text tone instead.
-     *  Undefined (the default) leaves each button's own automatic contrast resolution untouched. */
-    readonly actionTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly buyNowColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly buyNowTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _buyNowColor: _angular_core.Signal<ClxColorInput>;
+    readonly addToCartColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly addToCartTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly leaveReviewColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly leaveReviewTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _leaveReviewColor: _angular_core.Signal<ClxColorInput>;
     /** Optional override for the floating wishlist (heart) button on the gallery — same rationale
-     *  as actionColor: a saturated brand color that works as a small accent elsewhere can look wrong
+     *  as buyNowColor: a saturated brand color that works as a small accent elsewhere can look wrong
      *  as a solid filled circle. Falls back to clxColor()/'solid' when not set. */
     readonly wishlistColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    readonly wishlistTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly wishlistVariant: _angular_core.InputSignal<ClxButtonVariant>;
     protected readonly _wishlistColor: _angular_core.Signal<ClxColorInput>;
     /** Overrides for individual accent spots that a saturated clxColor can make too loud at their
@@ -3453,17 +3464,20 @@ declare class ClxProductDetailComponent {
      *  rating stars, thumbnail active border, etc). All fall back to clxColor() when unset. */
     readonly stockBadgeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly discountBadgeColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly specButtonColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly quantityColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _stockBadgeColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _discountBadgeColor: _angular_core.Signal<ClxColorInput>;
-    protected readonly _specButtonColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _quantityColor: _angular_core.Signal<ClxColorInput>;
-    /** Text color for the spec option buttons (Talla/Material/etc — not the color-swatch spec type,
-     *  which uses opt.value as an inline background and has no clx-button text to color). Same
-     *  rationale as actionTextColor: independent of specButtonColor, undefined leaves clx-button's
-     *  own automatic contrast resolution untouched. */
+    /** Spec option buttons (Talla/Material/etc — not the color-swatch spec type, which uses
+     *  opt.value as an inline background and has no clx-button text to color). specButtonTextColor
+     *  only ever applies to the SELECTED (variant="solid") option — an unselected option is
+     *  variant="outline", where the text IS specButtonColor itself (the variant's own literal
+     *  text-{color} class), so forcing a text override there would fight its own border/text color
+     *  and can go illegible against outline's light background (confirmed: neutral-50 became
+     *  invisible on unselected chips). */
+    readonly specButtonColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly specButtonTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    protected readonly _specButtonColor: _angular_core.Signal<ClxColorInput>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly currency: _angular_core.InputSignal<string>;
     /** Hides the tabs (Características/Especificaciones/Descripción) and the Reviews section —
@@ -3555,7 +3569,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; }; "actionColor": { "alias": "actionColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "wishlistColor": { "alias": "wishlistColor"; "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; }; "specButtonColor": { "alias": "specButtonColor"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "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; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
 }
 
 interface ClxProductQuickViewData {
@@ -3614,6 +3628,14 @@ declare class ClxWishlistComponent {
      *  clx-input/clx-select/clx-pagination themselves. Previously this was a required-looking input
      *  defaulting to a hardcoded 'indigo' that every zone read directly, bypassing theme entirely. */
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Text color for "Agregar todo al carrito" (variant="light") — independent of `color`, same
+     *  rationale as clx-button's own [textColor]: a saturated `color` can leave the auto-resolved
+     *  text illegible against a light-tinted background. Undefined leaves clx-button's own
+     *  automatic resolution untouched. */
+    readonly checkoutAllTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Text color for each item's own "Añadir al carrito" (variant="solid") — independent of
+     *  `color`, same rationale as checkoutAllTextColor. */
+    readonly addToCartTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly sortOptions: _angular_core.InputSignal<ClxSelectOption[]>;
     readonly currentPage: _angular_core.ModelSignal<number>;
     readonly pageSize: _angular_core.ModelSignal<number>;
@@ -3660,7 +3682,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; }; "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; }; "checkoutAllTextColor": { "alias": "checkoutAllTextColor"; "required": false; "isSignal": true; }; "addToCartTextColor": { "alias": "addToCartTextColor"; "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 */