@eric-emg/symphiq-components 1.2.9 → 1.2.11

package/index.d.ts

@@ -730,7 +730,7 @@ declare class MetricCardComponent {
     competitiveScoreBadgeLightClass: _angular_core.Signal<string>;
     competitiveScoreBadgeDarkClass: _angular_core.Signal<string>;
     competitiveScoreBadgeClass: _angular_core.Signal<string>;
-    competitiveScoreTextClass: _angular_core.Signal<"" | "text-emerald-600" | "text-orange-600" | "text-blue-400" | "text-blue-700">;
+    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;
@@ -1180,7 +1180,7 @@ declare class SymphiqFunnelAnalysisPreviewComponent {
     competitiveTooltip: _angular_core.Signal<{
         industry: any;
         metricBenchmark: string;
-        competitiveScore: "LEADING" | "LAGGING" | "COMPETITIVE";
+        competitiveScore: "LEADING" | "COMPETITIVE" | "LAGGING";
         description: string;
         keyOpportunities: string;
     }>;
@@ -1245,7 +1245,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>;
@@ -1416,7 +1416,7 @@ declare class TooltipContainerComponent {
     isVisible: _angular_core.Signal<boolean>;
     tooltipType: _angular_core.Signal<string | null>;
     tooltipContent: _angular_core.Signal<string | Record<string, unknown> | undefined>;
-    tooltipPosition: _angular_core.Signal<"top" | "auto" | "bottom" | "left" | "right">;
+    tooltipPosition: _angular_core.Signal<"top" | "bottom" | "left" | "right" | "auto">;
     targetRect: _angular_core.Signal<DOMRect | null>;
     mousePosition: _angular_core.Signal<{
         x: number;

package/package.json

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

package/styles.css

@@ -636,6 +636,12 @@
   .max-h-\[80vh\] {
     max-height: 80vh;
   }
+  .min-h-\[32px\] {
+    min-height: 32px;
+  }
+  .min-h-\[44px\] {
+    min-height: 44px;
+  }
   .min-h-\[240px\] {
     min-height: 240px;
   }
@@ -735,6 +741,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-\[44px\] {
+    min-width: 44px;
+  }
   .min-w-\[64px\] {
     min-width: 64px;
   }
@@ -2662,6 +2671,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2725,6 +2737,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
@@ -3011,9 +3026,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .capitalize {
-    text-transform: capitalize;
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -4227,6 +4239,11 @@
       display: inline-block;
     }
   }
+  .sm\:h-4 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:h-5 {
     @media (width >= 40rem) {
       height: calc(var(--spacing) * 5);
@@ -4257,6 +4274,11 @@
       height: 100vh;
     }
   }
+  .sm\:w-4 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:w-5 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 5);
@@ -4302,6 +4324,11 @@
       max-width: var(--container-6xl);
     }
   }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
+    }
+  }
   .sm\:flex-initial {
     @media (width >= 40rem) {
       flex: 0 auto;
@@ -4327,6 +4354,11 @@
       gap: calc(var(--spacing) * 0);
     }
   }
+  .sm\:gap-2 {
+    @media (width >= 40rem) {
+      gap: calc(var(--spacing) * 2);
+    }
+  }
   .sm\:gap-3 {
     @media (width >= 40rem) {
       gap: calc(var(--spacing) * 3);
@@ -4342,6 +4374,15 @@
       gap: calc(var(--spacing) * 6);
     }
   }
+  .sm\:space-y-3 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-y-reverse: 0;
+        margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+        margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+      }
+    }
+  }
   .sm\:space-y-10 {
     @media (width >= 40rem) {
       :where(& > :not(:last-child)) {
@@ -4356,6 +4397,21 @@
       padding: calc(var(--spacing) * 0);
     }
   }
+  .sm\:p-2 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 2);
+    }
+  }
+  .sm\:p-3 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\:p-4 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
   .sm\:p-6 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 6);
@@ -4381,6 +4437,11 @@
       padding-block: calc(var(--spacing) * 2);
     }
   }
+  .sm\:py-3 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 3);
+    }
+  }
   .sm\:py-8 {
     @media (width >= 40rem) {
       padding-block: calc(var(--spacing) * 8);
@@ -4442,6 +4503,43 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .sm\:text-xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .sm\:hover\:scale-105 {
+    @media (width >= 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          --tw-scale-x: 105%;
+          --tw-scale-y: 105%;
+          --tw-scale-z: 105%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+      }
+    }
+  }
+  .sm\:hover\:scale-\[1\.01\] {
+    @media (width >= 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          scale: 1.01;
+        }
+      }
+    }
+  }
+  .sm\:hover\:shadow-xl {
+    @media (width >= 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+        }
+      }
+    }
+  }
   .md\:ml-4 {
     @media (width >= 48rem) {
       margin-left: calc(var(--spacing) * 4);