@eric-emg/symphiq-components 1.3.49 → 1.3.51

package/package.json

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

package/styles.css

@@ -124,6 +124,7 @@
     --color-violet-600: oklch(54.1% 0.281 293.009);
     --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-violet-800: oklch(43.2% 0.232 292.759);
+    --color-violet-900: oklch(38% 0.189 293.745);
     --color-purple-50: oklch(97.7% 0.014 308.299);
     --color-purple-100: oklch(94.6% 0.033 307.174);
     --color-purple-200: oklch(90.2% 0.063 306.703);
@@ -466,9 +467,6 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .top-5 {
-    top: calc(var(--spacing) * 5);
-  }
   .top-\[var\(--header-height\)\] {
     top: var(--header-height);
   }
@@ -2481,6 +2479,12 @@
       border-color: color-mix(in oklab, var(--color-violet-500) 70%, transparent);
     }
   }
+  .border-violet-700\/50 {
+    border-color: color-mix(in srgb, oklch(49.1% 0.27 292.581) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-violet-700) 50%, transparent);
+    }
+  }
   .border-yellow-200 {
     border-color: var(--color-yellow-200);
   }
@@ -3846,6 +3850,9 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-violet-50 {
+    background-color: var(--color-violet-50);
+  }
   .bg-violet-100 {
     background-color: var(--color-violet-100);
   }
@@ -3855,6 +3862,12 @@
       background-color: color-mix(in oklab, var(--color-violet-500) 20%, transparent);
     }
   }
+  .bg-violet-900\/30 {
+    background-color: color-mix(in srgb, oklch(38% 0.189 293.745) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-violet-900) 30%, transparent);
+    }
+  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -6251,9 +6264,6 @@
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
   .pl-12 {
     padding-left: calc(var(--spacing) * 12);
   }
@@ -9061,6 +9071,13 @@
       }
     }
   }
+  .hover\:bg-violet-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-violet-100);
+      }
+    }
+  }
   .hover\:bg-violet-500\/10 {
     &:hover {
       @media (hover: hover) {

package/types/symphiq-components.d.ts

@@ -1135,7 +1135,7 @@ declare class ModalComponent {
     private animatedTrendValues;
     private animationFrames;
     isOpen: _angular_core.Signal<boolean>;
-    modalType: _angular_core.Signal<"insight" | "metric" | "chart" | "insights-list" | "goal-insights-list" | "goal-business-insights-list" | "business-insight-detail" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | "funnel-strengths-list" | "funnel-weaknesses-list" | "funnel-strength-detail" | "funnel-weakness-detail" | null>;
+    modalType: _angular_core.Signal<"metric" | "insight" | "chart" | "insights-list" | "goal-insights-list" | "goal-business-insights-list" | "business-insight-detail" | "metrics-list" | "charts-list" | "recommendations-list" | "competitive-analysis" | "funnel-strengths-list" | "funnel-weaknesses-list" | "funnel-strength-detail" | "funnel-weakness-detail" | null>;
     charts: _angular_core.Signal<AiChartInterface[]>;
     modalKey: _angular_core.Signal<number>;
     insightData: _angular_core.Signal<InsightBlockInterface | null>;
@@ -1154,7 +1154,7 @@ declare class ModalComponent {
         description: string;
         icon: string;
     } | null>;
-    metricsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    metricsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     metricsListMetrics: _angular_core.Signal<PerformanceMetricInterface[]>;
     metricsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1162,7 +1162,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    chartsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    chartsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     chartsListCharts: _angular_core.Signal<AiChartInterface[]>;
     chartsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1170,7 +1170,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    recommendationsListData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    recommendationsListData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     recommendationsListRecommendations: _angular_core.Signal<string[]>;
     recommendationsListInsightContext: _angular_core.Signal<{
         title: string;
@@ -1178,7 +1178,7 @@ declare class ModalComponent {
         businessContext: string;
         priority: number;
     } | null>;
-    competitiveAnalysisData: _angular_core.Signal<PerformanceMetricInterface | AiChartInterface | InsightBlockInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | (PerformanceMetricInterface | InsightBlockInterface)[] | null>;
+    competitiveAnalysisData: _angular_core.Signal<InsightBlockInterface | PerformanceMetricInterface | FunnelStrengthsListModalData | FunnelWeaknessesListModalData | FunnelStrengthDetailModalData | FunnelWeaknessDetailModalData | AiChartInterface | (InsightBlockInterface | PerformanceMetricInterface)[] | null>;
     competitiveAnalysisContext: _angular_core.Signal<{
         title: string;
         description: string;
@@ -2972,7 +2972,7 @@ declare class PacingStatusBadgeComponent implements OnDestroy {
     private animateValue;
     protected displayInfo: _angular_core.Signal<PacingDisplayInfo>;
     protected containerClasses: _angular_core.Signal<string>;
-    protected targetRotation: _angular_core.Signal<0 | 1 | -1>;
+    protected targetRotation: _angular_core.Signal<1 | 0 | -1>;
     protected rotationStyle: _angular_core.Signal<string>;
     protected fullBadgeRotationStyle: _angular_core.Signal<string>;
     protected containerSizeClasses: _angular_core.Signal<"inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0 pl-1.5" | "inline-flex flex-row items-center rounded-xl border-2 overflow-visible transition-transform hover:rotate-0 pl-2">;
@@ -4392,7 +4392,7 @@ declare class SymphiqProfileAnalysisFocusAreaDashboardComponent implements OnIni
     protected progressCardClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/40 border-slate-700/50">;
     protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
     protected sectionCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
-    protected sectionIconClasses: _angular_core.Signal<"bg-blue-50 text-blue-600" | "bg-blue-500/20 text-blue-400">;
+    protected sectionIconClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-50 text-blue-600">;
     protected sectionDescriptionClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     private formatGradeInText;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SymphiqProfileAnalysisFocusAreaDashboardComponent, never>;
@@ -4575,7 +4575,6 @@ declare class SymphiqProfileAnalysisUnifiedDashboardComponent implements OnChang
     protected getGoalCardClasses(goal: UnifiedGoalInterface): string;
     protected getPriorityBadgeClasses(priority: string | undefined): string;
     protected getSourceBadgeClasses(type: ProfileAnalysisTypeEnum | undefined): string;
-    protected onTimelinePhaseClick(phase: TimelinePhaseInterface): void;
     protected getTimelineNodeClasses(priority: string | undefined): string;
     protected getTimelineNodeInnerClasses(priority: string | undefined): string;
     protected getTimelineCardClasses(priority: string | undefined): string;
@@ -4686,7 +4685,7 @@ declare class SymphiqProfileMetricsAnalysesDashboardComponent {
     handleSearchClick(): void;
     handleCloseSearchModal(): void;
     protected welcomeBannerContainerClasses: _angular_core.Signal<"bg-white border-slate-200" | "bg-slate-800/50 border-slate-700/50">;
-    protected welcomeBannerIconClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-100 text-blue-600">;
+    protected welcomeBannerIconClasses: _angular_core.Signal<"bg-blue-100 text-blue-600" | "bg-blue-500/20 text-blue-400">;
     protected welcomeBannerTitleClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
     protected welcomeBannerTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     private getIconForMetric;
@@ -5762,7 +5761,7 @@ declare class ConfidenceLevelCardComponent implements OnInit, OnDestroy {
     protected currentStepCalloutClasses: _angular_core.Signal<"bg-slate-100 text-slate-700 border border-slate-200" | "bg-slate-700/50 text-slate-300 border border-slate-600/50">;
     protected currentStepBadgeClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-emerald-100 text-emerald-700" | "bg-emerald-500/20 text-emerald-400" | "bg-blue-100 text-blue-700" | "bg-orange-100 text-orange-700" | "bg-orange-500/20 text-orange-400" | "bg-red-100 text-red-700" | "bg-red-500/20 text-red-400">;
     protected nextDashboardCalloutClasses: _angular_core.Signal<"bg-slate-800/30 text-slate-400 border border-slate-700/30" | "bg-slate-50 text-slate-500 border border-slate-100">;
-    protected nextDashboardBadgeClasses: _angular_core.Signal<"bg-blue-50 text-blue-600" | "bg-emerald-500/10 text-emerald-500" | "bg-emerald-50 text-emerald-600" | "bg-blue-500/10 text-blue-500" | "bg-orange-500/10 text-orange-500" | "bg-orange-50 text-orange-600" | "bg-red-500/10 text-red-500" | "bg-red-50 text-red-600">;
+    protected nextDashboardBadgeClasses: _angular_core.Signal<"bg-emerald-500/10 text-emerald-500" | "bg-emerald-50 text-emerald-600" | "bg-blue-500/10 text-blue-500" | "bg-blue-50 text-blue-600" | "bg-orange-500/10 text-orange-500" | "bg-orange-50 text-orange-600" | "bg-red-500/10 text-red-500" | "bg-red-50 text-red-600">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfidenceLevelCardComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfidenceLevelCardComponent, "symphiq-confidence-level-card", never, { "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "currentStepId": { "alias": "currentStepId"; "required": false; "isSignal": true; }; "focusAreaDetails": { "alias": "focusAreaDetails"; "required": false; "isSignal": true; }; "currentFocusAreaDomain": { "alias": "currentFocusAreaDomain"; "required": false; "isSignal": true; }; "currentMetric": { "alias": "currentMetric"; "required": false; "isSignal": true; }; "targets": { "alias": "targets"; "required": false; "isSignal": true; }; "isCurrentStepComplete": { "alias": "isCurrentStepComplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -5843,8 +5842,8 @@ declare class IndeterminateSpinnerComponent {
     svgSize: _angular_core.Signal<40 | 80 | 60>;
     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>;
+    strokeWidth: _angular_core.Signal<3 | 2 | 2.5>;
+    dotSize: _angular_core.Signal<5 | 10 | 7>;
     containerClasses: _angular_core.Signal<{
         'w-10 h-10': boolean;
         'w-[60px] h-[60px]': boolean;
@@ -5908,7 +5907,7 @@ declare class ChartContainerComponent {
     titleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
     descriptionClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     iconClass: _angular_core.Signal<"text-slate-400 group-hover:text-blue-500" | "text-slate-500 group-hover:text-blue-400">;
-    chartIconClass: _angular_core.Signal<"bg-blue-500/20 text-blue-400" | "bg-blue-100 text-blue-600">;
+    chartIconClass: _angular_core.Signal<"bg-blue-100 text-blue-600" | "bg-blue-500/20 text-blue-400">;
     expandButtonClass: _angular_core.Signal<"bg-blue-100 text-blue-600 hover:bg-blue-200" | "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30">;
     closeButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700/50 text-slate-400 hover:bg-slate-600/50">;
     isCollapsible: _angular_core.Signal<boolean>;