@eric-emg/symphiq-components 1.2.132 → 1.2.133

package/index.d.ts

@@ -1286,10 +1286,10 @@ declare class SymphiqFunnelAnalysisDashboardComponent implements AfterViewInit {
      */
     private chartsById;
     headerClass: _angular_core.Signal<string>;
-    headerTitleClass: _angular_core.Signal<"text-white" | "text-slate-900">;
-    headerSubtitleClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    headerTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
+    headerSubtitleClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     metaLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-500">;
-    sectionTitleClass: _angular_core.Signal<"text-white" | "text-slate-900">;
+    sectionTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
     selectClass: _angular_core.Signal<"bg-white text-slate-900 border-slate-300 hover:border-blue-400 transition-all duration-200" | "bg-slate-700 text-white border-slate-600 hover:border-slate-500 transition-all duration-200">;
     sortButtonClass: _angular_core.Signal<"bg-white text-slate-900 border border-slate-300 hover:bg-blue-50 hover:border-blue-400 hover:text-blue-600 transition-all duration-200" | "bg-slate-700 text-white border border-slate-600 hover:bg-slate-600 hover:border-slate-500 transition-all duration-200">;
     formattedGeneratedDate: _angular_core.Signal<string | null>;
@@ -1452,9 +1452,9 @@ declare class MetricCardComponent {
     competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
     competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
     competitiveScoreBadgeClass: _angular_core.Signal<string>;
-    competitiveScoreTextClass: _angular_core.Signal<"text-blue-700" | "text-emerald-600" | "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">;
+    competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-blue-700" | "text-blue-400" | "text-orange-600">;
+    competitiveComparisonDefaultClass: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    competitiveComparisonClass: _angular_core.Signal<"text-slate-700" | "text-slate-300" | "text-emerald-600 font-semibold" | "text-orange-600 font-semibold">;
     getCompetitiveScoreIcon(): string;
     getCompetitiveScoreLabel(): string;
     getCompetitiveScoreLabelFull(): string;
@@ -1695,10 +1695,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-400" | "text-red-600">;
+    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-400" | "text-red-600">;
+    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>;
@@ -2407,7 +2407,7 @@ declare class BusinessAnalysisModalComponent implements OnInit {
     navigationStack: _angular_core.WritableSignal<ItemDetailModalData[]>;
     itemDetailData: _angular_core.Signal<ItemDetailModalData | null>;
     previousState: _angular_core.WritableSignal<any>;
-    visualizationType: _angular_core.Signal<"circular-progress" | "horizontal-bar" | "napkin-visual" | "custom" | null>;
+    visualizationType: _angular_core.Signal<"horizontal-bar" | "circular-progress" | "napkin-visual" | "custom" | null>;
     horizontalBarData: _angular_core.Signal<{
         percentage: number;
         label: string;
@@ -2760,32 +2760,32 @@ declare class MetricExecutiveSummaryComponent {
     protected isDark: _angular_core.Signal<boolean>;
     protected bannerClasses: _angular_core.Signal<"bg-gradient-to-br from-slate-800/50 to-slate-800/30 border border-slate-700/50" | "bg-gradient-to-br from-white to-slate-50/50 border border-slate-200">;
     protected titleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected textClasses: _angular_core.Signal<"text-slate-300" | "text-slate-700">;
+    protected textClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected iconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
     protected healthBadgeClasses: _angular_core.Signal<string>;
     protected pacingBadgeClasses: _angular_core.Signal<string>;
     protected metricCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
-    protected metricLabelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    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-400" | "text-slate-600" | "text-emerald-400" | "text-emerald-600" | "text-red-400" | "text-red-600">;
+    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;
     protected narrativeClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-600/20">;
     protected narrativeTitleClasses: _angular_core.Signal<"text-slate-200" | "text-slate-800">;
-    protected narrativeTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected narrativeTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected sectionTitleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
     protected priorityCardClasses: _angular_core.Signal<"bg-slate-800/50 border border-slate-700/50 hover:border-slate-600/70" | "bg-white border border-slate-200 hover:border-slate-300">;
     protected priorityNumberClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-300" | "bg-blue-100 text-blue-800">;
     protected priorityTitleClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected priorityTextClasses: _angular_core.Signal<"text-slate-300" | "text-slate-700">;
+    protected priorityTextClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
     protected impactBoxClasses: _angular_core.Signal<"bg-slate-800/30 border border-slate-700/30" | "bg-slate-50/50 border border-slate-200">;
     protected impactLabelClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
-    protected impactTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected impactTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected quickWinCardClasses: _angular_core.Signal<"bg-white border border-slate-200" | "bg-slate-800/50 border border-slate-700/50">;
     protected numberBadgeClasses: _angular_core.Signal<"bg-blue-500/20 text-blue-300" | "bg-blue-100 text-blue-800">;
     protected quickWinTextClasses: _angular_core.Signal<"text-slate-900" | "text-slate-100">;
-    protected metaTextClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected metaTextClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected getEffortBadgeClasses(effort: string | undefined): string;
     protected getImpactBadgeClasses(impact: string | undefined): string;
     protected formatLabel(str: string | undefined): string;
@@ -2946,18 +2946,18 @@ declare class SearchModalComponent {
     clearButtonClass: _angular_core.Signal<"bg-slate-100 text-slate-600 hover:bg-slate-200" | "bg-slate-700 text-slate-300 hover:bg-slate-600">;
     closeButtonClass: _angular_core.Signal<"text-slate-400 hover:text-slate-600 hover:bg-slate-100" | "text-slate-500 hover:text-slate-300 hover:bg-slate-700">;
     resultsContainerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
-    resultTitleClass: _angular_core.Signal<"text-white" | "text-slate-900">;
-    resultDescClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    resultTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
+    resultDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     breadcrumbClass: _angular_core.Signal<string>;
-    typeBadgeClass: _angular_core.Signal<"bg-slate-700 text-slate-300" | "bg-slate-100 text-slate-600">;
+    typeBadgeClass: _angular_core.Signal<"bg-slate-100 text-slate-600" | "bg-slate-700 text-slate-300">;
     arrowClass: _angular_core.Signal<"text-slate-400" | "text-slate-500">;
     emptyStateClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
     emptyIconClass: _angular_core.Signal<"text-slate-600" | "text-slate-300">;
-    emptyTitleClass: _angular_core.Signal<"text-white" | "text-slate-900">;
-    emptyDescClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    emptyTitleClass: _angular_core.Signal<"text-slate-900" | "text-white">;
+    emptyDescClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     shortcutsClass: _angular_core.Signal<"bg-slate-900/50 border-slate-700" | "bg-slate-50 border-slate-200">;
     kbdClass: _angular_core.Signal<"bg-white border border-slate-300 text-slate-700 shadow-sm" | "bg-slate-700 border border-slate-600 text-slate-300">;
-    shortcutTextClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    shortcutTextClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SearchModalComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SearchModalComponent, "symphiq-search-modal", never, { "isLightMode": { "alias": "isLightMode"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "searchQuery": { "alias": "searchQuery"; "required": false; "isSignal": true; }; "results": { "alias": "results"; "required": false; "isSignal": true; }; "hasResults": { "alias": "hasResults"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "searchChange": "searchChange"; "resultSelected": "resultSelected"; "close": "close"; }, never, never, true, never>;
 }
@@ -2977,7 +2977,7 @@ declare class GradeBadgeComponent {
         explanation: string;
     }>;
     private formatGrade;
-    badgeLabelClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    badgeLabelClass: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     gradeBadgeClass: _angular_core.Signal<string>;
     private getGradeBadgeClassLight;
     private getGradeBadgeClassDark;
@@ -3052,15 +3052,15 @@ declare class ConfidenceLevelCardComponent implements OnInit, OnDestroy {
     protected cardContainerClasses: _angular_core.Signal<"border-2 shadow-2xl bg-slate-800/60 border-slate-700/50 backdrop-blur-xl" | "border-2 shadow-2xl bg-white/90 border-slate-200/50 backdrop-blur-xl shadow-slate-200/50">;
     protected backgroundOverlayClasses: _angular_core.Signal<"bg-gradient-to-br from-emerald-500/30 via-teal-500/20 to-emerald-500/30" | "bg-gradient-to-br from-emerald-400/20 via-teal-400/10 to-emerald-400/20" | "bg-gradient-to-br from-blue-500/30 via-cyan-500/20 to-blue-500/30" | "bg-gradient-to-br from-blue-400/20 via-cyan-400/10 to-blue-400/20" | "bg-gradient-to-br from-orange-500/30 via-amber-500/20 to-orange-500/30" | "bg-gradient-to-br from-orange-400/20 via-amber-400/10 to-orange-400/20" | "bg-gradient-to-br from-red-500/30 via-rose-500/20 to-red-500/30" | "bg-gradient-to-br from-red-400/20 via-rose-400/10 to-red-400/20">;
     protected titleClasses: _angular_core.Signal<"text-white" | "bg-gradient-to-r from-slate-700 to-slate-900 bg-clip-text text-transparent">;
-    protected subtitleClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected subtitleClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     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-emerald-300" | "text-emerald-700" | "text-blue-300" | "text-blue-700" | "text-orange-300" | "text-orange-700" | "text-red-300" | "text-red-700">;
+    protected gradeLabelClasses: _angular_core.Signal<"text-emerald-700" | "text-blue-700" | "text-red-700" | "text-orange-700" | "text-red-300" | "text-emerald-300" | "text-blue-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-emerald-400" | "text-emerald-600" | "text-blue-400" | "text-blue-600" | "text-orange-400" | "text-orange-600" | "text-red-400" | "text-red-600">;
+    protected descriptionClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    protected progressLabelClasses: _angular_core.Signal<"text-slate-700" | "text-slate-300">;
+    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>;
@@ -3082,12 +3082,12 @@ declare class RelatedContentSidebarComponent {
     protected funnelInsightsCount: _angular_core.Signal<number>;
     protected funnelMetricsCount: _angular_core.Signal<number>;
     protected businessInsightsCount: _angular_core.Signal<number>;
-    protected headerClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected headerClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected buttonClasses: _angular_core.Signal<"bg-slate-50 border-slate-200 hover:border-blue-500/50 hover:bg-slate-100" | "bg-slate-800/50 border-slate-700 hover:border-blue-500/50 hover:bg-slate-700/50">;
     protected iconBgClasses: _angular_core.Signal<"bg-blue-100 text-blue-600" | "bg-blue-900/30 text-blue-400">;
     protected iconClasses: _angular_core.Signal<"text-blue-400" | "text-blue-600">;
-    protected countClasses: _angular_core.Signal<"text-white" | "text-slate-900">;
-    protected labelClasses: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    protected countClasses: _angular_core.Signal<"text-slate-900" | "text-white">;
+    protected labelClasses: _angular_core.Signal<"text-slate-600" | "text-slate-400">;
     protected chevronClasses: _angular_core.Signal<"text-slate-500 group-hover:text-blue-400" | "text-slate-400 group-hover:text-blue-600">;
     protected onFunnelInsightsClick(): void;
     protected onFunnelMetricsClick(): void;
@@ -3109,8 +3109,8 @@ declare class ChartContainerComponent {
     protected ChartTypeEnum: typeof ChartTypeEnum;
     containerClass: _angular_core.Signal<"bg-white border-slate-200 hover:border-blue-300 hover:shadow-blue-100/50" | "bg-slate-800 border-slate-700 hover:border-slate-600 hover:shadow-slate-900/50">;
     headerClass: _angular_core.Signal<"border-slate-200" | "border-slate-700">;
-    titleClass: _angular_core.Signal<"text-white" | "text-slate-900">;
-    descriptionClass: _angular_core.Signal<"text-slate-400" | "text-slate-600">;
+    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-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">;
@@ -3424,7 +3424,7 @@ declare class FocusAreaDetailCardComponent {
     protected isActuallyExpanded: _angular_core.Signal<boolean>;
     protected forceExpandedValue: _angular_core.Signal<boolean>;
     protected shouldAnimateExpand: _angular_core.Signal<boolean>;
-    protected iconSize: _angular_core.Signal<"w-7 h-7" | "w-6 h-6">;
+    protected iconSize: _angular_core.Signal<"w-6 h-6" | "w-7 h-7">;
     protected relatedRecommendations: _angular_core.Signal<_jebgem_model.ProfileAnalysisRecommendationInterface[]>;
     protected statusLabel: _angular_core.Signal<string>;
     protected statusBadgeType: _angular_core.Signal<BadgeType>;
@@ -3489,7 +3489,7 @@ declare class CompetitorAnalysisCardComponent {
     protected isActuallyExpanded: _angular_core.Signal<boolean>;
     protected isExpandedMode: _angular_core.Signal<boolean>;
     protected shouldAnimateExpand: _angular_core.Signal<boolean>;
-    protected iconSize: _angular_core.Signal<"w-7 h-7" | "w-6 h-6">;
+    protected iconSize: _angular_core.Signal<"w-6 h-6" | "w-7 h-7">;
     protected animationType: _angular_core.Signal<"none" | "slide-up">;
     constructor();
     protected hasCompanyInfo: _angular_core.Signal<boolean>;
@@ -3544,7 +3544,7 @@ declare class OpportunityHighlightBannerComponent {
     protected titleClasses: _angular_core.Signal<"text-amber-300" | "text-amber-900">;
     protected badgeClasses: _angular_core.Signal<"bg-amber-500/30 text-amber-300" | "bg-amber-200 text-amber-800">;
     protected messageClasses: _angular_core.Signal<"text-amber-700" | "text-amber-400/90">;
-    protected chevronClasses: _angular_core.Signal<"text-amber-400" | "text-amber-600">;
+    protected chevronClasses: _angular_core.Signal<"text-amber-600" | "text-amber-400">;
     handleClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OpportunityHighlightBannerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OpportunityHighlightBannerComponent, "symphiq-opportunity-highlight-banner", never, { "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; }, { "bannerClick": "bannerClick"; }, never, never, true, never>;

package/package.json

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

package/src/styles.css

@@ -1,318 +1,318 @@
-@import 'tailwindcss';
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes progressBar {
-  from {
-    width: 0%;
-  }
-}
-
-@keyframes pulseGlow {
-  0%, 100% {
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
-  }
-}
-
-@keyframes valueGlow {
-  0% {
-    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
-  }
-  50% {
-    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
-  }
-  100% {
-    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
-  }
-}
-
-@keyframes slideUpFade {
-  from {
-    opacity: 0;
-    transform: translateY(30px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes pulseSubtle {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-    box-shadow: inherit;
-  }
-  50% {
-    opacity: 0.9;
-    transform: scale(1.05);
-    filter: brightness(1.1);
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes contentChange {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.3;
-    transform: scale(0.98);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.animate-fade-in-up {
-  opacity: 0;
-  animation: fadeInUp 0.6s ease-out forwards;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
-}
-
-.animate-fade-out {
-  animation: fadeOut 0.2s ease-out forwards;
-}
-
-.animate-slide-up-fade {
-  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-progress-bar {
-  animation: progressBar 1.2s ease-out forwards;
-}
-
-.animate-pulse-glow {
-  animation: pulseGlow 2s ease-in-out infinite;
-}
-
-.animate-pulse-subtle {
-  animation: pulseSubtle 2s ease-in-out infinite;
-}
-
-.animate-value-glow.value-changed {
-  animation: valueGlow 1.5s ease-out;
-}
-
-.animate-scale-in {
-  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.animate-content-change {
-  animation: contentChange 0.4s ease-in-out;
-}
-
-.transition-opacity-fast {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.transition-opacity-slow {
-  transition: opacity 0.4s ease-in-out;
-}
-
-@keyframes searchHighlight {
-  0%, 100% {
-    background-color: transparent;
-    box-shadow: none;
-  }
-  50% {
-    background-color: rgba(59, 130, 246, 0.15);
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-  }
-}
-
-.search-highlight {
-  animation: searchHighlight 1.5s ease-in-out 2;
-  border-radius: 12px;
-  scroll-margin-top: 100px;
-}
-
-@keyframes pulseBorder {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
-  }
-}
-
-.animate-pulse-border {
-  animation: pulseBorder 1s ease-out 3;
-}
-
-/* Radial gradient utility */
-.bg-gradient-radial {
-  background: radial-gradient(circle, var(--tw-gradient-stops));
-}
-
-/* CSS-only animated bubbles - optimized for performance */
-@keyframes bubbleFloat1 {
-  0%, 100% {
-    background-position: 0% 0%, 100% 100%, 50% 50%, 20% 80%, 80% 20%;
-  }
-  33% {
-    background-position: 15% 10%, 85% 90%, 60% 40%, 30% 70%, 70% 30%;
-  }
-  66% {
-    background-position: 10% 20%, 90% 80%, 45% 55%, 25% 75%, 75% 25%;
-  }
-}
-
-@keyframes bubbleFloat2 {
-  0%, 100% {
-    background-position: 100% 0%, 0% 100%, 80% 20%, 30% 70%, 60% 50%;
-  }
-  33% {
-    background-position: 90% 15%, 10% 85%, 70% 30%, 40% 60%, 50% 40%;
-  }
-  66% {
-    background-position: 85% 10%, 15% 90%, 75% 25%, 35% 65%, 55% 45%;
-  }
-}
-
-.animated-bubbles {
-  background-image:
-    radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
-    radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 55%);
-  background-size: 300px 300px, 400px 400px, 350px 350px, 280px 280px, 320px 320px;
-  background-repeat: no-repeat;
-  animation: bubbleFloat1 35s ease-in-out infinite;
-  will-change: background-position;
-  transform: translate3d(0, 0, 0);
-  pointer-events: none;
-}
-
-.animated-bubbles.light-mode {
-  background-image:
-    radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
-    radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 55%);
-  animation: bubbleFloat2 40s ease-in-out infinite;
-}
-
-/* Expanded item animations */
-@keyframes bounceScale {
-  0% {
-    transform: scale(1);
-  }
-  25% {
-    transform: scale(1.15);
-  }
-  50% {
-    transform: scale(1.08);
-  }
-  75% {
-    transform: scale(1.12);
-  }
-  100% {
-    transform: scale(1.1);
-  }
-}
-
-@keyframes iconGlow {
-  0% {
-    filter: brightness(1) saturate(1);
-  }
-  100% {
-    filter: brightness(1.2) saturate(1.3);
-  }
-}
-
-@keyframes textGrow {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1.05);
-  }
-}
-
-@keyframes badgePulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.08);
-    opacity: 0.95;
-  }
-}
-
-.expanded-icon-bounce {
-  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
-             iconGlow 0.3s ease-out 0.2s forwards;
-}
-
-.expanded-title-grow {
-  animation: textGrow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
-}
-
-.expanded-badge-pulse {
-  animation: badgePulse 0.6s ease-in-out 0.3s 2;
-}
-
-/* Smooth transitions for expanded state */
-.expand-transition {
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .expanded-icon-bounce,
-  .expanded-title-grow,
-  .expanded-badge-pulse {
-    animation: none;
-    transform: scale(1.1);
-  }
-}
+@import 'tailwindcss';
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes progressBar {
+  from {
+    width: 0%;
+  }
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
+  }
+}
+
+@keyframes valueGlow {
+  0% {
+    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
+  }
+  50% {
+    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    text-shadow: 0 0 8px rgba(59, 130, 246, 0);
+  }
+}
+
+@keyframes slideUpFade {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes pulseSubtle {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+    box-shadow: inherit;
+  }
+  50% {
+    opacity: 0.9;
+    transform: scale(1.05);
+    filter: brightness(1.1);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes contentChange {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+    transform: scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in-up {
+  opacity: 0;
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 0.2s ease-out forwards;
+}
+
+.animate-slide-up-fade {
+  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-progress-bar {
+  animation: progressBar 1.2s ease-out forwards;
+}
+
+.animate-pulse-glow {
+  animation: pulseGlow 2s ease-in-out infinite;
+}
+
+.animate-pulse-subtle {
+  animation: pulseSubtle 2s ease-in-out infinite;
+}
+
+.animate-value-glow.value-changed {
+  animation: valueGlow 1.5s ease-out;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-content-change {
+  animation: contentChange 0.4s ease-in-out;
+}
+
+.transition-opacity-fast {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.transition-opacity-slow {
+  transition: opacity 0.4s ease-in-out;
+}
+
+@keyframes searchHighlight {
+  0%, 100% {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  50% {
+    background-color: rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+  }
+}
+
+.search-highlight {
+  animation: searchHighlight 1.5s ease-in-out 2;
+  border-radius: 12px;
+  scroll-margin-top: 100px;
+}
+
+@keyframes pulseBorder {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
+  }
+}
+
+.animate-pulse-border {
+  animation: pulseBorder 1s ease-out 3;
+}
+
+/* Radial gradient utility */
+.bg-gradient-radial {
+  background: radial-gradient(circle, var(--tw-gradient-stops));
+}
+
+/* CSS-only animated bubbles - optimized for performance */
+@keyframes bubbleFloat1 {
+  0%, 100% {
+    background-position: 0% 0%, 100% 100%, 50% 50%, 20% 80%, 80% 20%;
+  }
+  33% {
+    background-position: 15% 10%, 85% 90%, 60% 40%, 30% 70%, 70% 30%;
+  }
+  66% {
+    background-position: 10% 20%, 90% 80%, 45% 55%, 25% 75%, 75% 25%;
+  }
+}
+
+@keyframes bubbleFloat2 {
+  0%, 100% {
+    background-position: 100% 0%, 0% 100%, 80% 20%, 30% 70%, 60% 50%;
+  }
+  33% {
+    background-position: 90% 15%, 10% 85%, 70% 30%, 40% 60%, 50% 40%;
+  }
+  66% {
+    background-position: 85% 10%, 15% 90%, 75% 25%, 35% 65%, 55% 45%;
+  }
+}
+
+.animated-bubbles {
+  background-image:
+    radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
+    radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 55%);
+  background-size: 300px 300px, 400px 400px, 350px 350px, 280px 280px, 320px 320px;
+  background-repeat: no-repeat;
+  animation: bubbleFloat1 35s ease-in-out infinite;
+  will-change: background-position;
+  backface-visibility: hidden;
+  pointer-events: none;
+}
+
+.animated-bubbles.light-mode {
+  background-image:
+    radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
+    radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 55%);
+  animation: bubbleFloat2 40s ease-in-out infinite;
+}
+
+/* Expanded item animations */
+@keyframes bounceScale {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(1.08);
+  }
+  75% {
+    transform: scale(1.12);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes iconGlow {
+  0% {
+    filter: brightness(1) saturate(1);
+  }
+  100% {
+    filter: brightness(1.2) saturate(1.3);
+  }
+}
+
+@keyframes textGrow {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes badgePulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.95;
+  }
+}
+
+.expanded-icon-bounce {
+  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+             iconGlow 0.3s ease-out 0.2s forwards;
+}
+
+.expanded-title-grow {
+  animation: textGrow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards;
+}
+
+.expanded-badge-pulse {
+  animation: badgePulse 0.6s ease-in-out 0.3s 2;
+}
+
+/* Smooth transitions for expanded state */
+.expand-transition {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .expanded-icon-bounce,
+  .expanded-title-grow,
+  .expanded-badge-pulse {
+    animation: none;
+    transform: scale(1.1);
+  }
+}

package/styles.css

@@ -8819,23 +8819,23 @@
   }
 }
 .animated-bubbles {
-  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
+  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.12) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
     radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 55%);
   background-size: 300px 300px, 400px 400px, 350px 350px, 280px 280px, 320px 320px;
   background-repeat: no-repeat;
   animation: bubbleFloat1 35s ease-in-out infinite;
   will-change: background-position;
-  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
   pointer-events: none;
 }
 .animated-bubbles.light-mode {
-  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
-    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
-    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
-    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
+  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 50%),
+    radial-gradient(circle, rgba(147, 51, 234, 0.16) 0%, transparent 50%),
+    radial-gradient(circle, rgba(59, 130, 246, 0.14) 0%, transparent 60%),
+    radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
     radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 55%);
   animation: bubbleFloat2 40s ease-in-out infinite;
 }
@@ -8886,7 +8886,7 @@
   }
 }
 .expanded-icon-bounce {
-  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
+  animation: bounceScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
              iconGlow 0.3s ease-out 0.2s forwards;
 }
 .expanded-title-grow {
@@ -8899,8 +8899,8 @@
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (prefers-reduced-motion: reduce) {
-  .expanded-icon-bounce,
-  .expanded-title-grow,
+  .expanded-icon-bounce,
+  .expanded-title-grow,
   .expanded-badge-pulse {
     animation: none;
     transform: scale(1.1);
@@ -9307,4 +9307,4 @@
       --tw-scale-z: 1;
     }
   }
-}
+}