codexly-ui 0.12.7 → 0.12.8

package/fesm2022/codexly-ui.mjs

@@ -15331,9 +15331,12 @@ class ClxProductComponent {
     _buttonSize = computed(() => this._sm() ? 'sm' : 'md', ...(ngDevMode ? [{ debugName: "_buttonSize" }] : /* istanbul ignore next */ []));
     _skeletonW = computed(() => this._sm() ? 'sm:w-32' : 'sm:w-44', ...(ngDevMode ? [{ debugName: "_skeletonW" }] : /* istanbul ignore next */ []));
     _skeletonH = computed(() => this._sm() ? '160px' : '200px', ...(ngDevMode ? [{ debugName: "_skeletonH" }] : /* istanbul ignore next */ []));
+    /** Themed border — same accent as the rest of the card (clxColor), same borderLight treatment
+     *  as clx-card's own elevated variant. */
     _cardClass = computed(() => {
         const hover = this._disabled() ? '' : 'hover:shadow-md hover:-translate-y-0.5';
-        return `bg-clx-surface rounded-2xl shadow-sm transition-[box-shadow,transform] duration-200 overflow-hidden group ${hover} ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`;
+        const t = resolveColor(this.clxColor());
+        return `bg-clx-surface rounded-2xl shadow-sm border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group ${hover} ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`;
     }, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
     _imageContainerClass = computed(() => this._h()
         ? `relative shrink-0 w-full aspect-square sm:aspect-auto ${this._sm() ? 'sm:w-32' : 'sm:w-44'} overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl`
@@ -15944,9 +15947,15 @@ const WISHLIST_SORT_OPTIONS = [
 ];
 
 class ClxWishlistComponent {
+    _themeSvc = inject(ClxThemeService);
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     sortOptions = input(WISHLIST_SORT_OPTIONS, ...(ngDevMode ? [{ debugName: "sortOptions" }] : /* istanbul ignore next */ []));
     currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     pageSize = model(WISHLIST_PAGE_SIZE_DEFAULT, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
@@ -15954,6 +15963,9 @@ class ClxWishlistComponent {
     searchValue = model('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
     _searchModel = '';
     _sortModel = null;
+    _inputColor = computed(() => this.color() ?? this._themeSvc.formControlColor('input'), ...(ngDevMode ? [{ debugName: "_inputColor" }] : /* istanbul ignore next */ []));
+    _selectColor = computed(() => this.color() ?? this._themeSvc.formControlColor('select'), ...(ngDevMode ? [{ debugName: "_selectColor" }] : /* istanbul ignore next */ []));
+    _accentColor = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_accentColor" }] : /* istanbul ignore next */ []));
     onRemove = output();
     onAddToCart = output();
     onSearchChange = output();
@@ -15963,7 +15975,12 @@ class ClxWishlistComponent {
     /** Emitted from the empty-state's "Ir a la tienda" CTA — the host navigates to the catalog. */
     onBrowseCatalog = output();
     _skeletonItems = Array.from({ length: 6 });
-    _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. */
+    _cardClass = computed(() => {
+        const t = resolveColor(this.color() ?? this._themeSvc.cardBorderColor());
+        return `bg-clx-surface rounded-2xl shadow-sm border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group hover:shadow-md hover:-translate-y-0.5 flex flex-col sm:flex-row`;
+    }, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
     _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';
     _imageClass = 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105';
     _contentClass = 'relative flex flex-col gap-2 flex-1 p-3 min-w-0';
@@ -16045,7 +16062,7 @@ class ClxWishlistComponent {
               placeholder="Search Here"
               prefixIcon="search"
               size="md"
-              [color]="color()"
+              [color]="_inputColor()"
               [(ngModel)]="_searchModel"
               (ngModelChange)="handleSearch($event)"
             />
@@ -16054,7 +16071,7 @@ class ClxWishlistComponent {
             <clx-select
               placeholder="Sort By"
               [options]="sortOptions()"
-              [activeColor]="color()"
+              [activeColor]="_selectColor()"
               size="md"
               [(ngModel)]="_sortModel"
               (ngModelChange)="handleSort($event)"
@@ -16066,13 +16083,13 @@ class ClxWishlistComponent {
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex items-center gap-2">
             <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
-            <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
+            <span clx-badge variant="light" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
           </div>
           <button
             clx-button
             type="button"
             variant="light"
-            [color]="color()"
+            [color]="_accentColor()"
             icon="arrow_forward"
             iconPosition="right"
             [disabled]="_totalItems() === 0"
@@ -16106,7 +16123,7 @@ class ClxWishlistComponent {
           icon="favorite"
           heading="Sin favoritos"
           description="No tienes productos guardados."
-          [ctaColor]="color()"
+          [ctaColor]="_accentColor()"
           ctaIcon="storefront"
           ctaLabel="Ir a la tienda"
           (cta)="onBrowseCatalog.emit()">
@@ -16117,7 +16134,7 @@ class ClxWishlistComponent {
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
           @for (item of _pagedItems(); track item.id; let first = $first) {
             <!-- misma estructura y clases que clx-product layout=horizontal -->
-            <article [class]="_cardClass">
+            <article [class]="_cardClass()">
 
               <!-- Image Container -->
               <div [class]="_imageContainerClass">
@@ -16188,7 +16205,7 @@ class ClxWishlistComponent {
                   <button
                     clx-button
                     type="button"
-                    [color]="color()"
+                    [color]="_accentColor()"
                     variant="solid"
                     size="md"
                     icon="shopping_cart"
@@ -16252,7 +16269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               placeholder="Search Here"
               prefixIcon="search"
               size="md"
-              [color]="color()"
+              [color]="_inputColor()"
               [(ngModel)]="_searchModel"
               (ngModelChange)="handleSearch($event)"
             />
@@ -16261,7 +16278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             <clx-select
               placeholder="Sort By"
               [options]="sortOptions()"
-              [activeColor]="color()"
+              [activeColor]="_selectColor()"
               size="md"
               [(ngModel)]="_sortModel"
               (ngModelChange)="handleSort($event)"
@@ -16273,13 +16290,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
           <div class="flex items-center gap-2">
             <h2 class="text-base font-semibold text-clx-text-label">Productos</h2>
-            <span clx-badge variant="light" [color]="color()" size="sm">{{ _totalItems() }}</span>
+            <span clx-badge variant="light" [color]="_accentColor()" size="sm">{{ _totalItems() }}</span>
           </div>
           <button
             clx-button
             type="button"
             variant="light"
-            [color]="color()"
+            [color]="_accentColor()"
             icon="arrow_forward"
             iconPosition="right"
             [disabled]="_totalItems() === 0"
@@ -16313,7 +16330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
           icon="favorite"
           heading="Sin favoritos"
           description="No tienes productos guardados."
-          [ctaColor]="color()"
+          [ctaColor]="_accentColor()"
           ctaIcon="storefront"
           ctaLabel="Ir a la tienda"
           (cta)="onBrowseCatalog.emit()">
@@ -16324,7 +16341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
           @for (item of _pagedItems(); track item.id; let first = $first) {
             <!-- misma estructura y clases que clx-product layout=horizontal -->
-            <article [class]="_cardClass">
+            <article [class]="_cardClass()">
 
               <!-- Image Container -->
               <div [class]="_imageContainerClass">
@@ -16395,7 +16412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   <button
                     clx-button
                     type="button"
-                    [color]="color()"
+                    [color]="_accentColor()"
                     variant="solid"
                     size="md"
                     icon="shopping_cart"