@eric-emg/symphiq-components 1.2.228 → 1.2.230

package/index.d.ts

@@ -1615,7 +1615,7 @@ declare class MetricCardComponent {
     competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
     competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
     competitiveScoreBadgeClass: _angular_core.Signal<string>;
-    competitiveScoreTextClass: _angular_core.Signal<"" | "text-blue-400" | "text-blue-700" | "text-emerald-600" | "text-orange-600">;
+    competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-blue-700" | "text-blue-400" | "text-orange-600">;
     competitiveComparisonDefaultClass: _angular_core.Signal<"text-slate-300" | "text-slate-700">;
     competitiveComparisonClass: _angular_core.Signal<"text-slate-300" | "text-slate-700" | "text-emerald-600 font-semibold" | "text-orange-600 font-semibold">;
     getCompetitiveScoreIcon(): string;
@@ -1858,10 +1858,10 @@ declare class OverallAssessmentComponent {
     revenueTrendArrowPath: _angular_core.Signal<"M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" | "M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" | "M3 10h11m0 0l-4-4m4 4l-4 4">;
     lightModeTrendIconClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
     darkModeTrendIconClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendIconClass: _angular_core.Signal<"text-emerald-400" | "text-emerald-600" | "text-red-600" | "text-red-400">;
+    trendIconClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
     lightModeTrendValueClass: _angular_core.Signal<"text-emerald-600" | "text-red-600">;
     darkModeTrendValueClass: _angular_core.Signal<"text-emerald-400" | "text-red-400">;
-    trendValueClass: _angular_core.Signal<"text-emerald-400" | "text-emerald-600" | "text-red-600" | "text-red-400">;
+    trendValueClass: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
     formattedRevenueTrend: _angular_core.Signal<string>;
     formattedRevenueTarget: _angular_core.Signal<string>;
     hasRevenuePacing: _angular_core.Signal<boolean>;
@@ -3365,7 +3365,7 @@ declare class MetricExecutiveSummaryComponent {
     protected metricCardClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50" | "bg-white border border-slate-200">;
     protected metricLabelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected metricValueClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected yoyChangeClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-emerald-400" | "text-emerald-600" | "text-red-600" | "text-red-400">;
+    protected yoyChangeClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400" | "text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400">;
     protected getYoyIcon(): string;
     protected getPacingValueClasses(): string;
     protected getHealthValueClasses(): string;
@@ -3650,11 +3650,11 @@ declare class ConfidenceLevelCardComponent implements OnInit, OnDestroy {
     protected gradeBadgeContainerClasses: _angular_core.Signal<string>;
     protected glowEffectClasses: _angular_core.Signal<"bg-emerald-500" | "bg-blue-500" | "bg-orange-500" | "bg-red-500">;
     protected gradeBadgeClasses: _angular_core.Signal<"bg-gradient-to-br from-emerald-500/30 to-teal-500/30 border-2 border-emerald-500/50 shadow-[0_0_20px_rgba(16,185,129,0.3)]" | "bg-gradient-to-br from-emerald-50 to-teal-50 border-2 border-emerald-300/50 shadow-[0_0_20px_rgba(16,185,129,0.2)]" | "bg-gradient-to-br from-blue-500/30 to-cyan-500/30 border-2 border-blue-500/50 shadow-[0_0_20px_rgba(59,130,246,0.3)]" | "bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-300/50 shadow-[0_0_20px_rgba(59,130,246,0.2)]" | "bg-gradient-to-br from-orange-500/30 to-amber-500/30 border-2 border-orange-500/50 shadow-[0_0_20px_rgba(249,115,22,0.3)]" | "bg-gradient-to-br from-orange-50 to-amber-50 border-2 border-orange-300/50 shadow-[0_0_20px_rgba(249,115,22,0.2)]" | "bg-gradient-to-br from-red-500/30 to-rose-500/30 border-2 border-red-500/50 shadow-[0_0_20px_rgba(239,68,68,0.3)]" | "bg-gradient-to-br from-red-50 to-rose-50 border-2 border-red-300/50 shadow-[0_0_20px_rgba(239,68,68,0.2)]">;
-    protected gradeLabelClasses: _angular_core.Signal<"text-blue-300" | "text-blue-700" | "text-emerald-300" | "text-emerald-700" | "text-red-700" | "text-orange-700" | "text-red-300" | "text-orange-300">;
+    protected gradeLabelClasses: _angular_core.Signal<"text-emerald-700" | "text-blue-700" | "text-red-700" | "text-orange-700" | "text-red-300" | "text-blue-300" | "text-emerald-300" | "text-orange-300">;
     protected gradeValueClasses: _angular_core.Signal<"bg-gradient-to-b from-emerald-300 to-emerald-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-emerald-600 to-emerald-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-blue-300 to-blue-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-blue-600 to-blue-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-orange-300 to-orange-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-orange-600 to-orange-800 bg-clip-text text-transparent" | "bg-gradient-to-b from-red-300 to-red-500 bg-clip-text text-transparent" | "bg-gradient-to-b from-red-600 to-red-800 bg-clip-text text-transparent">;
     protected descriptionClasses: _angular_core.Signal<"text-slate-300" | "text-slate-700">;
     protected progressLabelClasses: _angular_core.Signal<"text-slate-300" | "text-slate-700">;
-    protected progressValueClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600" | "text-emerald-400" | "text-emerald-600" | "text-red-600" | "text-red-400" | "text-orange-600" | "text-orange-400">;
+    protected progressValueClasses: _angular_core.Signal<"text-emerald-600" | "text-emerald-400" | "text-red-600" | "text-red-400" | "text-blue-400" | "text-orange-600" | "text-orange-400" | "text-blue-600">;
     protected progressTrackClasses: _angular_core.Signal<"bg-slate-700/50 shadow-inner" | "bg-slate-200 shadow-inner">;
     protected progressBarClasses: _angular_core.Signal<"rounded-full overflow-hidden bg-gradient-to-r from-emerald-500 via-teal-500 to-emerald-600" | "rounded-full overflow-hidden bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-600" | "rounded-full overflow-hidden bg-gradient-to-r from-orange-500 via-amber-500 to-orange-600" | "rounded-full overflow-hidden bg-gradient-to-r from-red-500 via-rose-500 to-red-600">;
     protected shimmerClasses: _angular_core.Signal<string>;
@@ -3741,7 +3741,7 @@ declare class IndeterminateSpinnerComponent {
     circleRadius: _angular_core.Signal<16 | 36 | 26>;
     svgCircleRadius: _angular_core.Signal<number>;
     strokeWidth: _angular_core.Signal<2 | 3 | 2.5>;
-    dotSize: _angular_core.Signal<10 | 5 | 7>;
+    dotSize: _angular_core.Signal<5 | 10 | 7>;
     containerClasses: _angular_core.Signal<{
         'w-10 h-10': boolean;
         'w-16 h-16': boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eric-emg/symphiq-components",
-  "version": "1.2.228",
+  "version": "1.2.230",
   "description": "A comprehensive Angular library for component dashboards with performance visualization and metrics analysis",
   "author": "Your Organization",
   "license": "MIT",

package/styles.css

@@ -431,12 +431,6 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .-top-0\.5 {
-    top: calc(var(--spacing) * -0.5);
-  }
-  .-top-1 {
-    top: calc(var(--spacing) * -1);
-  }
   .-top-20 {
     top: calc(var(--spacing) * -20);
   }
@@ -500,9 +494,6 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1\.5 {
-    left: calc(var(--spacing) * 1.5);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -512,9 +503,6 @@
   .left-1\/4 {
     left: calc(1/4 * 100%);
   }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
@@ -605,6 +593,12 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-0\.5 {
+    margin-block: calc(var(--spacing) * -0.5);
+  }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
   .my-1\.5 {
     margin-block: calc(var(--spacing) * 1.5);
   }
@@ -662,6 +656,9 @@
   .mt-\[16px\] {
     margin-top: 16px;
   }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -1253,6 +1250,9 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1539,21 +1539,12 @@
   .border-amber-300 {
     border-color: var(--color-amber-300);
   }
-  .border-amber-400\/50 {
-    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
-    }
-  }
   .border-amber-400\/60 {
     border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 60%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
     }
   }
-  .border-amber-500 {
-    border-color: var(--color-amber-500);
-  }
   .border-amber-500\/20 {
     border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1731,12 +1722,6 @@
   .border-emerald-400 {
     border-color: var(--color-emerald-400);
   }
-  .border-emerald-400\/50 {
-    border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-emerald-400) 50%, transparent);
-    }
-  }
   .border-emerald-500 {
     border-color: var(--color-emerald-500);
   }
@@ -1923,12 +1908,6 @@
       border-color: color-mix(in oklab, var(--color-purple-400) 30%, transparent);
     }
   }
-  .border-purple-400\/50 {
-    border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-purple-400) 50%, transparent);
-    }
-  }
   .border-purple-500 {
     border-color: var(--color-purple-500);
   }
@@ -2034,12 +2013,6 @@
   .border-rose-400 {
     border-color: var(--color-rose-400);
   }
-  .border-rose-400\/50 {
-    border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-rose-400) 50%, transparent);
-    }
-  }
   .border-rose-500 {
     border-color: var(--color-rose-500);
   }
@@ -2466,12 +2439,6 @@
       background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
     }
   }
-  .bg-amber-500\/95 {
-    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 95%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-amber-500) 95%, transparent);
-    }
-  }
   .bg-amber-600 {
     background-color: var(--color-amber-600);
   }
@@ -2688,12 +2655,6 @@
       background-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
     }
   }
-  .bg-emerald-500\/95 {
-    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 95%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-emerald-500) 95%, transparent);
-    }
-  }
   .bg-emerald-600 {
     background-color: var(--color-emerald-600);
   }
@@ -2964,15 +2925,6 @@
       background-color: color-mix(in oklab, var(--color-purple-500) 40%, transparent);
     }
   }
-  .bg-purple-500\/95 {
-    background-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 95%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-purple-500) 95%, transparent);
-    }
-  }
-  .bg-purple-600 {
-    background-color: var(--color-purple-600);
-  }
   .bg-purple-600\/80 {
     background-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3102,15 +3054,6 @@
       background-color: color-mix(in oklab, var(--color-rose-500) 20%, transparent);
     }
   }
-  .bg-rose-500\/95 {
-    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 95%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-rose-500) 95%, transparent);
-    }
-  }
-  .bg-rose-600 {
-    background-color: var(--color-rose-600);
-  }
   .bg-slate-50 {
     background-color: var(--color-slate-50);
   }
@@ -5253,9 +5196,6 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
-  .pt-2\.5 {
-    padding-top: calc(var(--spacing) * 2.5);
-  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -5982,18 +5922,6 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-amber-500\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-amber-600\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .shadow-blue-200\/50 {
     --tw-shadow-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -6090,30 +6018,12 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-emerald-500\/40 {
-    --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .shadow-emerald-500\/50 {
     --tw-shadow-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-emerald-600\/40 {
-    --tw-shadow-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-600) 40%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-emerald-600\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .shadow-orange-500\/20 {
     --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -6144,42 +6054,6 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
-  .shadow-purple-500\/40 {
-    --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-purple-500\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-purple-600\/40 {
-    --tw-shadow-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-600) 40%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-purple-600\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-purple-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-rose-500\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
-  .shadow-rose-600\/50 {
-    --tw-shadow-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-rose-600) 50%, transparent) var(--tw-shadow-alpha), transparent);
-    }
-  }
   .shadow-slate-200\/50 {
     --tw-shadow-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {