codexly-ui 0.16.1 → 0.16.2

package/fesm2022/codexly-ui.mjs

@@ -16120,8 +16120,8 @@ class ClxStatCardComponent {
       <div class="w-full flex items-center gap-2">
         <!-- Icon + value -->
         <div class="flex items-center gap-2 min-w-0 flex-1">
-          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBgSubtle()">
-            <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBg()">
+            <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
           </div>
           <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         </div>
@@ -16285,8 +16285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="w-full flex items-center gap-2">
         <!-- Icon + value -->
         <div class="flex items-center gap-2 min-w-0 flex-1">
-          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBgSubtle()">
-            <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+          <div class="shrink-0 w-9 h-9 rounded-full flex items-center justify-center" [class]="_iconBg()">
+            <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
           </div>
           <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
         </div>
@@ -16767,9 +16767,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], soldQty: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldQty", required: false }] }] } });
 
-/** A ranking: color dot + label on the left, optional trend badge + value on the right — e.g. "Top
- *  selling categories" or "Sales by channel" on a dashboard. Composes ClxListComponent/
- *  ClxListItemComponent (their clxLead/clxTrail slots) rather than reinventing list chrome. */
+/** A ranking: color dot (or a saturated icon circle) + label on the left, optional trend badge +
+ *  value on the right — e.g. "Top selling categories" or "Sales by channel" on a dashboard.
+ *  Composes ClxListComponent/ClxListItemComponent (their clxLead/clxTrail slots) rather than
+ *  reinventing list chrome. */
 class ClxRankedListComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
@@ -16786,8 +16787,14 @@ class ClxRankedListComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxRankedListComponent, isStandalone: true, selector: "clx-ranked-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <clx-list [color]="color()">
       @for (item of items(); track item.label) {
-        <clx-list-item [label]="item.label">
-          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+        <clx-list-item [label]="item.label" [sublabel]="item.sublabel ?? ''">
+          @if (item.icon) {
+            <div clxLead class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="dotClass(item.colorDot)">
+              <span clx-icon [name]="item.icon" size="sm" class="text-white"></span>
+            </div>
+          } @else {
+            <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          }
           <div clxTrail class="flex items-center gap-2">
             @if (item.trend) {
               <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">
@@ -16812,8 +16819,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     <clx-list [color]="color()">
       @for (item of items(); track item.label) {
-        <clx-list-item [label]="item.label">
-          <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+        <clx-list-item [label]="item.label" [sublabel]="item.sublabel ?? ''">
+          @if (item.icon) {
+            <div clxLead class="w-9 h-9 rounded-full flex items-center justify-center shrink-0" [class]="dotClass(item.colorDot)">
+              <span clx-icon [name]="item.icon" size="sm" class="text-white"></span>
+            </div>
+          } @else {
+            <span clxLead class="w-2 h-2 rounded-full shrink-0" [class]="dotClass(item.colorDot)"></span>
+          }
           <div clxTrail class="flex items-center gap-2">
             @if (item.trend) {
               <span clx-badge size="xs" variant="light" shape="pill" [color]="trendColor(item.trendDirection)">