codexly-ui 0.15.9 → 0.15.10

package/fesm2022/codexly-ui.mjs

@@ -15965,9 +15965,10 @@ class ClxStatCardComponent {
         // 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';
+        // 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(() => {
@@ -16140,6 +16141,28 @@ class ClxStatCardComponent {
       }
     }
 
+    @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') {
       <!-- Col izquierda: badge + valor + título -->
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">
@@ -16259,6 +16282,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       }
     }
 
+    @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') {
       <!-- Col izquierda: badge + valor + título -->
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">