codexly-ui 0.15.7 → 0.15.9

package/fesm2022/codexly-ui.mjs

@@ -15957,13 +15957,17 @@ class ClxStatCardComponent {
     _hostClass = computed(() => {
         const border = resolveColor(this.color()).borderLight;
         const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
-        // 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';
+        // h-full + justify-center so a parent grid cell taller than this card's natural content
+        // centers it instead of stretching it — but the card must never grow past h-full (no
+        // min-h-fit here): a parent CSS Grid cell is a hard size, and overflowing it eats into the
+        // grid's own row gap/next row visually even though the grid's gap value is unchanged. Instead
+        // every layout's internal content (padding/icon/font sizes below) is kept compact enough to
+        // actually fit the grid's default rowHeight (92px × h).
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-3 w-full h-full justify-center overflow-hidden min-w-[200px]`;
+        // horizontal and bar stack a full-width title row above their icon/value/chart row (flex-col)
+        // so the title never shares space with — and never truncates against — the chart; vertical
+        // keeps a single side-by-side row (flex items-center), it has no title/chart space conflict.
+        const layoutCls = this.layout() !== 'vertical' ? 'flex flex-col gap-2' : 'flex items-center gap-3';
         return `${layoutCls} ${base}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _barHeights = computed(() => {
@@ -16057,17 +16061,17 @@ class ClxStatCardComponent {
       <!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
            row for space and never truncates. -->
       <div class="w-full">
-        <span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
       </div>
 
       <!-- Icon + value/trend + sparkline, second row -->
-      <div class="w-full flex items-center gap-3">
-        <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
+      <div class="w-full flex items-center gap-2">
+        <div class="shrink-0 w-9 h-9 rounded-lg flex items-center justify-center" [class]="_iconBg()">
           <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
         </div>
 
         <div class="flex flex-col gap-0.5 min-w-0 flex-1">
-          <span class="text-xl font-semibold text-clx-text leading-tight">
+          <span class="text-lg font-semibold text-clx-text leading-tight">
             {{ _formattedValue() }}
           </span>
           @if (_hasTrend()) {
@@ -16075,7 +16079,7 @@ class ClxStatCardComponent {
                   [color]="_trendColor()"
                   variant="light"
                   shape="pill"
-                  class="self-start gap-1 mt-0.5">
+                  class="self-start gap-1">
               <span clx-icon [name]="_trendIcon()" size="xxs"></span>
               {{ metric().trend }}
             </span>
@@ -16083,7 +16087,7 @@ class ClxStatCardComponent {
         </div>
 
         <!-- Sparkline -->
-        <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
+        <div style="flex: 0 0 56px; height: 36px; position: relative; overflow: hidden;">
           <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
                viewBox="0 0 140 64" preserveAspectRatio="none">
             <defs>
@@ -16101,19 +16105,23 @@ 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-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>
+      <!-- Title: its own full-width row, same reasoning as horizontal — never shares space with
+           the icon/value/bars row, so it never truncates in a narrow (1-column) cell. -->
+      <div class="w-full">
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
       </div>
 
-      <!-- Col derecha: barras + tendencia -->
-      <div class="shrink-0 flex flex-col items-end justify-between gap-2 self-stretch" style="width: 160px;">
+      <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>
+          <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        </div>
+
         <!-- Bar chart -->
-        <div class="flex items-end gap-1" style="height: 44px;">
+        <div class="shrink-0 flex items-end gap-1" style="height: 32px;">
           @for (h of _barHeights(); track $index) {
             <div class="w-1.5 opacity-80"
                  [class]="_iconBg()"
@@ -16121,15 +16129,15 @@ class ClxStatCardComponent {
             </div>
           }
         </div>
-        <!-- Tendencia -->
-        @if (_hasTrend()) {
-          <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
-            {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
-            <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
-            <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
-          </div>
-        }
       </div>
+
+      @if (_hasTrend()) {
+        <div class="w-full flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
+          {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
+          <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
+          <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
+        </div>
+      }
     }
 
     @if (layout() === 'vertical') {
@@ -16172,17 +16180,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <!-- Title: its own full-width row, so a long label never fights the icon/value/sparkline
            row for space and never truncates. -->
       <div class="w-full">
-        <span class="text-xs text-clx-text-muted">{{ metric().title }}</span>
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
       </div>
 
       <!-- Icon + value/trend + sparkline, second row -->
-      <div class="w-full flex items-center gap-3">
-        <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBg()">
+      <div class="w-full flex items-center gap-2">
+        <div class="shrink-0 w-9 h-9 rounded-lg flex items-center justify-center" [class]="_iconBg()">
           <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
         </div>
 
         <div class="flex flex-col gap-0.5 min-w-0 flex-1">
-          <span class="text-xl font-semibold text-clx-text leading-tight">
+          <span class="text-lg font-semibold text-clx-text leading-tight">
             {{ _formattedValue() }}
           </span>
           @if (_hasTrend()) {
@@ -16190,7 +16198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                   [color]="_trendColor()"
                   variant="light"
                   shape="pill"
-                  class="self-start gap-1 mt-0.5">
+                  class="self-start gap-1">
               <span clx-icon [name]="_trendIcon()" size="xxs"></span>
               {{ metric().trend }}
             </span>
@@ -16198,7 +16206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
 
         <!-- Sparkline -->
-        <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
+        <div style="flex: 0 0 56px; height: 36px; position: relative; overflow: hidden;">
           <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
                viewBox="0 0 140 64" preserveAspectRatio="none">
             <defs>
@@ -16216,19 +16224,23 @@ 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-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>
+      <!-- Title: its own full-width row, same reasoning as horizontal — never shares space with
+           the icon/value/bars row, so it never truncates in a narrow (1-column) cell. -->
+      <div class="w-full">
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
       </div>
 
-      <!-- Col derecha: barras + tendencia -->
-      <div class="shrink-0 flex flex-col items-end justify-between gap-2 self-stretch" style="width: 160px;">
+      <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>
+          <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        </div>
+
         <!-- Bar chart -->
-        <div class="flex items-end gap-1" style="height: 44px;">
+        <div class="shrink-0 flex items-end gap-1" style="height: 32px;">
           @for (h of _barHeights(); track $index) {
             <div class="w-1.5 opacity-80"
                  [class]="_iconBg()"
@@ -16236,15 +16248,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             </div>
           }
         </div>
-        <!-- Tendencia -->
-        @if (_hasTrend()) {
-          <div class="flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
-            {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
-            <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
-            <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
-          </div>
-        }
       </div>
+
+      @if (_hasTrend()) {
+        <div class="w-full flex items-center gap-1 text-xs text-clx-text-subtle whitespace-nowrap">
+          {{ metric().trendDirection === 'up' ? 'Increased By' : 'Decreased By' }}
+          <span class="font-semibold" [class]="_trendTextClass()">{{ metric().trend }}</span>
+          <span clx-icon [name]="_trendArrowIcon()" size="sm" [class]="_trendTextClass()"></span>
+        </div>
+      }
     }
 
     @if (layout() === 'vertical') {