codexly-ui 0.15.8 → 0.15.10

package/fesm2022/codexly-ui.mjs

@@ -15957,15 +15957,18 @@ class ClxStatCardComponent {
     _hostClass = computed(() => {
         const border = resolveColor(this.color()).borderLight;
         const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
-        // 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';
+        // 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 and
+        // banner are both a single side-by-side row (flex items-center) with no title/chart conflict.
+        const stacked = this.layout() === 'horizontal' || this.layout() === 'bar';
+        const layoutCls = stacked ? 'flex flex-col gap-2' : 'flex items-center gap-3';
         return `${layoutCls} ${base}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _barHeights = computed(() => {
@@ -16059,17 +16062,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()) {
@@ -16077,7 +16080,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>
@@ -16085,7 +16088,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>
@@ -16103,19 +16106,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()"
@@ -16123,15 +16130,37 @@ 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() === 'banner') {
+      <!-- Full-width row: icon chip left, title+value stacked right. No sparkline/bars — meant to
+           read as a flat announcement strip rather than a metric card. -->
+      <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBgSubtle()">
+        <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+      </div>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs text-clx-text-muted truncate">{{ metric().title }}</p>
+        <p class="text-xl font-bold text-clx-text leading-tight">{{ _formattedValue() }}</p>
+      </div>
+      @if (_hasTrend()) {
+        <span clx-badge
+              [color]="_trendColor()"
+              variant="light"
+              shape="pill"
+              class="shrink-0 gap-1">
+          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+          {{ metric().trend }}
+        </span>
+      }
     }
 
     @if (layout() === 'vertical') {
@@ -16174,17 +16203,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()) {
@@ -16192,7 +16221,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>
@@ -16200,7 +16229,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>
@@ -16218,19 +16247,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()"
@@ -16238,15 +16271,37 @@ 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() === 'banner') {
+      <!-- Full-width row: icon chip left, title+value stacked right. No sparkline/bars — meant to
+           read as a flat announcement strip rather than a metric card. -->
+      <div class="shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" [class]="_iconBgSubtle()">
+        <span clx-icon [name]="metric().icon" size="sm" [class]="_iconTextBase()"></span>
+      </div>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs text-clx-text-muted truncate">{{ metric().title }}</p>
+        <p class="text-xl font-bold text-clx-text leading-tight">{{ _formattedValue() }}</p>
+      </div>
+      @if (_hasTrend()) {
+        <span clx-badge
+              [color]="_trendColor()"
+              variant="light"
+              shape="pill"
+              class="shrink-0 gap-1">
+          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+          {{ metric().trend }}
+        </span>
+      }
     }
 
     @if (layout() === 'vertical') {