codexly-ui 0.15.9 → 0.15.11

package/assets/styles/_safelist.css

@@ -21,6 +21,12 @@
 /* ring (default): ring-{c}-{s}/30 */
 @source inline("ring-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/30");
 
+/* ClxStatCardComponent's 'banner' layout: solid gradient fill built from bgBase/bgDark
+   (bg-{c}-{s} / bg-{c}-{darker 2 steps}), string-replaced to from-/to- at runtime. */
+@source inline("bg-gradient-to-br");
+@source inline("{from,to}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}");
+@source inline("from-white/80 to-white/80 from-white to-white");
+
 /* 'white' special-case tokens (WHITE_TOKENS in clx-color.types.ts) */
 @source inline("{bg,hover:bg,focus:ring,focus-within:ring,border,focus:border,focus-within:border,hover:border,border-t}-{white,black,transparent}");
 @source inline("border-white/30 border-t-white bg-white/10 bg-white/30 bg-white/80 border-white/20 border-white/50 border-white/80 text-white/60 text-white/70 ring-white/30 ring-white/40 ring-white/20 hover:bg-gray-100 text-gray-900");

package/fesm2022/codexly-ui.mjs

@@ -15955,7 +15955,6 @@ class ClxStatCardComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     _hostClass = computed(() => {
-        const border = resolveColor(this.color()).borderLight;
         const radius = resolveContainerRadius(this._themeSvc.config().borderRadius);
         // 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
@@ -15963,12 +15962,18 @@ class ClxStatCardComponent {
         // 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}`;
+        const sizing = `${radius} shadow-md p-3 w-full h-full justify-center overflow-hidden min-w-[200px]`;
+        // banner is a solid gradient fill in the chosen color (no border, no surface bg — it IS the
+        // color) so it reads as a distinct "announcement" card rather than another bordered tile.
+        const surface = this.layout() === 'banner'
+            ? `bg-gradient-to-br ${resolveColor(this.color()).bgBase.replace('bg-', 'from-')} ${resolveColor(this.color()).bgDark.replace('bg-', 'to-')}`
+            : `bg-clx-surface border ${resolveColor(this.color()).borderLight}`;
+        // horizontal, bar and corner each stack a full-width row above another (flex-col) — corner's
+        // top row (badge/icon) and bottom row (value/title) never share space either; vertical and
+        // banner are a single side-by-side row (flex items-center) with no stacking needed.
+        const stacked = this.layout() === 'horizontal' || this.layout() === 'bar' || this.layout() === 'corner';
+        const layoutCls = stacked ? 'flex flex-col gap-2' : 'flex items-center gap-3';
+        return `${layoutCls} ${surface} ${sizing}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _barHeights = computed(() => {
         const data = this.chartData();
@@ -16140,6 +16145,49 @@ class ClxStatCardComponent {
       }
     }
 
+    @if (layout() === 'banner') {
+      <!-- Solid gradient fill in the chosen color (not the subtle chip the other layouts use) —
+           icon sits in a translucent chip, title+value in white. Stands out by color, not width. -->
+      <div class="shrink-0 w-10.5 h-10.5 rounded-[11px] flex items-center justify-center bg-white/20">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
+      </div>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs text-white/75 truncate">{{ metric().title }}</p>
+        <p class="text-lg font-bold text-white leading-tight">{{ _formattedValue() }}</p>
+      </div>
+      @if (_hasTrend()) {
+        <span class="shrink-0 inline-flex items-center gap-1 text-[10.5px] font-semibold px-2 py-0.5 rounded-full bg-white/20 text-white">
+          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+          {{ metric().trend }}
+        </span>
+      }
+    }
+
+    @if (layout() === 'corner') {
+      <!-- Diagonal composition: trend badge top-left, icon top-right, value+label bottom-left. -->
+      <div class="w-full flex items-start justify-between">
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="gap-1">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        } @else {
+          <span></span>
+        }
+        <div class="shrink-0 w-8.5 h-8.5 rounded-[9px] flex items-center justify-center" [class]="_iconBg()">
+          <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
+        </div>
+      </div>
+      <div class="w-full flex flex-col gap-0.5">
+        <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
+      </div>
+    }
+
     @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 +16307,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       }
     }
 
+    @if (layout() === 'banner') {
+      <!-- Solid gradient fill in the chosen color (not the subtle chip the other layouts use) —
+           icon sits in a translucent chip, title+value in white. Stands out by color, not width. -->
+      <div class="shrink-0 w-10.5 h-10.5 rounded-[11px] flex items-center justify-center bg-white/20">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
+      </div>
+      <div class="min-w-0 flex-1">
+        <p class="text-xs text-white/75 truncate">{{ metric().title }}</p>
+        <p class="text-lg font-bold text-white leading-tight">{{ _formattedValue() }}</p>
+      </div>
+      @if (_hasTrend()) {
+        <span class="shrink-0 inline-flex items-center gap-1 text-[10.5px] font-semibold px-2 py-0.5 rounded-full bg-white/20 text-white">
+          <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+          {{ metric().trend }}
+        </span>
+      }
+    }
+
+    @if (layout() === 'corner') {
+      <!-- Diagonal composition: trend badge top-left, icon top-right, value+label bottom-left. -->
+      <div class="w-full flex items-start justify-between">
+        @if (_hasTrend()) {
+          <span clx-badge
+                [color]="_trendColor()"
+                variant="light"
+                shape="pill"
+                class="gap-1">
+            <span clx-icon [name]="_trendIcon()" size="xxs"></span>
+            {{ metric().trend }}
+          </span>
+        } @else {
+          <span></span>
+        }
+        <div class="shrink-0 w-8.5 h-8.5 rounded-[9px] flex items-center justify-center" [class]="_iconBg()">
+          <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
+        </div>
+      </div>
+      <div class="w-full flex flex-col gap-0.5">
+        <span class="text-lg font-semibold text-clx-text leading-tight">{{ _formattedValue() }}</span>
+        <span class="text-xs text-clx-text-muted leading-none">{{ metric().title }}</span>
+      </div>
+    }
+
     @if (layout() === 'vertical') {
       <!-- Col izquierda: badge + valor + título -->
       <div class="flex flex-col justify-between flex-1 min-w-0 gap-1">