codexly-ui 0.16.0 → 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>
@@ -16713,12 +16713,12 @@ class ClxTableProductCellComponent {
     price = input('', ...(ngDevMode ? [{ debugName: "price" }] : /* istanbul ignore next */ []));
     soldQty = input('', ...(ngDevMode ? [{ debugName: "soldQty" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTableProductCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableProductCellComponent, isStandalone: true, selector: "clx-table-product-cell", inputs: { imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, soldQty: { classPropertyName: "soldQty", publicName: "soldQty", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center justify-between gap-3 w-full" }, ngImport: i0, template: `
-    <div class="flex items-center gap-2.5 min-w-0">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTableProductCellComponent, isStandalone: true, selector: "clx-table-product-cell", inputs: { imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, soldQty: { classPropertyName: "soldQty", publicName: "soldQty", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex items-center gap-2 w-full min-w-0" }, ngImport: i0, template: `
+    <div class="flex items-center gap-2 min-w-0 flex-1">
       @if (imageSrc()) {
-        <img [src]="imageSrc()" [alt]="name()" class="w-9 h-9 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+        <img [src]="imageSrc()" [alt]="name()" class="w-8 h-8 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
       } @else {
-        <div class="w-9 h-9 rounded-lg shrink-0 bg-clx-surface-2"></div>
+        <div class="w-8 h-8 rounded-lg shrink-0 bg-clx-surface-2"></div>
       }
       <div class="min-w-0">
         <p class="text-sm text-clx-text-label truncate">{{ name() }}</p>
@@ -16727,10 +16727,10 @@ class ClxTableProductCellComponent {
         }
       </div>
     </div>
-    <div class="text-right shrink-0">
-      <p class="text-sm font-semibold text-clx-text tabular-nums">{{ price() }}</p>
+    <div class="text-right shrink-0 min-w-0">
+      <p class="text-sm font-semibold text-clx-text tabular-nums truncate">{{ price() }}</p>
       @if (soldQty()) {
-        <p class="text-xs text-clx-text-muted">{{ soldQty() }} vendidos</p>
+        <p class="text-xs text-clx-text-muted whitespace-nowrap">{{ soldQty() }} vendidos</p>
       }
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -16742,13 +16742,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex items-center justify-between gap-3 w-full' },
+                    host: { class: 'flex items-center gap-2 w-full min-w-0' },
                     template: `
-    <div class="flex items-center gap-2.5 min-w-0">
+    <div class="flex items-center gap-2 min-w-0 flex-1">
       @if (imageSrc()) {
-        <img [src]="imageSrc()" [alt]="name()" class="w-9 h-9 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
+        <img [src]="imageSrc()" [alt]="name()" class="w-8 h-8 rounded-lg object-cover shrink-0 bg-clx-surface-2" />
       } @else {
-        <div class="w-9 h-9 rounded-lg shrink-0 bg-clx-surface-2"></div>
+        <div class="w-8 h-8 rounded-lg shrink-0 bg-clx-surface-2"></div>
       }
       <div class="min-w-0">
         <p class="text-sm text-clx-text-label truncate">{{ name() }}</p>
@@ -16757,19 +16757,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }
       </div>
     </div>
-    <div class="text-right shrink-0">
-      <p class="text-sm font-semibold text-clx-text tabular-nums">{{ price() }}</p>
+    <div class="text-right shrink-0 min-w-0">
+      <p class="text-sm font-semibold text-clx-text tabular-nums truncate">{{ price() }}</p>
       @if (soldQty()) {
-        <p class="text-xs text-clx-text-muted">{{ soldQty() }} vendidos</p>
+        <p class="text-xs text-clx-text-muted whitespace-nowrap">{{ soldQty() }} vendidos</p>
       }
     </div>
   `,
                 }]
         }], 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)">