codexly-ui 0.15.4 → 0.15.5

package/fesm2022/codexly-ui.mjs

@@ -15957,8 +15957,8 @@ 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-5 w-full overflow-hidden min-w-[260px]`;
-        return `flex items-center gap-4 ${base}`;
+        const base = `bg-clx-surface ${radius} shadow-md border ${border} p-4 w-full overflow-hidden min-w-[200px]`;
+        return `flex items-center gap-3 ${base}`;
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     _barHeights = computed(() => {
         const data = this.chartData();
@@ -16049,14 +16049,14 @@ class ClxStatCardComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxStatCardComponent, isStandalone: true, selector: "clx-stat-card", inputs: { metric: { classPropertyName: "metric", publicName: "metric", isSignal: true, isRequired: true, transformFunction: null }, chartData: { classPropertyName: "chartData", publicName: "chartData", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, ngImport: i0, template: `
     @if (layout() === 'horizontal') {
       <!-- Icon -->
-      <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-lg flex items-center justify-center" [class]="_iconBg()">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
       </div>
 
       <!-- Text block -->
-      <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-clx-text leading-tight">
+      <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+        <span class="text-xs text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
         @if (_hasTrend()) {
@@ -16072,7 +16072,7 @@ class ClxStatCardComponent {
       </div>
 
       <!-- Sparkline -->
-      <div style="flex: 0 0 112px; height: 64px; position: relative; overflow: hidden;">
+      <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
         <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
              viewBox="0 0 140 64" preserveAspectRatio="none">
           <defs>
@@ -16158,14 +16158,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     template: `
     @if (layout() === 'horizontal') {
       <!-- Icon -->
-      <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-lg flex items-center justify-center" [class]="_iconBg()">
+        <span clx-icon [name]="metric().icon" size="sm" class="text-white"></span>
       </div>
 
       <!-- Text block -->
-      <div class="flex flex-col gap-1 min-w-0 flex-1">
-        <span class="text-sm text-clx-text-muted truncate">{{ metric().title }}</span>
-        <span class="text-2xl font-semibold text-clx-text leading-tight">
+      <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+        <span class="text-xs text-clx-text-muted truncate">{{ metric().title }}</span>
+        <span class="text-xl font-semibold text-clx-text leading-tight">
           {{ _formattedValue() }}
         </span>
         @if (_hasTrend()) {
@@ -16181,7 +16181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       </div>
 
       <!-- Sparkline -->
-      <div style="flex: 0 0 112px; height: 64px; position: relative; overflow: hidden;">
+      <div style="flex: 0 0 64px; height: 48px; position: relative; overflow: hidden;">
         <svg style="position: absolute; inset: 0; width: 100%; height: 100%;"
              viewBox="0 0 140 64" preserveAspectRatio="none">
           <defs>