codexly-ui 0.15.6 → 0.15.8

package/fesm2022/codexly-ui.mjs

@@ -15957,7 +15957,12 @@ 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 + justify-center (not h-full alone) so a parent grid cell taller than this card's
+        // natural content centers it instead of stretching/cramming it — a card whose content is
+        // genuinely shorter than the cell just sits centered, never squeezed or clipped. min-h-fit
+        // guards the opposite case: a cell shorter than the content (e.g. horizontal's sparkline row)
+        // still lets the card grow to its real height instead of clipping via overflow-hidden.
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full h-full justify-center min-h-fit 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 +16105,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 +16152,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 +16220,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 +16267,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>
     }
   `,