@eric-emg/symphiq-components 1.2.134 → 1.2.135

package/fesm2022/symphiq-components.mjs

@@ -32478,10 +32478,10 @@ function ProfileAnalysisModalComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(20, ProfileAnalysisModalComponent_Conditional_0_Conditional_20_Template, 1, 7, "symphiq-goal-detail-modal-content", 19)(21, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Template, 4, 1, "div", 20)(22, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Template, 4, 1, "div", 20)(23, ProfileAnalysisModalComponent_Conditional_0_Conditional_23_Template, 4, 1, "div", 21)(24, ProfileAnalysisModalComponent_Conditional_0_Conditional_24_Template, 4, 1, "div", 21)(25, ProfileAnalysisModalComponent_Conditional_0_Conditional_25_Template, 1, 15, "symphiq-recommendation-card", 22)(26, ProfileAnalysisModalComponent_Conditional_0_Conditional_26_Template, 3, 1, "div", 20)(27, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Template, 1, 8, "symphiq-funnel-analysis-metric-card", 23)(28, ProfileAnalysisModalComponent_Conditional_0_Conditional_28_Template, 4, 1, "div", 20)(29, ProfileAnalysisModalComponent_Conditional_0_Conditional_29_Template, 1, 11, "symphiq-funnel-analysis-insight-card", 24)(30, ProfileAnalysisModalComponent_Conditional_0_Conditional_30_Template, 7, 6, "div", 25)(31, ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Template, 1, 3, "symphiq-key-strengths-list-modal-content", 26)(32, ProfileAnalysisModalComponent_Conditional_0_Conditional_32_Template, 1, 3, "symphiq-critical-gaps-list-modal-content", 27)(33, ProfileAnalysisModalComponent_Conditional_0_Conditional_33_Template, 1, 3, "symphiq-key-strength-detail-modal-content", 28)(34, ProfileAnalysisModalComponent_Conditional_0_Conditional_34_Template, 1, 3, "symphiq-critical-gap-detail-modal-content", 29)(35, ProfileAnalysisModalComponent_Conditional_0_Conditional_35_Template, 1, 4, "symphiq-top-priorities-list-modal-content", 30)(36, ProfileAnalysisModalComponent_Conditional_0_Conditional_36_Template, 1, 6, "symphiq-top-priority-detail-modal-content", 31)(37, ProfileAnalysisModalComponent_Conditional_0_Conditional_37_Template, 1, 4, "symphiq-focus-area-strengths-list-modal-content", 32)(38, ProfileAnalysisModalComponent_Conditional_0_Conditional_38_Template, 1, 4, "symphiq-focus-area-gaps-list-modal-content", 33)(39, ProfileAnalysisModalComponent_Conditional_0_Conditional_39_Template, 1, 4, "symphiq-focus-area-opportunities-list-modal-content", 34)(40, ProfileAnalysisModalComponent_Conditional_0_Conditional_40_Template, 1, 6, "symphiq-focus-area-strength-detail-modal-content", 35)(41, ProfileAnalysisModalComponent_Conditional_0_Conditional_41_Template, 1, 6, "symphiq-focus-area-gap-detail-modal-content", 36)(42, ProfileAnalysisModalComponent_Conditional_0_Conditional_42_Template, 1, 6, "symphiq-focus-area-opportunity-detail-modal-content", 37)(43, ProfileAnalysisModalComponent_Conditional_0_Conditional_43_Template, 1, 0);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    let tmp_15_0;
-    let tmp_18_0;
+    let tmp_16_0;
+    let tmp_19_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("z-index", ctx_r1.baseZIndex());
+    i0.ɵɵstyleProp("z-index", ctx_r1.baseZIndex())("visibility", ctx_r1.modalReady() ? "visible" : "hidden");
     i0.ɵɵadvance(3);
     i0.ɵɵstyleProp("z-index", ctx_r1.backdropZIndex());
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "bg-slate-900/15" : "bg-slate-950/25")("@fadeIn", undefined);
@@ -32499,13 +32499,13 @@ function ProfileAnalysisModalComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.modalTitle(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_15_0 = ctx_r1.getGoalChips()) ? 14 : -1, tmp_15_0);
+    i0.ɵɵconditional((tmp_16_0 = ctx_r1.getGoalChips()) ? 14 : -1, tmp_16_0);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 hover:text-slate-900 hover:bg-slate-100" : "text-slate-400 hover:text-white hover:bg-slate-700");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "bg-white/30" : "bg-slate-800/30");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_18_0 = ctx_r1.modalType() === "goal-detail" && ctx_r1.getGoalDetailData()) ? 20 : (tmp_18_0 = ctx_r1.modalType() === "goal-insights-list" && ctx_r1.getInsightsListData()) ? 21 : (tmp_18_0 = ctx_r1.modalType() === "recommendation-insights-list" && ctx_r1.getRecommendationInsightsListData()) ? 22 : (tmp_18_0 = ctx_r1.modalType() === "goal-business-insights-list" && ctx_r1.getBusinessInsightsListData()) ? 23 : (tmp_18_0 = ctx_r1.modalType() === "recommendation-business-insights-list" && ctx_r1.getRecommendationBusinessInsightsListData()) ? 24 : (tmp_18_0 = ctx_r1.modalType() === "business-insight-detail" && ctx_r1.getBusinessInsightDetailData()) ? 25 : (tmp_18_0 = ctx_r1.modalType() === "metrics-list" && ctx_r1.getMetricsListData()) ? 26 : (tmp_18_0 = ctx_r1.modalType() === "metric" && ctx_r1.getMetricData()) ? 27 : (tmp_18_0 = ctx_r1.modalType() === "charts-list" && ctx_r1.getChartsListData()) ? 28 : (tmp_18_0 = ctx_r1.modalType() === "insight" && ctx_r1.getInsightData()) ? 29 : (tmp_18_0 = ctx_r1.modalType() === "chart" && ctx_r1.getChartData()) ? 30 : (tmp_18_0 = ctx_r1.modalType() === "key-strengths-list" && ctx_r1.getKeyStrengthsListData()) ? 31 : (tmp_18_0 = ctx_r1.modalType() === "critical-gaps-list" && ctx_r1.getCriticalGapsListData()) ? 32 : (tmp_18_0 = ctx_r1.modalType() === "key-strength-detail" && ctx_r1.getKeyStrengthDetailData()) ? 33 : (tmp_18_0 = ctx_r1.modalType() === "critical-gap-detail" && ctx_r1.getCriticalGapDetailData()) ? 34 : (tmp_18_0 = ctx_r1.modalType() === "top-priorities-list" && ctx_r1.getTopPrioritiesListData()) ? 35 : (tmp_18_0 = ctx_r1.modalType() === "top-priority-detail" && ctx_r1.getTopPriorityDetailData()) ? 36 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-strengths-list" && ctx_r1.getFocusAreaStrengthsListData()) ? 37 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-gaps-list" && ctx_r1.getFocusAreaGapsListData()) ? 38 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-opportunities-list" && ctx_r1.getFocusAreaOpportunitiesListData()) ? 39 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-strength-detail" && ctx_r1.getFocusAreaStrengthDetailData()) ? 40 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-gap-detail" && ctx_r1.getFocusAreaGapDetailData()) ? 41 : (tmp_18_0 = ctx_r1.modalType() === "focus-area-opportunity-detail" && ctx_r1.getFocusAreaOpportunityDetailData()) ? 42 : 43, tmp_18_0);
+    i0.ɵɵconditional((tmp_19_0 = ctx_r1.modalType() === "goal-detail" && ctx_r1.getGoalDetailData()) ? 20 : (tmp_19_0 = ctx_r1.modalType() === "goal-insights-list" && ctx_r1.getInsightsListData()) ? 21 : (tmp_19_0 = ctx_r1.modalType() === "recommendation-insights-list" && ctx_r1.getRecommendationInsightsListData()) ? 22 : (tmp_19_0 = ctx_r1.modalType() === "goal-business-insights-list" && ctx_r1.getBusinessInsightsListData()) ? 23 : (tmp_19_0 = ctx_r1.modalType() === "recommendation-business-insights-list" && ctx_r1.getRecommendationBusinessInsightsListData()) ? 24 : (tmp_19_0 = ctx_r1.modalType() === "business-insight-detail" && ctx_r1.getBusinessInsightDetailData()) ? 25 : (tmp_19_0 = ctx_r1.modalType() === "metrics-list" && ctx_r1.getMetricsListData()) ? 26 : (tmp_19_0 = ctx_r1.modalType() === "metric" && ctx_r1.getMetricData()) ? 27 : (tmp_19_0 = ctx_r1.modalType() === "charts-list" && ctx_r1.getChartsListData()) ? 28 : (tmp_19_0 = ctx_r1.modalType() === "insight" && ctx_r1.getInsightData()) ? 29 : (tmp_19_0 = ctx_r1.modalType() === "chart" && ctx_r1.getChartData()) ? 30 : (tmp_19_0 = ctx_r1.modalType() === "key-strengths-list" && ctx_r1.getKeyStrengthsListData()) ? 31 : (tmp_19_0 = ctx_r1.modalType() === "critical-gaps-list" && ctx_r1.getCriticalGapsListData()) ? 32 : (tmp_19_0 = ctx_r1.modalType() === "key-strength-detail" && ctx_r1.getKeyStrengthDetailData()) ? 33 : (tmp_19_0 = ctx_r1.modalType() === "critical-gap-detail" && ctx_r1.getCriticalGapDetailData()) ? 34 : (tmp_19_0 = ctx_r1.modalType() === "top-priorities-list" && ctx_r1.getTopPrioritiesListData()) ? 35 : (tmp_19_0 = ctx_r1.modalType() === "top-priority-detail" && ctx_r1.getTopPriorityDetailData()) ? 36 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-strengths-list" && ctx_r1.getFocusAreaStrengthsListData()) ? 37 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-gaps-list" && ctx_r1.getFocusAreaGapsListData()) ? 38 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-opportunities-list" && ctx_r1.getFocusAreaOpportunitiesListData()) ? 39 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-strength-detail" && ctx_r1.getFocusAreaStrengthDetailData()) ? 40 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-gap-detail" && ctx_r1.getFocusAreaGapDetailData()) ? 41 : (tmp_19_0 = ctx_r1.modalType() === "focus-area-opportunity-detail" && ctx_r1.getFocusAreaOpportunityDetailData()) ? 42 : 43, tmp_19_0);
 } }
 class ProfileAnalysisModalComponent {
     constructor() {
@@ -32545,6 +32545,7 @@ class ProfileAnalysisModalComponent {
         this.document = inject(DOCUMENT);
         this.hostElement = inject(ElementRef);
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.modalReady = signal(false, ...(ngDevMode ? [{ debugName: "modalReady" }] : []));
         this.modalMovedToBody = false;
         this.modalType = signal(null, ...(ngDevMode ? [{ debugName: "modalType" }] : []));
         this.modalTitle = signal('', ...(ngDevMode ? [{ debugName: "modalTitle" }] : []));
@@ -33154,10 +33155,15 @@ class ProfileAnalysisModalComponent {
         effect(() => {
             const open = this.isOpen();
             if (open) {
+                this.modalReady.set(false);
                 this.logContainingBlockInfo();
-                setTimeout(() => this.moveModalToBody(), 0);
+                setTimeout(() => {
+                    this.moveModalToBody();
+                    this.modalReady.set(true);
+                }, 0);
             }
             else {
+                this.modalReady.set(false);
                 this.returnModalToHost();
             }
         });
@@ -33969,9 +33975,9 @@ class ProfileAnalysisModalComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
-        } }, inputs: { isLightMode: [1, "isLightMode"], allMetrics: [1, "allMetrics"], allInsights: [1, "allInsights"], allCharts: [1, "allCharts"], allBusinessInsights: [1, "allBusinessInsights"] }, ngContentSelectors: _c2$f, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", 3, "z-index"], [1, "fixed", "inset-0", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-5xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "text-sm", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-2xl", "font-bold", "leading-tight", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "ml-4"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "z-[10001]", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[80vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "goal", "viewMode", "allInsights", "allMetrics", "allBusinessInsights", "allCharts"], [1, "space-y-4"], [1, "space-y-6"], [3, "recommendation", "viewMode", "forceExpanded", "showNavigationChevron", "inModalContext", "isCompactMode", "fromProfileAnalysis", "animationIndex", "allMetrics", "allCharts", "allInsights", "currentModalState", "goalTitle", "objectiveTitle", "strategyTitle"], [3, "metric", "insights", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState", "viewMode"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "isInModal", "isLoading", "isCompactMode", "viewMode", "currentModalState"], [1, "chart-modal-content"], [3, "keyStrengths", "viewMode"], [3, "criticalGaps", "viewMode"], [3, "strength", "viewMode"], [3, "gap", "viewMode"], [3, "priorities", "viewMode", "focusAreaName"], [3, "priority", "index", "totalCount", "viewMode", "focusAreaName"], [3, "strengths", "viewMode", "categoryTitle"], [3, "gaps", "viewMode", "categoryTitle"], [3, "opportunities", "viewMode", "categoryTitle"], [3, "strength", "viewMode", "allMetrics", "allCharts", "currentModalState"], [3, "gap", "viewMode", "allMetrics", "allCharts", "currentModalState"], [3, "opportunity", "viewMode", "allMetrics", "allCharts", "currentModalState"], ["type", "button", 1, "p-1.5", "rounded-md", "transition-colors", "cursor-pointer", "hover:scale-110", "flex-shrink-0", 3, "click", "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "flex", "items-center", "gap-2", "flex-wrap", "flex-1", "min-w-0"], [1, "opacity-90", "font-medium", "truncate"], ["type", "button", 1, "opacity-75", "hover:opacity-100", "transition-opacity", "cursor-pointer", "truncate", 3, "ngClass"], [1, "opacity-75", "font-medium", "truncate"], ["size", "w-4 h-4", 1, "opacity-50", "flex-shrink-0", 3, "icon"], ["type", "button", 1, "opacity-75", "hover:opacity-100", "transition-opacity", "cursor-pointer", "truncate", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], [1, "px-3", "py-1", "text-xs", "font-semibold", "rounded-full", 3, "ngClass"], [3, "showObjectives", "goal", "viewMode", "allInsights", "allMetrics", "allBusinessInsights", "allCharts"], [1, "text-sm", "mb-6", 3, "ngClass"], [1, "p-5", "rounded-lg", "border", "transition-all", "duration-300", "hover:shadow-lg", "cursor-pointer", "group", 3, "ngClass"], [1, "p-5", "rounded-lg", "border", "transition-all", "duration-300", "hover:shadow-lg", "cursor-pointer", "group", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "flex", "items-center", "justify-center", "rounded-full", "text-xs", "font-bold", "border-2", "backdrop-blur-md", "transition-all", "duration-300", "group-hover:scale-110", 3, "ngClass", "ngStyle"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "mb-2", "transition-colors", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "mt-3", "flex", "items-center"], [1, "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "transition-colors", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "inline-flex", "items-center", "gap-1.5", "px-2.5", "py-1", "text-xs", "font-semibold", "rounded-full", "border", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "cardNavigate", "recommendation", "viewMode", "animationIndex", "showNavigationChevron", "inModalContext"], [1, "space-y-3"], [1, "text-xs", "font-bold", "uppercase", "tracking-wider", "px-1", 3, "ngClass"], [3, "metricClick", "metric", "isLightMode", "animationKey"], [3, "chartClick", "chart", "viewMode", "isLightMode"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "min-h-[500px]"], [3, "chart", "showAxisLabels", "viewMode"], [1, "flex", "items-center", "justify-center", "py-12"], [1, "animate-spin", "rounded-full", "h-8", "w-8", 3, "ngClass"], [3, "priorityClick", "priorities", "viewMode", "focusAreaName"]], template: function ProfileAnalysisModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isLightMode: [1, "isLightMode"], allMetrics: [1, "allMetrics"], allInsights: [1, "allInsights"], allCharts: [1, "allCharts"], allBusinessInsights: [1, "allBusinessInsights"] }, ngContentSelectors: _c2$f, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], [1, "fixed", "inset-0", "overflow-y-auto", 3, "z-index", "visibility"], [1, "fixed", "inset-0", "overflow-y-auto", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-5xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "text-sm", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-2"], [1, "text-2xl", "font-bold", "leading-tight", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "ml-4"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "z-[10001]", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[80vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [3, "goal", "viewMode", "allInsights", "allMetrics", "allBusinessInsights", "allCharts"], [1, "space-y-4"], [1, "space-y-6"], [3, "recommendation", "viewMode", "forceExpanded", "showNavigationChevron", "inModalContext", "isCompactMode", "fromProfileAnalysis", "animationIndex", "allMetrics", "allCharts", "allInsights", "currentModalState", "goalTitle", "objectiveTitle", "strategyTitle"], [3, "metric", "insights", "charts", "allCharts", "isLightMode", "isInModal", "currentModalState", "viewMode"], [3, "insight", "allMetrics", "charts", "allCharts", "allBusinessInsights", "isLightMode", "isInModal", "isLoading", "isCompactMode", "viewMode", "currentModalState"], [1, "chart-modal-content"], [3, "keyStrengths", "viewMode"], [3, "criticalGaps", "viewMode"], [3, "strength", "viewMode"], [3, "gap", "viewMode"], [3, "priorities", "viewMode", "focusAreaName"], [3, "priority", "index", "totalCount", "viewMode", "focusAreaName"], [3, "strengths", "viewMode", "categoryTitle"], [3, "gaps", "viewMode", "categoryTitle"], [3, "opportunities", "viewMode", "categoryTitle"], [3, "strength", "viewMode", "allMetrics", "allCharts", "currentModalState"], [3, "gap", "viewMode", "allMetrics", "allCharts", "currentModalState"], [3, "opportunity", "viewMode", "allMetrics", "allCharts", "currentModalState"], ["type", "button", 1, "p-1.5", "rounded-md", "transition-colors", "cursor-pointer", "hover:scale-110", "flex-shrink-0", 3, "click", "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "flex", "items-center", "gap-2", "flex-wrap", "flex-1", "min-w-0"], [1, "opacity-90", "font-medium", "truncate"], ["type", "button", 1, "opacity-75", "hover:opacity-100", "transition-opacity", "cursor-pointer", "truncate", 3, "ngClass"], [1, "opacity-75", "font-medium", "truncate"], ["size", "w-4 h-4", 1, "opacity-50", "flex-shrink-0", 3, "icon"], ["type", "button", 1, "opacity-75", "hover:opacity-100", "transition-opacity", "cursor-pointer", "truncate", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], [1, "px-3", "py-1", "text-xs", "font-semibold", "rounded-full", 3, "ngClass"], [3, "showObjectives", "goal", "viewMode", "allInsights", "allMetrics", "allBusinessInsights", "allCharts"], [1, "text-sm", "mb-6", 3, "ngClass"], [1, "p-5", "rounded-lg", "border", "transition-all", "duration-300", "hover:shadow-lg", "cursor-pointer", "group", 3, "ngClass"], [1, "p-5", "rounded-lg", "border", "transition-all", "duration-300", "hover:shadow-lg", "cursor-pointer", "group", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "flex", "items-center", "justify-center", "rounded-full", "text-xs", "font-bold", "border-2", "backdrop-blur-md", "transition-all", "duration-300", "group-hover:scale-110", 3, "ngClass", "ngStyle"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "mb-2", "transition-colors", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "mt-3", "flex", "items-center"], [1, "flex-shrink-0"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "transition-colors", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "inline-flex", "items-center", "gap-1.5", "px-2.5", "py-1", "text-xs", "font-semibold", "rounded-full", "border", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [3, "cardNavigate", "recommendation", "viewMode", "animationIndex", "showNavigationChevron", "inModalContext"], [1, "space-y-3"], [1, "text-xs", "font-bold", "uppercase", "tracking-wider", "px-1", 3, "ngClass"], [3, "metricClick", "metric", "isLightMode", "animationKey"], [3, "chartClick", "chart", "viewMode", "isLightMode"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "min-h-[500px]"], [3, "chart", "showAxisLabels", "viewMode"], [1, "flex", "items-center", "justify-center", "py-12"], [1, "animate-spin", "rounded-full", "h-8", "w-8", 3, "ngClass"], [3, "priorityClick", "priorities", "viewMode", "focusAreaName"]], template: function ProfileAnalysisModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵconditionalCreate(0, ProfileAnalysisModalComponent_Conditional_0_Template, 44, 19, "div", 2);
+            i0.ɵɵconditionalCreate(0, ProfileAnalysisModalComponent_Conditional_0_Template, 44, 21, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, i1$1.NgStyle, SymphiqIconComponent, InsightCardComponent, ChartCardComponent, MetricListItemComponent, MetricCardComponent, RecommendationCardComponent, KeyStrengthsListModalContentComponent, CriticalGapsListModalContentComponent, KeyStrengthDetailModalContentComponent, CriticalGapDetailModalContentComponent, GoalDetailModalContentComponent, TopPrioritiesListModalContentComponent, TopPriorityDetailModalContentComponent, FocusAreaStrengthsListModalContentComponent, FocusAreaGapsListModalContentComponent, FocusAreaOpportunitiesListModalContentComponent, FocusAreaStrengthDetailModalContentComponent, FocusAreaGapDetailModalContentComponent, FocusAreaOpportunityDetailModalContentComponent], encapsulation: 2, data: { animation: [
@@ -34012,7 +34018,7 @@ class ProfileAnalysisModalComponent {
                 ],
                 template: `
     @if (isOpen()) {
-      <div #modalWrapper class="fixed inset-0 overflow-y-auto" [style.z-index]="baseZIndex()" (click)="closeModal()">
+      <div #modalWrapper class="fixed inset-0 overflow-y-auto" [style.z-index]="baseZIndex()" [style.visibility]="modalReady() ? 'visible' : 'hidden'" (click)="closeModal()">
         <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
           <div [ngClass]="isLightMode() ? 'bg-slate-900/15' : 'bg-slate-950/25'" class="fixed inset-0 backdrop-blur-sm" [style.z-index]="backdropZIndex()" aria-hidden="true" @fadeIn></div>