codexly-ui 0.15.6 → 0.15.7

package/fesm2022/codexly-ui.mjs

@@ -15957,7 +15957,10 @@ class ClxStatCardComponent {
     _hostClass = computed(() => {
         const border = resolveColor(this.color()).borderLight;
         const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
-        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full overflow-hidden min-w-[200px]`;
+        // h-full so every layout fills whatever height its parent grid cell actually gives it, instead
+        // of only growing to fit its own content — otherwise two cards of the same grid size look like
+        // different heights depending on which of the 3 layouts got picked for each.
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full h-full overflow-hidden min-w-[200px]`;
         // horizontal stacks its title row above its icon/value/sparkline row (flex-col); vertical/bar
         // keep a single side-by-side row (flex items-center) as before.
         const layoutCls = this.layout() === 'horizontal' ? 'flex flex-col gap-2' : 'flex items-center gap-3';
@@ -16100,8 +16103,8 @@ class ClxStatCardComponent {
     @if (layout() === 'bar') {
       <!-- Col izquierda: ícono circular + título + valor -->
       <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <div class="w-11 h-11 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
-          <span clx-icon [name]="metric().icon" size="md" [class]="_iconTextBase()"></span>
+        <div class="w-10 h-10 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
+          <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
         </div>
         <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
         <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
@@ -16147,8 +16150,8 @@ class ClxStatCardComponent {
       </div>
 
       <!-- Col derecha: solo icono -->
-      <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center" [class]="_iconBg()">
-        <span clx-icon [name]="metric().icon" size="md" class="text-white"></span>
+      <div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center" [class]="_iconBg()">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
       </div>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -16215,8 +16218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     @if (layout() === 'bar') {
       <!-- Col izquierda: ícono circular + título + valor -->
       <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <div class="w-11 h-11 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
-          <span clx-icon [name]="metric().icon" size="md" [class]="_iconTextBase()"></span>
+        <div class="w-10 h-10 rounded-full flex items-center justify-center mb-2" [class]="_iconBgSubtle()">
+          <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
         </div>
         <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
         <span class="text-2xl font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
@@ -16262,8 +16265,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
 
       <!-- Col derecha: solo icono -->
-      <div class="shrink-0 w-12 h-12 rounded-xl flex items-center justify-center" [class]="_iconBg()">
-        <span clx-icon [name]="metric().icon" size="md" class="text-white"></span>
+      <div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center" [class]="_iconBg()">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
       </div>
     }
   `,