codexly-ui 0.12.7 → 0.12.9

package/package.json

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

package/types/codexly-ui.d.ts

@@ -134,6 +134,12 @@ declare class ClxButtonComponent {
     private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Marks a button as the secondary action in a pair (e.g. "Cancelar" next to "Guardar") — resolves
+     *  the theme's secondaryColor instead of primaryColor when `color` isn't explicitly passed, falling
+     *  back to primaryColor if the theme has no secondaryColor of its own. `[color]` always wins over
+     *  this when set, same precedence every other themed zone in this library follows. Named `emphasis`
+     *  (not `role`) to avoid colliding with the native HTML `role` ARIA attribute. */
+    readonly emphasis: _angular_core.InputSignal<"primary" | "secondary">;
     /** Overrides only the text color, independent of `color`/`variant` — e.g. a solid button on an
      *  unusual background shade (bright yellow) where the variant's own resolved text color (white)
      *  reads poorly and a themed text tone is needed instead. */
@@ -177,7 +183,7 @@ declare class ClxButtonComponent {
     protected readonly _hostClass: _angular_core.Signal<string>;
     protected _onRipple(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonComponent, "button[clx-button], a[clx-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxButtonComponent, "button[clx-button], a[clx-button]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type ClxButtonGroupShape = 'flat' | 'circular';
@@ -3316,6 +3322,8 @@ declare class ClxProductComponent {
     protected readonly _buttonSize: _angular_core.Signal<"sm" | "md">;
     protected readonly _skeletonW: _angular_core.Signal<"sm:w-32" | "sm:w-44">;
     protected readonly _skeletonH: _angular_core.Signal<"160px" | "200px">;
+    /** Themed border — same accent as the rest of the card (clxColor), same borderLight treatment
+     *  as clx-card's own elevated variant. */
     protected readonly _cardClass: _angular_core.Signal<string>;
     protected readonly _imageContainerClass: _angular_core.Signal<string>;
     protected readonly _imageClass: _angular_core.Signal<string>;
@@ -3582,9 +3590,15 @@ interface ClxWishlistPageChangeEvent {
 }
 
 declare class ClxWishlistComponent {
+    private readonly _themeSvc;
     readonly items: _angular_core.InputSignal<ClxWishlistItem[]>;
     readonly loading: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput>;
+    /** Optional per-instance override — when unset, every zone below resolves independently from
+     *  the app-wide theme (search input from formControls.input, "Agregar todo"/badge/"Añadir al
+     *  carrito" from primaryColor, pagination from its own paginationStyle()), same convention as
+     *  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>;
     readonly sortOptions: _angular_core.InputSignal<ClxSelectOption[]>;
     readonly currentPage: _angular_core.ModelSignal<number>;
     readonly pageSize: _angular_core.ModelSignal<number>;
@@ -3592,6 +3606,9 @@ declare class ClxWishlistComponent {
     readonly searchValue: _angular_core.ModelSignal<string>;
     protected _searchModel: string;
     protected _sortModel: string | null;
+    protected readonly _inputColor: _angular_core.Signal<ClxColorInput>;
+    protected readonly _selectColor: _angular_core.Signal<ClxColorInput>;
+    protected readonly _accentColor: _angular_core.Signal<ClxColorInput>;
     readonly onRemove: _angular_core.OutputEmitterRef<ClxWishlistItem>;
     readonly onAddToCart: _angular_core.OutputEmitterRef<ClxWishlistItem>;
     readonly onSearchChange: _angular_core.OutputEmitterRef<string>;
@@ -3601,7 +3618,9 @@ declare class ClxWishlistComponent {
     /** Emitted from the empty-state's "Ir a la tienda" CTA — the host navigates to the catalog. */
     readonly onBrowseCatalog: _angular_core.OutputEmitterRef<void>;
     readonly _skeletonItems: unknown[];
-    protected readonly _cardClass = "bg-clx-surface rounded-2xl shadow-sm transition-[box-shadow,transform] duration-200 overflow-hidden group hover:shadow-md hover:-translate-y-0.5 flex flex-col sm:flex-row";
+    /** Themed border — falls back to cardBorderColor() (itself falling back to primaryColor) when
+     *  `color` is unset, same borderLight treatment as clx-card's own elevated variant. */
+    protected readonly _cardClass: _angular_core.Signal<string>;
     protected readonly _imageContainerClass = "relative shrink-0 w-full p-2.5 aspect-square sm:aspect-auto sm:w-40 overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl";
     protected readonly _imageClass = "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105";
     protected readonly _contentClass = "relative flex flex-col gap-2 flex-1 p-3 min-w-0";