@eric-emg/symphiq-components 1.2.544 → 1.2.545

package/fesm2022/symphiq-components.mjs

@@ -77795,8 +77795,35 @@ class ProfileSectionContentComponent {
                 normalizedName.includes(m.metric?.toUpperCase() || ''));
         }
         if (metric) {
-            this.modalService.openMetricModal(metric, this.allCharts());
+            const charts = this.chartsForMetric(metric);
+            this.modalService.openMetricModal(metric, charts);
+        }
+    }
+    chartsForMetric(metric) {
+        const metricId = metric.performanceItemId;
+        const metricName = metric.metric;
+        if (!metricId && !metricName) {
+            return [];
+        }
+        const allChartsArr = this.allCharts();
+        const matchingCharts = [];
+        const metricNameLower = metricName?.toLowerCase() || '';
+        const metricNameNormalized = metricNameLower.replace(/\s+/g, '_');
+        for (const chart of allChartsArr) {
+            const chartId = chart.performanceItemId || '';
+            const chartIdLower = chartId.toLowerCase();
+            if (metricId) {
+                const prefix = metricId + '_';
+                if (chartId === metricId || chartId.startsWith(prefix)) {
+                    matchingCharts.push(chart);
+                    continue;
+                }
+            }
+            if (metricName && chartIdLower.includes(metricNameNormalized)) {
+                matchingCharts.push(chart);
+            }
         }
+        return matchingCharts;
     }
     getEffortBadgeClasses(effort) {
         if (!effort)
@@ -85742,7 +85769,7 @@ function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_7_Template(
 function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-metric-executive-summary", 32);
-    i0.ɵɵlistener("topPrioritiesClick", function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template_symphiq_metric_executive_summary_topPrioritiesClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleMetricTopPrioritiesClick()); })("priorityDetailClick", function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template_symphiq_metric_executive_summary_priorityDetailClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleMetricPriorityDetailClick($event)); });
+    i0.ɵɵlistener("topPrioritiesClick", function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template_symphiq_metric_executive_summary_topPrioritiesClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleMetricTopPrioritiesClick()); })("priorityDetailClick", function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template_symphiq_metric_executive_summary_priorityDetailClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleMetricPriorityDetailClick($event)); })("viewMetricDetailsClick", function CollapsibleAnalysisSectionGroupComponent_For_23_Conditional_13_Template_symphiq_metric_executive_summary_viewMetricDetailsClick_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleViewMetricDetailsClick()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -86040,6 +86067,41 @@ class CollapsibleAnalysisSectionGroupComponent {
             this.modalService.navigateToTopPriorityDetail(event.priority, event.index, this.viewMode(), this.metricName(), totalCount);
         }
     }
+    handleViewMetricDetailsClick() {
+        console.log('[CollapsibleAnalysisSectionGroup] handleViewMetricDetailsClick called');
+        const metricKey = this.metricExecutiveSummary()?.metric;
+        console.log('[CollapsibleAnalysisSectionGroup] metricKey:', metricKey);
+        if (!metricKey) {
+            console.log('[CollapsibleAnalysisSectionGroup] No metricKey found');
+            return;
+        }
+        const allMetrics = this.allMetrics();
+        const metric = allMetrics.find(m => m.metric === metricKey);
+        console.log('[CollapsibleAnalysisSectionGroup] Found metric:', !!metric);
+        if (metric) {
+            const allCharts = this.allCharts();
+            const metricCharts = allCharts.filter(chart => {
+                const chartId = chart.performanceItemId?.toLowerCase() || '';
+                const metricId = metricKey.toLowerCase();
+                return chartId.includes(metricId) || chartId.startsWith(metricId);
+            });
+            console.log('[CollapsibleAnalysisSectionGroup] Opening modal with metric and', metricCharts.length, 'charts');
+            this.modalService.openMetricModal(metric, metricCharts);
+        }
+        else {
+            const summary = this.metricExecutiveSummary();
+            if (summary) {
+                const constructedMetric = {
+                    metric: metricKey,
+                    currentValue: typeof summary.currentValue === 'string' ? parseFloat(summary.currentValue) || 0 : (summary.currentValue ?? 0),
+                    targetValue: typeof summary.targetValue === 'string' ? parseFloat(summary.targetValue) || 0 : (summary.targetValue ?? 0),
+                    description: summary.gradeRationale
+                };
+                console.log('[CollapsibleAnalysisSectionGroup] Opening modal with constructed metric');
+                this.modalService.openMetricModal(constructedMetric, []);
+            }
+        }
+    }
     formatDescription(description) {
         if (!description)
             return description;
@@ -86058,7 +86120,7 @@ class CollapsibleAnalysisSectionGroupComponent {
         });
     }
     static { this.ɵfac = function CollapsibleAnalysisSectionGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsibleAnalysisSectionGroupComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleAnalysisSectionGroupComponent, selectors: [["symphiq-collapsible-analysis-section-group"]], inputs: { sections: [1, "sections"], viewMode: [1, "viewMode"], executiveSummary: [1, "executiveSummary"], focusAreaExecutiveSummary: [1, "focusAreaExecutiveSummary"], metricExecutiveSummary: [1, "metricExecutiveSummary"], metricName: [1, "metricName"], allGoals: [1, "allGoals"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], allInsights: [1, "allInsights"], businessProfile: [1, "businessProfile"] }, decls: 24, vars: 12, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["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"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "line-clamp-1", "transition-colors", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", "p-6", 3, "ngClass"], [3, "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "summary", "allGoals"], ["size", "w-4 h-4", 3, "icon"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [1, "mb-6"], [3, "section", "viewMode", "sectionIndex", "executiveSummary", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], [1, "relative"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[50%]"], [1, "mb-6", "lg:float-right", "lg:ml-6", "lg:mb-4", "lg:max-w-[50%]"], [3, "visual", "viewMode"]], template: function CollapsibleAnalysisSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsibleAnalysisSectionGroupComponent, selectors: [["symphiq-collapsible-analysis-section-group"]], inputs: { sections: [1, "sections"], viewMode: [1, "viewMode"], executiveSummary: [1, "executiveSummary"], focusAreaExecutiveSummary: [1, "focusAreaExecutiveSummary"], metricExecutiveSummary: [1, "metricExecutiveSummary"], metricName: [1, "metricName"], allGoals: [1, "allGoals"], allMetrics: [1, "allMetrics"], allCharts: [1, "allCharts"], allInsights: [1, "allInsights"], businessProfile: [1, "businessProfile"] }, decls: 24, vars: 12, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-6", "p-4", "rounded-xl", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["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"], [1, "flex-1"], [1, "font-semibold", "text-sm", "mb-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3"], [1, "rounded-xl", "border", "overflow-hidden", "transition-all", "duration-200", 3, "id", "ngClass"], ["type", "button", 1, "cursor-pointer", "w-full", "px-5", "py-4", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "transition-colors", "duration-200", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "transition-colors", "duration-200", 3, "ngClass"], [1, "text-sm", "mt-0.5", "line-clamp-1", "transition-colors", "duration-200", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", "p-6", 3, "ngClass"], [3, "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "summary", "allGoals"], ["size", "w-4 h-4", 3, "icon"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMetricDetailsClick", "viewMode", "summary", "metricName", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [1, "mb-6"], [3, "section", "viewMode", "sectionIndex", "executiveSummary", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], [1, "relative"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[50%]"], [1, "mb-6", "lg:float-right", "lg:ml-6", "lg:mb-4", "lg:max-w-[50%]"], [3, "visual", "viewMode"]], template: function CollapsibleAnalysisSectionGroupComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(5, "svg", 5);
@@ -86208,6 +86270,7 @@ class CollapsibleAnalysisSectionGroupComponent {
                         [allGoals]="allGoals()"
                         (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
                         (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+                        (viewMetricDetailsClick)="handleViewMetricDetailsClick()"
                       />
                     } @else if (section.id === 'focus-area-executive-summary' && focusAreaExecutiveSummary()) {
                       <symphiq-focus-area-executive-summary
@@ -86276,7 +86339,7 @@ class CollapsibleAnalysisSectionGroupComponent {
   `
             }]
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], executiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "executiveSummary", required: false }] }], focusAreaExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaExecutiveSummary", required: false }] }], metricExecutiveSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricExecutiveSummary", required: false }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], allMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "allMetrics", required: false }] }], allCharts: [{ type: i0.Input, args: [{ isSignal: true, alias: "allCharts", required: false }] }], allInsights: [{ type: i0.Input, args: [{ isSignal: true, alias: "allInsights", required: false }] }], businessProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessProfile", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleAnalysisSectionGroupComponent, { className: "CollapsibleAnalysisSectionGroupComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/collapsible-analysis-section-group.component.ts", lineNumber: 172 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsibleAnalysisSectionGroupComponent, { className: "CollapsibleAnalysisSectionGroupComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/collapsible-analysis-section-group.component.ts", lineNumber: 173 }); })();
 
 const _forTrack0$g = ($index, $item) => $item.code;
 function BillingCurrencySelectorCardComponent_For_15_Template(rf, ctx) { if (rf & 1) {