@eric-emg/symphiq-components 1.2.236 → 1.2.238

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +181 -182
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +7 -7
  4. package/package.json +1 -1
  5. package/styles.css +3 -0
package/fesm2022/symphiq-components.mjs CHANGED
@@ -55272,7 +55272,6 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template(rf, c
55272
55272
  } if (rf & 2) {
55273
55273
  const stage_r2 = i0.ɵɵnextContext().$implicit;
55274
55274
  const ctx_r2 = i0.ɵɵnextContext();
55275
- i0.ɵɵproperty("ngClass", ctx_r2.dividerClasses());
55276
55275
  i0.ɵɵadvance(2);
55277
55276
  i0.ɵɵproperty("ngClass", ctx_r2.relatedTitleClasses());
55278
55277
  i0.ɵɵadvance(3);
@@ -55314,7 +55313,7 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
55314
55313
  i0.ɵɵelementStart(26, "span", 18);
55315
55314
  i0.ɵɵtext(27, "Report");
55316
55315
  i0.ɵɵelementEnd()()();
55317
- i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template, 7, 2);
55316
+ i0.ɵɵconditionalCreate(28, FunnelMetricsVisualizationComponent_For_4_Conditional_28_Template, 7, 1);
55318
55317
  i0.ɵɵelementEnd();
55319
55318
  } if (rf & 2) {
55320
55319
  const stage_r2 = ctx.$implicit;
@@ -55528,7 +55527,7 @@ class FunnelMetricsVisualizationComponent {
55528
55527
  this.viewRelatedMetricReport.emit(metric);
55529
55528
  }
55530
55529
  static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
55531
- static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { viewStageReport: "viewStageReport", viewRelatedMetricReport: "viewRelatedMetricReport" }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], [1, "mt-4", "pt-3", "border-t", "flex", "justify-end", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "hidden", "sm:inline"], [1, "sm:hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-4", 3, "ngClass"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "mt-3", "pt-3", "border-t", "flex", "justify-end", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
55530
+ static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, outputs: { viewStageReport: "viewStageReport", viewRelatedMetricReport: "viewRelatedMetricReport" }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "sm:text-xl", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-6", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear"], [1, "mt-6", "pt-4", "border-t", "flex", "justify-start", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "hidden", "sm:inline"], [1, "sm:hidden"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "showEmphasizedPercentage"], [1, "my-8"], [1, "space-y-3"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-3"], [1, "p-4", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-4"], [1, "text-sm", "sm:text-base", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "lg:grid-cols-3", "gap-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1.5", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "percentageChange", "metric", "priorYear", "isCompact"], [1, "mt-3", "pt-6", "border-t", "flex", "justify-start", 3, "ngClass"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-3", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], [3, "viewMode", "pacingPercentage", "status", "showAsFullText", "isCompact", "showEmphasizedPercentage"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
55532
55531
  i0.ɵɵelementStart(0, "div", 0);
55533
55532
  i0.ɵɵelement(1, "symphiq-tooltip-container");
55534
55533
  i0.ɵɵelementStart(2, "div", 1);
@@ -55546,185 +55545,185 @@ class FunnelMetricsVisualizationComponent {
55546
55545
  standalone: true,
55547
55546
  imports: [CommonModule, PacingStatusBadgeComponent, TargetChangeBadgeComponent, TooltipDirective, TooltipContainerComponent],
55548
55547
  changeDetection: ChangeDetectionStrategy.OnPush,
55549
- template: `
55550
- <div class="space-y-6">
55551
- <symphiq-tooltip-container />
55552
- <div class="space-y-8">
55553
- @for (stage of funnelStages(); track stage.stageMetric.metric) {
55554
- <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
55555
- <div class="flex items-start justify-between mb-6">
55556
- <div class="flex-1">
55557
- <div class="flex items-center gap-2 mb-1">
55558
- <h3 [ngClass]="stageTitleClasses()" class="text-lg sm:text-xl font-bold leading-tight m-0">
55559
- {{ getMetricTitle(stage.stageMetric) }}
55560
- </h3>
55561
- @if (stage.stageMetric.description) {
55562
- <button
55563
- type="button"
55564
- [ngClass]="infoIconClasses()"
55565
- class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
55566
- [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
55567
- tooltipType="markdown"
55568
- tooltipPosition="right">
55569
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55570
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
55571
- </svg>
55572
- </button>
55573
- }
55574
- </div>
55575
- </div>
55576
- </div>
55577
-
55578
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
55579
- <div>
55580
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55581
- {{ priorYear() }} Actual
55582
- </p>
55583
- <p [ngClass]="valueClasses()" class="text-2xl font-bold">
55584
- {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
55585
- </p>
55586
- </div>
55587
- <div>
55588
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55589
- {{ currentYear() }} Target
55590
- </p>
55591
- <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
55592
- {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
55593
- </p>
55594
- <symphiq-target-change-badge
55595
- [viewMode]="viewMode()"
55596
- [percentageChange]="stage.stageMetric.percentageIncrease"
55597
- [metric]="stage.stageMetric.metric"
55598
- [priorYear]="priorYear()"
55599
- />
55600
- </div>
55601
- @if (stage.pacingInfo) {
55602
- <div>
55603
- <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55604
- Pace for {{ currentYear() }}
55605
- </p>
55606
- <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
55607
- {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
55608
- </p>
55609
- <symphiq-pacing-status-badge
55610
- [viewMode]="viewMode()"
55611
- [pacingPercentage]="stage.pacingInfo.pacingPercentage"
55612
- [status]="stage.pacingInfo.status"
55613
- [showAsFullText]="true"
55614
- [showEmphasizedPercentage]="true"
55615
- />
55616
- </div>
55617
- }
55618
- </div>
55619
-
55620
- <div [ngClass]="stageActionBarClasses()" class="mt-4 pt-3 border-t flex justify-end">
55621
- <button
55622
- type="button"
55623
- (click)="onViewStageReport(stage.stageMetric.metric)"
55624
- [ngClass]="actionButtonClasses()"
55625
- class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200">
55626
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55627
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
55628
- </svg>
55629
- <span class="hidden sm:inline">View Report</span>
55630
- <span class="sm:hidden">Report</span>
55631
- </button>
55632
- </div>
55633
-
55634
- @if (stage.relatedMetrics.length > 0) {
55635
- <div [ngClass]="dividerClasses()" class="my-4"></div>
55636
-
55637
- <div class="space-y-3">
55638
- <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
55639
- Related Metrics
55640
- </p>
55641
- <div class="grid gap-3">
55642
- @for (metric of stage.relatedMetrics; track metric.calc.metric) {
55643
- <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
55644
- <div class="flex items-center gap-2 mb-4">
55645
- <p [ngClass]="relatedMetricNameClasses()" class="text-sm sm:text-base font-semibold leading-tight">
55646
- {{ getMetricTitle(metric.calc) }}
55647
- </p>
55648
- @if (metric.calc.description) {
55649
- <button
55650
- type="button"
55651
- [ngClass]="infoIconClasses()"
55652
- class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
55653
- [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
55654
- tooltipType="markdown"
55655
- tooltipPosition="right">
55656
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55657
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
55658
- </svg>
55659
- </button>
55660
- }
55661
- </div>
55662
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
55663
- <div>
55664
- <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55665
- {{ priorYear() }} Actual
55666
- </p>
55667
- <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
55668
- {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
55669
- </p>
55670
- </div>
55671
- <div>
55672
- <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55673
- {{ currentYear() }} Target
55674
- </p>
55675
- <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
55676
- {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
55677
- </p>
55678
- <symphiq-target-change-badge
55679
- [viewMode]="viewMode()"
55680
- [percentageChange]="metric.calc.percentageIncrease"
55681
- [metric]="metric.calc.metric"
55682
- [priorYear]="priorYear()"
55683
- [isCompact]="true"
55684
- />
55685
- </div>
55686
- @if (metric.pacingInfo) {
55687
- <div>
55688
- <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55689
- Pace for {{ currentYear() }}
55690
- </p>
55691
- <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
55692
- {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
55693
- </p>
55694
- <symphiq-pacing-status-badge
55695
- [viewMode]="viewMode()"
55696
- [pacingPercentage]="metric.pacingInfo.pacingPercentage"
55697
- [status]="metric.pacingInfo.status"
55698
- [showAsFullText]="true"
55699
- [isCompact]="true"
55700
- [showEmphasizedPercentage]="true"
55701
- />
55702
- </div>
55703
- }
55704
- </div>
55705
-
55706
- <div [ngClass]="relatedActionBarClasses()" class="mt-3 pt-3 border-t flex justify-end">
55707
- <button
55708
- type="button"
55709
- (click)="onViewRelatedMetricReport(metric.calc.metric)"
55710
- [ngClass]="relatedActionButtonClasses()"
55711
- class="inline-flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-all duration-200">
55712
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55713
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
55714
- </svg>
55715
- <span class="hidden sm:inline">View Report</span>
55716
- <span class="sm:hidden">Report</span>
55717
- </button>
55718
- </div>
55719
- </div>
55720
- }
55721
- </div>
55722
- </div>
55723
- }
55724
- </div>
55725
- }
55726
- </div>
55727
- </div>
55548
+ template: `
55549
+ <div class="space-y-6">
55550
+ <symphiq-tooltip-container />
55551
+ <div class="space-y-8">
55552
+ @for (stage of funnelStages(); track stage.stageMetric.metric) {
55553
+ <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
55554
+ <div class="flex items-start justify-between mb-6">
55555
+ <div class="flex-1">
55556
+ <div class="flex items-center gap-2 mb-1">
55557
+ <h3 [ngClass]="stageTitleClasses()" class="text-lg sm:text-xl font-bold leading-tight m-0">
55558
+ {{ getMetricTitle(stage.stageMetric) }}
55559
+ </h3>
55560
+ @if (stage.stageMetric.description) {
55561
+ <button
55562
+ type="button"
55563
+ [ngClass]="infoIconClasses()"
55564
+ class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
55565
+ [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
55566
+ tooltipType="markdown"
55567
+ tooltipPosition="right">
55568
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55569
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
55570
+ </svg>
55571
+ </button>
55572
+ }
55573
+ </div>
55574
+ </div>
55575
+ </div>
55576
+
55577
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
55578
+ <div>
55579
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55580
+ {{ priorYear() }} Actual
55581
+ </p>
55582
+ <p [ngClass]="valueClasses()" class="text-2xl font-bold">
55583
+ {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
55584
+ </p>
55585
+ </div>
55586
+ <div>
55587
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55588
+ {{ currentYear() }} Target
55589
+ </p>
55590
+ <p [ngClass]="targetValueClasses()" class="text-2xl font-bold mb-3">
55591
+ {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric, false) }}
55592
+ </p>
55593
+ <symphiq-target-change-badge
55594
+ [viewMode]="viewMode()"
55595
+ [percentageChange]="stage.stageMetric.percentageIncrease"
55596
+ [metric]="stage.stageMetric.metric"
55597
+ [priorYear]="priorYear()"
55598
+ />
55599
+ </div>
55600
+ @if (stage.pacingInfo) {
55601
+ <div>
55602
+ <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-2">
55603
+ Pace for {{ currentYear() }}
55604
+ </p>
55605
+ <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold mb-3">
55606
+ {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
55607
+ </p>
55608
+ <symphiq-pacing-status-badge
55609
+ [viewMode]="viewMode()"
55610
+ [pacingPercentage]="stage.pacingInfo.pacingPercentage"
55611
+ [status]="stage.pacingInfo.status"
55612
+ [showAsFullText]="true"
55613
+ [showEmphasizedPercentage]="true"
55614
+ />
55615
+ </div>
55616
+ }
55617
+ </div>
55618
+
55619
+ <div [ngClass]="stageActionBarClasses()" class="mt-6 pt-4 border-t flex justify-start">
55620
+ <button
55621
+ type="button"
55622
+ (click)="onViewStageReport(stage.stageMetric.metric)"
55623
+ [ngClass]="actionButtonClasses()"
55624
+ class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200">
55625
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55626
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
55627
+ </svg>
55628
+ <span class="hidden sm:inline">View Report</span>
55629
+ <span class="sm:hidden">Report</span>
55630
+ </button>
55631
+ </div>
55632
+
55633
+ @if (stage.relatedMetrics.length > 0) {
55634
+ <div class="my-8"></div>
55635
+
55636
+ <div class="space-y-3">
55637
+ <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
55638
+ Related Metrics
55639
+ </p>
55640
+ <div class="grid gap-3">
55641
+ @for (metric of stage.relatedMetrics; track metric.calc.metric) {
55642
+ <div [ngClass]="relatedMetricCardClasses()" class="p-4 rounded-lg">
55643
+ <div class="flex items-center gap-2 mb-4">
55644
+ <p [ngClass]="relatedMetricNameClasses()" class="text-sm sm:text-base font-semibold leading-tight">
55645
+ {{ getMetricTitle(metric.calc) }}
55646
+ </p>
55647
+ @if (metric.calc.description) {
55648
+ <button
55649
+ type="button"
55650
+ [ngClass]="infoIconClasses()"
55651
+ class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
55652
+ [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
55653
+ tooltipType="markdown"
55654
+ tooltipPosition="right">
55655
+ <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55656
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
55657
+ </svg>
55658
+ </button>
55659
+ }
55660
+ </div>
55661
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
55662
+ <div>
55663
+ <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55664
+ {{ priorYear() }} Actual
55665
+ </p>
55666
+ <p [ngClass]="relatedValueClasses()" class="text-lg font-bold">
55667
+ {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}
55668
+ </p>
55669
+ </div>
55670
+ <div>
55671
+ <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55672
+ {{ currentYear() }} Target
55673
+ </p>
55674
+ <p [ngClass]="relatedTargetValueClasses()" class="text-lg font-bold mb-2">
55675
+ {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric, false) }}
55676
+ </p>
55677
+ <symphiq-target-change-badge
55678
+ [viewMode]="viewMode()"
55679
+ [percentageChange]="metric.calc.percentageIncrease"
55680
+ [metric]="metric.calc.metric"
55681
+ [priorYear]="priorYear()"
55682
+ [isCompact]="true"
55683
+ />
55684
+ </div>
55685
+ @if (metric.pacingInfo) {
55686
+ <div>
55687
+ <p [ngClass]="relatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1.5">
55688
+ Pace for {{ currentYear() }}
55689
+ </p>
55690
+ <p [ngClass]="relatedProjectedValueClasses()" class="text-lg font-bold mb-2">
55691
+ {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}
55692
+ </p>
55693
+ <symphiq-pacing-status-badge
55694
+ [viewMode]="viewMode()"
55695
+ [pacingPercentage]="metric.pacingInfo.pacingPercentage"
55696
+ [status]="metric.pacingInfo.status"
55697
+ [showAsFullText]="true"
55698
+ [isCompact]="true"
55699
+ [showEmphasizedPercentage]="true"
55700
+ />
55701
+ </div>
55702
+ }
55703
+ </div>
55704
+
55705
+ <div [ngClass]="relatedActionBarClasses()" class="mt-3 pt-6 border-t flex justify-start">
55706
+ <button
55707
+ type="button"
55708
+ (click)="onViewRelatedMetricReport(metric.calc.metric)"
55709
+ [ngClass]="relatedActionButtonClasses()"
55710
+ class="inline-flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-all duration-200">
55711
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55712
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
55713
+ </svg>
55714
+ <span class="hidden sm:inline">View Report</span>
55715
+ <span class="sm:hidden">Report</span>
55716
+ </button>
55717
+ </div>
55718
+ </div>
55719
+ }
55720
+ </div>
55721
+ </div>
55722
+ }
55723
+ </div>
55724
+ }
55725
+ </div>
55726
+ </div>
55728
55727
  `
55729
55728
  }]
55730
55729
  }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], viewStageReport: [{ type: i0.Output, args: ["viewStageReport"] }], viewRelatedMetricReport: [{ type: i0.Output, args: ["viewRelatedMetricReport"] }] }); })();