codexly-ui 0.19.8 → 0.19.9

package/fesm2022/codexly-ui.mjs

@@ -690,6 +690,7 @@ class ClxThemeService {
     /** Resolved border color for ClxCardComponent (outlined/elevated variants) — falls back to
      *  primaryColor when unset. Per-instance `[color]` input on clx-card still takes precedence. */
     cardBorderColor = computed(() => this._config().cardBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardBorderColor" }] : /* istanbul ignore next */ []));
+    cardIconColor = computed(() => this._config().cardIconColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "cardIconColor" }] : /* istanbul ignore next */ []));
     /** Resolved divider/border color for ClxListComponent — falls back to primaryColor when unset.
      *  Per-instance `[color]` input on clx-list still takes precedence. */
     listBorderColor = computed(() => this._config().listBorderColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "listBorderColor" }] : /* istanbul ignore next */ []));
@@ -1624,6 +1625,11 @@ class ClxCardComponent {
     /** Optional secondary line under headerTitle. */
     headerSubtitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.cardBorderColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Header icon badge: explicit [color] → theme cardIconColor → primaryColor (same fallback chain
+     *  as clx-collapse / the form controls). */
+    _iconColor = computed(() => this.color() ?? this._themeSvc.cardIconColor(), ...(ngDevMode ? [{ debugName: "_iconColor" }] : /* istanbul ignore next */ []));
+    _iconWrapCls = computed(() => `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${resolveColor(this._iconColor()).bgMuted}`, ...(ngDevMode ? [{ debugName: "_iconWrapCls" }] : /* istanbul ignore next */ []));
+    _iconCls = computed(() => resolveColor(this._iconColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _titleClass = computed(() => `text-sm font-[${this._themeSvc.cardTitleStyle().weight}] text-clx-text-label leading-tight truncate`, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _headerActionsSlot = contentChild(ClxCardHeaderActionsDirective, ...(ngDevMode ? [{ debugName: "_headerActionsSlot" }] : /* istanbul ignore next */ []));
@@ -1679,8 +1685,8 @@ class ClxCardComponent {
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">
@@ -1731,8 +1737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <div class="flex items-center gap-3 min-w-0">
           @if (icon()) {
-            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
-              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            <div [class]="_iconWrapCls()">
+              <span clx-icon [name]="icon()!" size="sm" [class]="_iconCls()"></span>
             </div>
           }
           <div class="flex flex-col min-w-0">