npm - @eric-emg/symphiq-components - Versions diffs - 1.2.165 → 1.2.167 - Mend

@eric-emg/symphiq-components 1.2.165 → 1.2.167

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 (7) hide show

package/fesm2022/symphiq-components.mjs +1017 -430
package/fesm2022/symphiq-components.mjs.map +1 -1
package/index.d.ts +78 -41
package/index.d.ts.map +1 -1
package/package.json +1 -1
package/src/styles.css +4 -0
package/styles.css +105 -0

package/fesm2022/symphiq-components.mjs CHANGED Viewed

@@ -3190,7 +3190,7 @@ class CompetitiveScoreService {
             }]
     }], null, null); })();
-const _forTrack0$N = ($index, $item) => $item.category;
+const _forTrack0$O = ($index, $item) => $item.category;
 function CompetitivePositioningSummaryComponent_Conditional_1_For_47_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵelement(1, "div", 37);
@@ -3349,7 +3349,7 @@ function CompetitivePositioningSummaryComponent_Conditional_1_Template(rf, ctx)
     i0.ɵɵelementEnd()();
     i0.ɵɵnamespaceHTML();
     i0.ɵɵelementStart(43, "div", 24)(44, "div", 25)(45, "div", 26);
-    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$N);
+    i0.ɵɵrepeaterCreate(46, CompetitivePositioningSummaryComponent_Conditional_1_For_47_Template, 15, 12, "div", 27, _forTrack0$O);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(48, "div", 28)(49, "button", 29);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_1_Template_button_click_49_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -3558,7 +3558,7 @@ function CompetitivePositioningSummaryComponent_Conditional_2_Template(rf, ctx)
     i0.ɵɵelementStart(32, "div", 50)(33, "h4", 51);
     i0.ɵɵtext(34, "By Funnel Stage");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$N);
+    i0.ɵɵrepeaterCreate(35, CompetitivePositioningSummaryComponent_Conditional_2_For_36_Template, 12, 11, "div", 52, _forTrack0$O);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "div", 28)(38, "button", 53);
     i0.ɵɵlistener("click", function CompetitivePositioningSummaryComponent_Conditional_2_Template_button_click_38_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.scrollToCompetitive.emit()); });
@@ -8235,7 +8235,7 @@ class MetricCardComponent {
 const _c0$10 = () => [1, 2, 3];
 const _c1$A = (a0, a1, a2) => [a0, a1, a2];
 const _c2$p = (a0, a1) => [a0, a1];
-const _forTrack0$M = ($index, $item) => $item.metric;
+const _forTrack0$N = ($index, $item) => $item.metric;
 const _forTrack1$6 = ($index, $item) => $item.dimensionValue;
 function BreakdownSectionComponent_Conditional_0_For_7_For_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -8558,7 +8558,7 @@ function BreakdownSectionComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(6, BreakdownSectionComponent_Conditional_1_Conditional_6_Template, 3, 0, "div", 11);
     i0.ɵɵelementStart(7, "div", 12);
-    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$M);
+    i0.ɵɵrepeaterCreate(8, BreakdownSectionComponent_Conditional_1_For_9_Template, 28, 18, "div", 13, _forTrack0$N);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -11597,7 +11597,7 @@ class ChartCardComponent {
     }], null, { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] }); }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChartCardComponent, { className: "ChartCardComponent", filePath: "lib/components/shared/chart-card.component.ts", lineNumber: 101 }); })();
-const _forTrack0$L = ($index, $item) => $item.id;
+const _forTrack0$M = ($index, $item) => $item.id;
 function FunnelStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵnamespaceSVG();
@@ -11711,7 +11711,7 @@ function FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template(r
 } }
 function FunnelStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$L);
+    i0.ɵɵrepeaterCreate(1, FunnelStrengthsListModalContentComponent_Conditional_2_For_2_Template, 30, 22, "button", 7, _forTrack0$M);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -11921,7 +11921,7 @@ class FunnelStrengthsListModalContentComponent {
     }], null, { strengths: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengths", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelStrengthsListModalContentComponent, { className: "FunnelStrengthsListModalContentComponent", filePath: "lib/components/funnel-analysis-dashboard/funnel-strengths-list-modal-content.component.ts", lineNumber: 93 }); })();
-const _forTrack0$K = ($index, $item) => $item.severity;
+const _forTrack0$L = ($index, $item) => $item.severity;
 const _forTrack1$5 = ($index, $item) => $item.id;
 function FunnelWeaknessesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -12100,7 +12100,7 @@ function FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template(
 } }
 function FunnelWeaknessesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$K);
+    i0.ɵɵrepeaterCreate(1, FunnelWeaknessesListModalContentComponent_Conditional_2_For_2_Template, 9, 7, "div", null, _forTrack0$L);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -13883,7 +13883,7 @@ class ProfileItemLookupService {
     }], null, null); })();
 const _c0$Z = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$J = ($index, $item) => $item.id;
+const _forTrack0$K = ($index, $item) => $item.id;
 function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
@@ -13904,7 +13904,7 @@ function RelatedAreaChipsComponent_Conditional_0_For_2_Template(rf, ctx) { if (r
 } }
 function RelatedAreaChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$J);
+    i0.ɵɵrepeaterCreate(1, RelatedAreaChipsComponent_Conditional_0_For_2_Template, 4, 5, "button", 1, _forTrack0$K);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -14144,7 +14144,7 @@ class CompetitorChipListComponent {
     }], null, { relatedCompetitorIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedCompetitorIds", required: false }] }], competitors: [{ type: i0.Input, args: [{ isSignal: true, alias: "competitors", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isDark: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDark", required: false }] }], inModalContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "inModalContext", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorChipListComponent, { className: "CompetitorChipListComponent", filePath: "lib/components/business-analysis-dashboard/shared/competitor-chip-list.component.ts", lineNumber: 37 }); })();
-const _forTrack0$I = ($index, $item) => $item.id;
+const _forTrack0$J = ($index, $item) => $item.id;
 function CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 8);
@@ -14227,7 +14227,7 @@ function CompetitorContextSectionComponent_Conditional_0_Template(rf, ctx) { if
     i0.ɵɵconditionalCreate(8, CompetitorContextSectionComponent_Conditional_0_Conditional_8_Template, 5, 4, "button", 4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(9, "div", 5)(10, "div", 6);
-    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$I);
+    i0.ɵɵrepeaterCreate(11, CompetitorContextSectionComponent_Conditional_0_For_12_Template, 10, 6, "button", 7, _forTrack0$J);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -14418,7 +14418,7 @@ class CompetitorContextSectionComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitorContextSectionComponent, { className: "CompetitorContextSectionComponent", filePath: "lib/components/business-analysis-dashboard/cards/competitor-context-section.component.ts", lineNumber: 86 }); })();
 const _c0$X = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$H = ($index, $item) => $item.id;
+const _forTrack0$I = ($index, $item) => $item.id;
 function RelatedRecommendationChipsComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 4);
@@ -14461,7 +14461,7 @@ function RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Templat
 } }
 function RelatedRecommendationChipsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$H);
+    i0.ɵɵrepeaterCreate(2, RelatedRecommendationChipsComponent_Conditional_0_For_3_Template, 5, 6, "button", 2, _forTrack0$I);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(4, RelatedRecommendationChipsComponent_Conditional_0_Conditional_4_Template, 5, 4, "button", 3);
     i0.ɵɵelementEnd();
@@ -14918,7 +14918,7 @@ class RelatedFunnelInsightsSectionComponent {
     }], null, { insightCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "insightCount", required: true }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], insightsClicked: [{ type: i0.Output, args: ["insightsClicked"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RelatedFunnelInsightsSectionComponent, { className: "RelatedFunnelInsightsSectionComponent", filePath: "lib/components/business-analysis-dashboard/shared/related-funnel-insights-section.component.ts", lineNumber: 47 }); })();
-const _forTrack0$G = ($index, $item) => $item.order;
+const _forTrack0$H = ($index, $item) => $item.order;
 function RecommendationCardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
     i0.ɵɵelement(1, "symphiq-icon", 11);
@@ -15271,7 +15271,7 @@ function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6
 } }
 function RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$G);
+    i0.ɵɵrepeaterCreate(1, RecommendationCardComponent_Conditional_13_Conditional_12_Conditional_6_For_2_Template, 13, 9, "div", 41, _forTrack0$H);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -16154,7 +16154,7 @@ const ModalComponent_Conditional_0_Conditional_19_Conditional_4_Defer_2_DepsFn =
 const ModalComponent_Conditional_0_Conditional_19_Conditional_5_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return barChart_component; }).then(m => m.BarChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ModalComponent_Conditional_0_Conditional_19_Conditional_7_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
-const _forTrack0$F = ($index, $item) => $item.id || $index;
+const _forTrack0$G = ($index, $item) => $item.id || $index;
 function ModalComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 13);
@@ -16528,7 +16528,7 @@ function ModalComponent_Conditional_0_Conditional_22_For_3_Template(rf, ctx) { i
 function ModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 22);
     i0.ɵɵconditionalCreate(1, ModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 55);
-    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$F);
+    i0.ɵɵrepeaterCreate(2, ModalComponent_Conditional_0_Conditional_22_For_3_Template, 2, 5, "div", null, _forTrack0$G);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -20765,7 +20765,7 @@ class NarrativeTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NarrativeTooltipComponent, { className: "NarrativeTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/narrative-tooltip.component.ts", lineNumber: 27 }); })();
-const _forTrack0$E = ($index, $item) => $item.name;
+const _forTrack0$F = ($index, $item) => $item.name;
 function CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);
     i0.ɵɵelement(3, "div", 10);
@@ -20809,7 +20809,7 @@ function CompetitiveStatusTooltipComponent_Conditional_6_Template(rf, ctx) { if
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 5);
-    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$E);
+    i0.ɵɵrepeaterCreate(5, CompetitiveStatusTooltipComponent_Conditional_6_For_6_Template, 13, 12, "div", 6, _forTrack0$F);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21056,7 +21056,7 @@ class CompetitiveStatusTooltipComponent {
     }], null, { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], currencySymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencySymbol", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CompetitiveStatusTooltipComponent, { className: "CompetitiveStatusTooltipComponent", filePath: "lib/components/funnel-analysis-dashboard/tooltip/competitive-status-tooltip.component.ts", lineNumber: 60 }); })();
-const _forTrack0$D = ($index, $item) => $item.name;
+const _forTrack0$E = ($index, $item) => $item.name;
 function FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "div", 10)(2, "span", 11);
     i0.ɵɵtext(3);
@@ -21096,7 +21096,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_8_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_8_For_7_Template, 11, 9, "div", 9, _forTrack0$E);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21146,7 +21146,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_9_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_9_For_7_Template, 11, 9, "div", 9, _forTrack0$E);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -21196,7 +21196,7 @@ function FunnelStageCompetitiveTooltipComponent_Conditional_10_Template(rf, ctx)
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 8);
-    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$D);
+    i0.ɵɵrepeaterCreate(6, FunnelStageCompetitiveTooltipComponent_Conditional_10_For_7_Template, 11, 9, "div", 9, _forTrack0$E);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -22385,7 +22385,7 @@ class MobileFABComponent {
     }], null, { isLightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLightMode", required: false }] }], isCompactMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompactMode", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], scrollToTop: [{ type: i0.Output, args: ["scrollToTop"] }], toggleView: [{ type: i0.Output, args: ["toggleView"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MobileFABComponent, { className: "MobileFABComponent", filePath: "lib/components/funnel-analysis-dashboard/mobile-fab.component.ts", lineNumber: 75 }); })();
-const _forTrack0$C = ($index, $item) => $item.id;
+const _forTrack0$D = ($index, $item) => $item.id;
 function MobileBottomNavComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 3);
@@ -22443,7 +22443,7 @@ class MobileBottomNavComponent {
     static { this.ɵfac = function MobileBottomNavComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MobileBottomNavComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileBottomNavComponent, selectors: [["symphiq-mobile-bottom-nav"]], inputs: { isLightMode: [1, "isLightMode"], sections: [1, "sections"], activeSection: [1, "activeSection"] }, outputs: { navigate: "navigate" }, decls: 4, vars: 1, consts: [[1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "lg:hidden", "border-t", "backdrop-blur-md", 3, "ngClass"], [1, "flex", "items-center", "justify-around", "px-2", "py-3"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "gap-1", "px-3", "py-2", "rounded-lg", "transition-all", "duration-200", "active:scale-95", "min-w-[64px]", 3, "click", "ngClass"], [1, "w-6", "h-6", 3, "innerHTML"], [1, "text-xs", "font-medium"]], template: function MobileBottomNavComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$C);
+            i0.ɵɵrepeaterCreate(2, MobileBottomNavComponent_For_3_Template, 4, 3, "button", 2, _forTrack0$D);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClass());
@@ -22648,7 +22648,7 @@ class SearchService {
     }], null, null); })();
 const _c0$V = ["searchInput"];
-const _forTrack0$B = ($index, $item) => $item.id;
+const _forTrack0$C = ($index, $item) => $item.id;
 function SearchBarComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 18);
@@ -22741,7 +22741,7 @@ function SearchBarComponent_Conditional_0_Conditional_14_For_2_Template(rf, ctx)
 } }
 function SearchBarComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$B);
+    i0.ɵɵrepeaterCreate(1, SearchBarComponent_Conditional_0_Conditional_14_For_2_Template, 16, 12, "button", 19, _forTrack0$C);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -23232,7 +23232,7 @@ class SearchHighlightDirective {
             }]
     }], () => [], { symphiqSearchHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "libSymphiqSearchHighlight", required: false }] }], highlightId: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightId", required: false }] }] }); })();
-const _forTrack0$A = ($index, $item) => $item.value;
+const _forTrack0$B = ($index, $item) => $item.value;
 const _forTrack1$4 = ($index, $item) => $item.performanceItemId;
 function CompetitiveScorecardComponent_For_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -23607,7 +23607,7 @@ class CompetitiveScorecardComponent {
             i0.ɵɵtext(9);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(10, "div", 6);
-            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$A);
+            i0.ɵɵrepeaterCreate(11, CompetitiveScorecardComponent_For_12_Template, 4, 7, "div", 7, _forTrack0$B);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 8)(14, "table", 9)(15, "thead")(16, "tr", 10)(17, "th", 11);
             i0.ɵɵtext(18, "Metric");
@@ -24242,7 +24242,7 @@ class SectionDividerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], animationDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDelay", required: false }] }], sectionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionIcon", required: false }] }], subsections: [{ type: i0.Input, args: [{ isSignal: true, alias: "subsections", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionDividerComponent, { className: "SectionDividerComponent", filePath: "lib/components/shared/section-divider.component.ts", lineNumber: 36 }); })();
-const _forTrack0$z = ($index, $item) => $item.id;
+const _forTrack0$A = ($index, $item) => $item.id;
 function FloatingTocComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 8);
@@ -24294,7 +24294,7 @@ function FloatingTocComponent_For_19_Conditional_7_For_2_Template(rf, ctx) { if
 } }
 function FloatingTocComponent_For_19_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$z);
+    i0.ɵɵrepeaterCreate(1, FloatingTocComponent_For_19_Conditional_7_For_2_Template, 4, 4, "button", 19, _forTrack0$A);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const section_r2 = i0.ɵɵnextContext().$implicit;
@@ -24690,7 +24690,7 @@ class FloatingTocComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵnamespaceHTML();
             i0.ɵɵelementStart(17, "nav", 9);
-            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$z);
+            i0.ɵɵrepeaterCreate(18, FloatingTocComponent_For_19_Template, 8, 6, "div", 10, _forTrack0$A);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(20, "div", 11)(21, "button", 7);
             i0.ɵɵlistener("click", function FloatingTocComponent_Template_button_click_21_listener() { return ctx.scrollToTop(); });
@@ -24844,7 +24844,7 @@ class FloatingTocComponent {
     }], null, { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], containerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerElement", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FloatingTocComponent, { className: "FloatingTocComponent", filePath: "lib/components/business-analysis-dashboard/floating-toc.component.ts", lineNumber: 125 }); })();
-const _forTrack0$y = ($index, $item) => $item.id;
+const _forTrack0$z = ($index, $item) => $item.id;
 function JourneyProgressIndicatorComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(0, "svg", 22);
@@ -25080,7 +25080,7 @@ function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if
     i0.ɵɵtext(2, "Journey Progress");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 44);
-    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$y);
+    i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_Conditional_23_For_5_Template, 14, 8, "div", 45, _forTrack0$z);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -25529,7 +25529,7 @@ class JourneyProgressIndicatorComponent {
     static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JourneyProgressIndicatorComponent, selectors: [["symphiq-journey-progress-indicator"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], showNextStepAction: [1, "showNextStepAction"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { nextStepClick: "nextStepClick", stepClick: "stepClick" }, decls: 25, vars: 12, consts: [[1, "sticky", "top-[60px]", "z-40", "border-b", "pt-8", "pb-6", "px-6", "transition-all", "duration-200", "overflow-visible", 3, "ngClass"], [1, "max-w-7xl", "mx-auto", "overflow-visible"], [1, "hidden", "lg:flex", "items-start", "justify-between", "overflow-visible"], [1, "flex-1", "flex", "items-start", "justify-start", "overflow-visible"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "lg:hidden"], [1, "flex", "items-center", "justify-between", "gap-4"], [1, "flex-1", "flex", "items-center", "gap-3"], [1, "w-10", "h-10", "min-w-[2.5rem]", "min-h-[2.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5"], [1, "w-3", "h-3", "min-w-[0.75rem]", "min-h-[0.75rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "text-sm", "font-bold", 3, "ngClass"], [1, "flex-1", "text-left"], [1, "flex", "items-center", "gap-1.5", "relative", 3, "mouseenter", "mouseleave", "click"], [1, "text-xs", "cursor-pointer", 3, "ngClass"], [1, "p-0.5", "rounded-full", "cursor-pointer", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["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, "absolute", "top-full", "left-0", "mt-2", "w-80", "max-w-[calc(100vw-2rem)]", "p-4", "rounded-lg", "shadow-xl", "z-50", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "disabled", "ngClass", "cursor-pointer", "cursor-not-allowed", "opacity-50", "hover:scale-105"], [1, "flex", "flex-col", "items-center", "cursor-pointer", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave"], [1, "w-8", "h-8", "min-w-[2rem]", "min-h-[2rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", "step-circle", "relative", "z-10", "mb-1.5", 3, "click", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], [1, "w-2.5", "h-2.5", "min-w-[0.625rem]", "min-h-[0.625rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "text-[10px]", "text-center", "leading-tight", "whitespace-nowrap", "max-w-[64px]", "overflow-hidden", "text-ellipsis", 3, "click", "ngClass"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass", "expanded-card-right", "expanded-card-left", "top", "left", "right"], [1, "flex-1", "h-0.5", "transition-all", "duration-200", "mt-[16px]", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "absolute", "rounded-lg", "shadow-2xl", "z-50", "pointer-events-none", 3, "ngClass"], [1, "flex", "items-start", "px-4", "py-3", "expanded-content"], [1, "flex", "items-start", "gap-2", "w-full"], [1, "text-xs", "font-bold", "flex-shrink-0", "mt-0.5", 3, "ngClass"], [1, "flex", "flex-col", "gap-1", "flex-1"], [1, "text-sm", "font-bold", "leading-tight", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "description-fade", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-2", "whitespace-nowrap", "ml-4", "mt-0", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "animate-spin"], ["cx", "12", "cy", "12", "r", "10", "stroke", "currentColor", "stroke-width", "4", 1, "opacity-25"], ["fill", "currentColor", "d", "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", 1, "opacity-75"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "text-sm", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-start", "gap-2"], [1, "w-6", "h-6", "min-w-[1.5rem]", "min-h-[1.5rem]", "rounded-full", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], [1, "w-2", "h-2", "min-w-[0.5rem]", "min-h-[0.5rem]", "rounded-full", "animate-pulse", 3, "ngClass"], [1, "w-1.5", "h-1.5", "min-w-[0.375rem]", "min-h-[0.375rem]", "rounded-full", 3, "ngClass"], [1, "text-[10px]", "font-bold", 3, "ngClass"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "text-[10px]", "mt-0.5", 3, "ngClass"], ["type", "button", 1, "px-3", "py-1.5", "rounded-lg", "font-medium", "text-xs", "transition-all", "duration-200", "flex-shrink-0", "flex", "items-center", "gap-1.5", "whitespace-nowrap", 3, "click", "disabled", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5", "animate-spin"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function JourneyProgressIndicatorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
-            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$y);
+            i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$z);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
             i0.ɵɵelementEnd();
@@ -27682,7 +27682,7 @@ class ViewModeSwitcherModalComponent {
 const _c0$T = a0 => ({ name: "check-badge", source: a0 });
 const _c1$y = a0 => ({ name: "check-circle", source: a0 });
 const _c2$o = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$x = ($index, $item) => $item.area;
+const _forTrack0$y = ($index, $item) => $item.area;
 function KeyStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -27751,7 +27751,7 @@ function KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function KeyStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$x);
+    i0.ɵɵrepeaterCreate(1, KeyStrengthsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$y);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -27915,7 +27915,7 @@ const _c0$S = a0 => ({ name: "shield-check", source: a0 });
 const _c1$x = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c2$n = a0 => ({ name: "document-text", source: a0 });
 const _c3$h = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$w = ($index, $item) => $item.area;
+const _forTrack0$x = ($index, $item) => $item.area;
 function CriticalGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -28000,7 +28000,7 @@ function CriticalGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function CriticalGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$w);
+    i0.ɵɵrepeaterCreate(1, CriticalGapsListModalContentComponent_Conditional_2_For_2_Template, 23, 25, "button", 6, _forTrack0$x);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -28229,7 +28229,7 @@ class CriticalGapsListModalContentComponent {
 const _c0$R = a0 => ({ name: "check-circle", source: a0 });
 const _c1$w = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$v = ($index, $item) => $item.questionId;
+const _forTrack0$w = ($index, $item) => $item.questionId;
 function KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
     i0.ɵɵtext(2);
@@ -28276,7 +28276,7 @@ function KeyStrengthDetailModalContentComponent_Conditional_13_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 12);
-    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$v);
+    i0.ɵɵrepeaterCreate(5, KeyStrengthDetailModalContentComponent_Conditional_13_For_6_Template, 9, 10, "div", 13, _forTrack0$w);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -28471,7 +28471,7 @@ class KeyStrengthDetailModalContentComponent {
 const _c0$Q = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$v = a0 => ({ name: "document-text", source: a0 });
 const _c2$m = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$u = ($index, $item) => $item.questionId;
+const _forTrack0$v = ($index, $item) => $item.questionId;
 function CriticalGapDetailModalContentComponent_Conditional_20_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23)(1, "p", 25);
     i0.ɵɵtext(2, " Gap Identified: ");
@@ -28539,7 +28539,7 @@ function CriticalGapDetailModalContentComponent_Conditional_20_Template(rf, ctx)
     i0.ɵɵtext(3, " Supporting Evidence ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 17);
-    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$u);
+    i0.ɵɵrepeaterCreate(5, CriticalGapDetailModalContentComponent_Conditional_20_For_6_Template, 10, 11, "div", 18, _forTrack0$v);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -30335,7 +30335,7 @@ const _c0$P = a0 => ({ name: "check-badge", source: a0 });
 const _c1$u = a0 => ({ name: "check-circle", source: a0 });
 const _c2$l = a0 => ({ name: "chevron-right", source: a0 });
 const _c3$g = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$t = ($index, $item) => $item.capability;
+const _forTrack0$u = ($index, $item) => $item.capability;
 function FocusAreaStrengthsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -30450,7 +30450,7 @@ function FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Templat
 } }
 function FocusAreaStrengthsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$t);
+    i0.ɵɵrepeaterCreate(1, FocusAreaStrengthsListModalContentComponent_Conditional_2_For_2_Template, 16, 18, "button", 6, _forTrack0$u);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -30657,7 +30657,7 @@ class FocusAreaStrengthsListModalContentComponent {
 const _c0$O = a0 => ({ name: "exclamation-triangle", source: a0 });
 const _c1$t = a0 => ({ name: "exclamation-circle", source: a0 });
 const _c2$k = a0 => ({ name: "chevron-right", source: a0 });
-function _forTrack0$s($index, $item) { return this.getGapTitle($item); }
+function _forTrack0$t($index, $item) { return this.getGapTitle($item); }
 function FocusAreaGapsListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -30774,7 +30774,7 @@ function FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template(rf,
 } }
 function FocusAreaGapsListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$s, true);
+    i0.ɵɵrepeaterCreate(1, FocusAreaGapsListModalContentComponent_Conditional_2_For_2_Template, 15, 18, "button", 6, _forTrack0$t, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31051,7 +31051,7 @@ class FocusAreaGapsListModalContentComponent {
 const _c0$N = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$s = a0 => ({ name: "chevron-right", source: a0 });
 const _c2$j = a0 => ({ name: "chart-bar", source: a0 });
-const _forTrack0$r = ($index, $item) => $item.opportunity;
+const _forTrack0$s = ($index, $item) => $item.opportunity;
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵelement(1, "symphiq-icon", 3);
@@ -31142,7 +31142,7 @@ function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Tem
 } }
 function FocusAreaOpportunitiesListModalContentComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$r);
+    i0.ɵɵrepeaterCreate(1, FocusAreaOpportunitiesListModalContentComponent_Conditional_2_For_2_Template, 11, 11, "button", 6, _forTrack0$s);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -31319,7 +31319,7 @@ class FocusAreaOpportunitiesListModalContentComponent {
 const _c0$M = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$r = a0 => ({ name: "chat-bubble-left-right", source: a0 });
-const _forTrack0$q = ($index, $item) => $item.performanceItemId;
+const _forTrack0$r = ($index, $item) => $item.performanceItemId;
 function FocusAreaStrengthDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -31389,7 +31389,7 @@ function FocusAreaStrengthDetailModalContentComponent_Conditional_4_Template(rf,
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 9);
-    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$q);
+    i0.ɵɵrepeaterCreate(4, FocusAreaStrengthDetailModalContentComponent_Conditional_4_For_5_Template, 4, 5, "button", 10, _forTrack0$r);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -32040,7 +32040,7 @@ class FocusAreaGapDetailModalContentComponent {
 const _c0$K = a0 => ({ name: "chevron-right", source: a0 });
 const _c1$q = () => [];
-const _forTrack0$p = ($index, $item) => $item.performanceItemId;
+const _forTrack0$q = ($index, $item) => $item.performanceItemId;
 function FocusAreaOpportunityDetailModalContentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "p", 2);
     i0.ɵɵtext(2);
@@ -32092,7 +32092,7 @@ function FocusAreaOpportunityDetailModalContentComponent_Conditional_3_Template(
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 6);
-    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$p);
+    i0.ɵɵrepeaterCreate(4, FocusAreaOpportunityDetailModalContentComponent_Conditional_3_For_5_Template, 4, 5, "button", 7, _forTrack0$q);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -37235,7 +37235,7 @@ const _c4$7 = a0 => ({ name: "academic-cap", source: a0 });
 const _c5$5 = a0 => ({ name: "information-circle", source: a0 });
 const _c6$2 = a0 => ({ name: "signal", source: a0 });
 const _c7$1 = a0 => ({ name: "wrench-screwdriver", source: a0 });
-const _forTrack0$o = ($index, $item) => $item.name;
+const _forTrack0$p = ($index, $item) => $item.name;
 function ProductCategoryCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
     i0.ɵɵtext(1);
@@ -37366,7 +37366,7 @@ function ProductCategoryCardComponent_Conditional_16_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(6, "symphiq-visualization-container", 21);
     i0.ɵɵlistener("visualizationClick", function ProductCategoryCardComponent_Conditional_16_Template_symphiq_visualization_container_visualizationClick_6_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.openHorizontalBarModal($event)); });
     i0.ɵɵelementStart(7, "div", 22);
-    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$o);
+    i0.ɵɵrepeaterCreate(8, ProductCategoryCardComponent_Conditional_16_For_9_Template, 2, 5, "div", 23, _forTrack0$p);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -42356,7 +42356,7 @@ const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_5_D
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_31_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
 const _c3$8 = a0 => ({ name: "arrow-left", source: a0 });
 const _c4$5 = a0 => ({ name: "chevron-right", source: a0 });
-const _forTrack0$n = ($index, $item) => $item.performanceItemId || $index;
+const _forTrack0$o = ($index, $item) => $item.performanceItemId || $index;
 const _forTrack1$3 = ($index, $item) => $item.id || $index;
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_10_For_5_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -42567,7 +42567,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_21_For_3_Template, 13, 10, "div", 53, _forTrack0$o);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r11 = ctx;
@@ -42647,7 +42647,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Templa
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20);
     i0.ɵɵconditionalCreate(1, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_Conditional_1_Template, 2, 2, "p", 52);
-    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(2, ProfileAnalysisModalComponent_Conditional_0_Conditional_22_For_3_Template, 13, 10, "div", 53, _forTrack0$o);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r14 = ctx;
@@ -42766,7 +42766,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Directly Affected Metric ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_0_For_4_Template, 1, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -42800,7 +42800,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵelementStart(0, "div", 69)(1, "h3", 70);
     i0.ɵɵtext(2, " Indirectly Affected Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(3, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_1_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack0$o);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext(2);
@@ -42832,7 +42832,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_
     i0.ɵɵproperty("metric", metric_r38)("isLightMode", ctx_r1.isLightMode())("animationKey", $index_r39);
 } }
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$n);
+    i0.ɵɵrepeaterCreate(0, ProfileAnalysisModalComponent_Conditional_0_Conditional_27_Conditional_2_For_1_Template, 2, 3, "div", null, _forTrack0$o);
 } if (rf & 2) {
     const data_r32 = i0.ɵɵnextContext();
     i0.ɵɵrepeater(data_r32.metrics);
@@ -45532,7 +45532,7 @@ const _c0$u = a0 => ({ name: "list-bullet", source: a0 });
 const _c1$d = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$9 = a0 => ({ name: "check-circle", source: a0 });
 const _c3$6 = a0 => ({ name: "exclamation-circle", source: a0 });
-const _forTrack0$m = ($index, $item) => $item.order;
+const _forTrack0$n = ($index, $item) => $item.order;
 function RecommendationActionStepsModalComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 5);
     i0.ɵɵelement(2, "symphiq-icon", 6);
@@ -45686,7 +45686,7 @@ class RecommendationActionStepsModalComponent {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, RecommendationActionStepsModalComponent_Conditional_1_Template, 8, 7, "div", 1);
             i0.ɵɵelementStart(2, "div", 2);
-            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$m);
+            i0.ɵɵrepeaterCreate(3, RecommendationActionStepsModalComponent_For_4_Template, 13, 11, "div", 3, _forTrack0$n);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(5, RecommendationActionStepsModalComponent_Conditional_5_Template, 4, 5, "div", 4);
             i0.ɵɵelementEnd();
@@ -46482,7 +46482,7 @@ const _c2$8 = () => [1, 2, 3, 4, 5, 6];
 const _c3$5 = () => [1, 2, 3];
 const _c4$3 = () => [1, 2, 3, 4];
 const _c5$2 = () => [1, 2];
-const _forTrack0$l = ($index, $item) => $item.value;
+const _forTrack0$m = ($index, $item) => $item.value;
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 11);
 } }
@@ -46521,7 +46521,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_click_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_mousedown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_div_pointerdown_3_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(4, "select", 48);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_25_Template_select_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(5, SymphiqFunnelAnalysisDashboardComponent_Conditional_25_For_6_Template, 2, 2, "option", 49, _forTrack0$m);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -46601,7 +46601,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template(rf, ctx
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("mousedown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); })("pointerdown", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
     i0.ɵɵelementStart(1, "select", 54);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_46_Template_select_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.changeSectionFilter($event)); });
-    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_46_For_3_Template, 2, 2, "option", 49, _forTrack0$m);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -47347,7 +47347,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵconditionalCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_14_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(15, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_select_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCategoryFilter($event)); });
-    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_17_Template, 2, 1, null, null, _forTrack0$m);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "button", 124);
     i0.ɵɵlistener("click", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleSortOrder()); });
@@ -47361,7 +47361,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Te
     i0.ɵɵtext(23, "Sort");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(24, "div", 127)(25, "div", 128);
-    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(26, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_For_27_Template, 1, 1, null, null, _forTrack0$m);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(28, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_28_Template, 3, 1, "div", 129)(29, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_4_Conditional_29_Template, 4, 5, "div", 130);
     i0.ɵɵelementEnd()();
@@ -47538,7 +47538,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Te
     i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_12_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(13, "select", 164);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeBreakdownFilter($event)); });
-    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(14, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_For_15_Template, 2, 1, null, null, _forTrack0$m);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(16, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_16_Template, 3, 1, "div", 95)(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_5_Conditional_17_Template, 4, 5, "div", 165);
     i0.ɵɵelementEnd()();
@@ -47649,7 +47649,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Te
     i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_13_Template, 2, 0, "div", 122);
     i0.ɵɵelementStart(14, "select", 123);
     i0.ɵɵlistener("ngModelChange", function SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Template_select_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r40); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.changeCompetitiveFilter($event)); });
-    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$l);
+    i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_For_16_Template, 2, 1, null, null, _forTrack0$m);
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_17_Template, 6, 5, "div", 95)(18, SymphiqFunnelAnalysisDashboardComponent_Conditional_51_Conditional_6_Conditional_18_Template, 1, 6, "symphiq-competitive-intelligence-view", 92);
     i0.ɵɵelementEnd()();
@@ -50215,7 +50215,7 @@ function getTrendClasses(trendPercent, viewMode) {
     }
 }
-const _forTrack0$k = ($index, $item) => $item.performanceItemId;
+const _forTrack0$l = ($index, $item) => $item.performanceItemId;
 function SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17)(1, "p", 18);
     i0.ɵɵtext(2);
@@ -50834,7 +50834,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
             i0.ɵɵconditionalCreate(12, SymphiqFunnelAnalysisPreviewComponent_Conditional_12_Template, 3, 7, "div", 9);
             i0.ɵɵconditionalCreate(13, SymphiqFunnelAnalysisPreviewComponent_Conditional_13_Template, 18, 23, "div", 10);
             i0.ɵɵelementStart(14, "div", 11);
-            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$k);
+            i0.ɵɵrepeaterCreate(15, SymphiqFunnelAnalysisPreviewComponent_For_16_Template, 10, 17, "div", 12, _forTrack0$l);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(17, SymphiqFunnelAnalysisPreviewComponent_Conditional_17_Template, 9, 11, "div", 9);
             i0.ɵɵconditionalCreate(18, SymphiqFunnelAnalysisPreviewComponent_Conditional_18_Template, 14, 19, "div", 9);
@@ -51077,7 +51077,7 @@ class SymphiqFunnelAnalysisPreviewComponent {
     }], () => [], { analysisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelAnalysis", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], onViewAnalysis: [{ type: i0.Output, args: ["onViewAnalysis"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqFunnelAnalysisPreviewComponent, { className: "SymphiqFunnelAnalysisPreviewComponent", filePath: "lib/components/funnel-analysis-preview/symphiq-funnel-analysis-preview.component.ts", lineNumber: 228 }); })();
-const _forTrack0$j = ($index, $item) => $item.id;
+const _forTrack0$k = ($index, $item) => $item.id;
 function SymphiqWelcomeDashboardComponent_For_65_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31)(1, "div", 36)(2, "div", 37)(3, "span", 38);
     i0.ɵɵtext(4);
@@ -51372,7 +51372,7 @@ class SymphiqWelcomeDashboardComponent {
             i0.ɵɵtext(62, " Your Onboarding Journey ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(63, "div", 30);
-            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$j);
+            i0.ɵɵrepeaterCreate(64, SymphiqWelcomeDashboardComponent_For_65_Template, 9, 3, "div", 31, _forTrack0$k);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(66, "div", 32);
             i0.ɵɵnamespaceSVG();
@@ -52411,7 +52411,7 @@ class FocusAreaToolsModalComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 const _c0$r = ["shopNameInput"];
-const _forTrack0$i = ($index, $item) => $item.focusAreaDomain;
+const _forTrack0$j = ($index, $item) => $item.focusAreaDomain;
 function SymphiqCreateAccountDashboardComponent_Conditional_23_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Shopify ");
 } }
@@ -52738,7 +52738,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 55);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 56, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_12_For_6_Template, 7, 5, "div", 56, _forTrack0$j);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52768,7 +52768,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 65);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 66, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_13_For_6_Template, 3, 3, "div", 66, _forTrack0$j);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52798,7 +52798,7 @@ function SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_Te
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 68);
-    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 69, _forTrack0$i);
+    i0.ɵɵrepeaterCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_25_Conditional_14_For_6_Template, 3, 3, "div", 69, _forTrack0$j);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -54186,6 +54186,338 @@ class SymphiqCreateAccountDashboardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 625 }); })();
+const _forTrack0$i = ($index, $item) => $item.id;
+function SymphiqConnectGaDashboardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 17);
+    i0.ɵɵelement(5, "path", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(6, "div", 19)(7, "h2", 20);
+    i0.ɵɵtext(8, " Connect Google Analytics 4 ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 21);
+    i0.ɵɵtext(10, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 22)(12, "button", 23);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_21_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.googleButtonClick.emit()); });
+    i0.ɵɵelement(13, "div", 24);
+    i0.ɵɵelementStart(14, "div", 25)(15, "div", 26);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(16, "svg", 27);
+    i0.ɵɵelement(17, "path", 28)(18, "path", 29)(19, "path", 30)(20, "path", 31)(21, "path", 32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(22, "span", 33);
+    i0.ɵɵtext(23, "Continue with Google");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(24, "div", 34);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(25, "svg", 35);
+    i0.ɵɵelement(26, "path", 36);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(27, "div", 19)(28, "p", 37)(29, "strong", 38);
+    i0.ɵɵtext(30, "Note:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(31, " When you click \"Continue with Google\", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop. ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(32, "div", 39)(33, "div", 40);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_21_Template_div_click_33_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpanded()); });
+    i0.ɵɵelementStart(34, "span", 41);
+    i0.ɵɵtext(35, " How do we use your Google Analytics data? ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(36, "svg", 42);
+    i0.ɵɵelement(37, "path", 43);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(38, "div", 4)(39, "div", 44)(40, "p", 45);
+    i0.ɵɵtext(41, " We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "p", 37);
+    i0.ɵɵtext(43, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
+    i0.ɵɵelementStart(44, "strong", 46);
+    i0.ɵɵtext(45, "Google API Services User Data Policy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(46, " including the Limited Use requirements. ");
+    i0.ɵɵelementEnd()()()()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
+    i0.ɵɵadvance(15);
+    i0.ɵɵproperty("ngClass", ctx_r1.noteBoxClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.noteTextClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandableCardClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandableHeaderClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandableHeaderTextClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("rotate-180", ctx_r1.isExpanded());
+    i0.ɵɵproperty("ngClass", ctx_r1.chevronClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("max-h-0", !ctx_r1.isExpanded())("opacity-0", !ctx_r1.isExpanded())("max-h-[1000px]", ctx_r1.isExpanded())("opacity-100", ctx_r1.isExpanded());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedContentClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedTextClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.expandedTextClasses());
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Change Google Analytics Property ");
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Choose Your Property ");
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 53);
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 59);
+    i0.ɵɵelement(2, "path", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Account: ", ctx.name || "Unnamed Account", " ");
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Conditional_0_Template, 5, 3, "div", 58);
+} if (rf & 2) {
+    let tmp_13_0;
+    const property_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵconditional((tmp_13_0 = ctx_r1.getAccountForProperty(property_r4)) ? 0 : -1, tmp_13_0);
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 50);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template_label_click_0_listener() { const property_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectProperty(property_r4.id)); })("keydown.enter", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template_label_keydown_enter_0_listener() { const property_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectProperty(property_r4.id)); })("keydown.space", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template_label_keydown_space_0_listener($event) { const property_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.selectProperty(property_r4.id); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementStart(1, "div", 51)(2, "div", 52);
+    i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_3_Template, 1, 0, "div", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 54)(5, "div", 55);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(6, "svg", 56);
+    i0.ɵɵelement(7, "path", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(8, "div", 57);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Template, 1, 1);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const property_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.propertyCardClasses(property_r4.id));
+    i0.ɵɵattribute("aria-checked", (ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() : ctx_r1.selectedGaPropertyId()) === property_r4.id);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.radioIndicatorClasses(property_r4.id));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() : ctx_r1.selectedGaPropertyId()) === property_r4.id ? 3 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.propertyNameClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", property_r4.name || "Unnamed Property", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(property_r4.gaAccountId ? 10 : -1);
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template, 11, 8, "label", 49, _forTrack0$i);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.gaProperties());
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "p", 61);
+    i0.ɵɵtext(2, " No properties found. Please connect your Google Analytics account. ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.emptyStateTextClasses());
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 17);
+    i0.ɵɵelement(5, "path", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(6, "div", 19)(7, "h2", 20);
+    i0.ɵɵconditionalCreate(8, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_8_Template, 1, 0)(9, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "p", 21);
+    i0.ɵɵtext(11, " Please choose the Google Analytics property you'd like to link to your shop. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(12, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_Template, 3, 0, "div", 47)(13, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template, 3, 1, "div", 48);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isEditingProperty() ? 8 : 9);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.gaProperties() && ctx_r1.gaProperties().length > 0 ? 12 : 13);
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 59);
+    i0.ɵɵelement(2, "path", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span", 0);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx.name || "Unnamed Account", " ");
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68)(1, "div", 71)(2, "div", 72);
+    i0.ɵɵtext(3, " Connected ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 73);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(5, "svg", 74);
+    i0.ɵɵelement(6, "path", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(7, "div")(8, "div", 75);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template, 5, 3, "div", 58);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_8_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.selectedPropertyCardClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.statusBadgeClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.propertyNameClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx.name || "Unnamed Property", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_8_0 = ctx_r1.selectedPropertyAccount()) ? 10 : -1, tmp_8_0);
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(4, "svg", 17);
+    i0.ɵɵelement(5, "path", 62);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(6, "div", 19)(7, "div", 63)(8, "div")(9, "h2", 64);
+    i0.ɵɵtext(10, " Connected to Google Analytics ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "p", 61);
+    i0.ɵɵtext(12, " Your analytics data is linked ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "button", 65);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_23_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.enableEditMode()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(14, "svg", 66);
+    i0.ɵɵelement(15, "path", 67);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(16, " Edit ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(17, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Template, 11, 6, "div", 68);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(18, "button", 69);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_23_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.reconnectWithDifferentAccount()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(19, "svg", 66);
+    i0.ɵɵelement(20, "path", 70);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(21, " Use Different Google Account ");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    let tmp_7_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.editButtonClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.selectedProperty()) ? 17 : -1, tmp_7_0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.reconnectButtonClasses());
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 76)(2, "div", 77)(3, "button", 78);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
+    i0.ɵɵtext(4, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 79);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.submitPropertyChange()); });
+    i0.ɵɵtext(6, " Submit ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.hasPropertyChanged())("ngClass", ctx_r1.submitButtonClasses());
+} }
 class SymphiqConnectGaDashboardComponent {
     constructor() {
         this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
@@ -54195,14 +54527,56 @@ class SymphiqConnectGaDashboardComponent {
         this.scrollElement = input(...(ngDevMode ? [undefined, { debugName: "scrollElement" }] : []));
         this.forDemo = input(false, ...(ngDevMode ? [{ debugName: "forDemo" }] : []));
         this.maxAccessibleStepId = input(undefined, ...(ngDevMode ? [{ debugName: "maxAccessibleStepId" }] : []));
+        this.showNextStepAction = input(true, ...(ngDevMode ? [{ debugName: "showNextStepAction" }] : []));
+        this.gaProperties = input(undefined, ...(ngDevMode ? [{ debugName: "gaProperties" }] : []));
+        this.gaAccounts = input(undefined, ...(ngDevMode ? [{ debugName: "gaAccounts" }] : []));
+        this.selectedGaPropertyId = input(undefined, ...(ngDevMode ? [{ debugName: "selectedGaPropertyId" }] : []));
         this.stepClick = output();
         this.nextStepClick = output();
         this.googleButtonClick = output();
+        this.onPropertySelect = output();
+        this.onPropertyChange = output();
+        this.onReconnectGoogle = output();
         this.headerScrollService = inject(HeaderScrollService);
         this.JourneyStepIdEnum = JourneyStepIdEnum;
         this.COLLAPSE_THRESHOLD = 20;
         this.EXPAND_THRESHOLD = 10;
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+        this.isEditingProperty = signal(false, ...(ngDevMode ? [{ debugName: "isEditingProperty" }] : []));
+        this.currentEditingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentEditingPropertyId" }] : []));
+        this.isConnectState = computed(() => {
+            const properties = this.gaProperties();
+            return !properties || properties.length === 0;
+        }, ...(ngDevMode ? [{ debugName: "isConnectState" }] : []));
+        this.isSelectionState = computed(() => {
+            const properties = this.gaProperties();
+            const selectedId = this.selectedGaPropertyId();
+            const isEditing = this.isEditingProperty();
+            return properties && properties.length > 0 && (!selectedId || isEditing);
+        }, ...(ngDevMode ? [{ debugName: "isSelectionState" }] : []));
+        this.isSelectedState = computed(() => {
+            const properties = this.gaProperties();
+            const selectedId = this.selectedGaPropertyId();
+            const isEditing = this.isEditingProperty();
+            return properties && properties.length > 0 && selectedId !== undefined && !isEditing;
+        }, ...(ngDevMode ? [{ debugName: "isSelectedState" }] : []));
+        this.hasPropertyChanged = computed(() => {
+            const current = this.currentEditingPropertyId();
+            const selected = this.selectedGaPropertyId();
+            return current !== undefined && current !== selected;
+        }, ...(ngDevMode ? [{ debugName: "hasPropertyChanged" }] : []));
+        this.selectedProperty = computed(() => {
+            const selectedId = this.selectedGaPropertyId();
+            if (selectedId === undefined)
+                return undefined;
+            return this.getPropertyById(selectedId);
+        }, ...(ngDevMode ? [{ debugName: "selectedProperty" }] : []));
+        this.selectedPropertyAccount = computed(() => {
+            const property = this.selectedProperty();
+            if (!property || !property.gaAccountId)
+                return undefined;
+            return this.getAccountById(property.gaAccountId);
+        }, ...(ngDevMode ? [{ debugName: "selectedPropertyAccount" }] : []));
         this.embeddedScrollEffect = effect(() => {
             const scrollEvent = this.scrollEvent();
             const isEmbedded = this.embedded();
@@ -54250,6 +54624,46 @@ class SymphiqConnectGaDashboardComponent {
     toggleExpanded() {
         this.isExpanded.update(v => !v);
     }
+    getPropertyById(id) {
+        const properties = this.gaProperties();
+        return properties?.find(p => p.id === id);
+    }
+    getAccountById(id) {
+        const accounts = this.gaAccounts();
+        return accounts?.find(a => a.id === id);
+    }
+    getAccountForProperty(property) {
+        if (!property.gaAccountId)
+            return undefined;
+        return this.getAccountById(property.gaAccountId);
+    }
+    selectProperty(propertyId) {
+        if (!this.isEditingProperty()) {
+            this.onPropertySelect.emit(propertyId);
+        }
+        else {
+            this.currentEditingPropertyId.set(propertyId);
+        }
+    }
+    enableEditMode() {
+        this.isEditingProperty.set(true);
+        this.currentEditingPropertyId.set(this.selectedGaPropertyId());
+    }
+    cancelEditMode() {
+        this.isEditingProperty.set(false);
+        this.currentEditingPropertyId.set(undefined);
+    }
+    submitPropertyChange() {
+        const newPropertyId = this.currentEditingPropertyId();
+        if (newPropertyId !== undefined && this.hasPropertyChanged()) {
+            this.onPropertyChange.emit(newPropertyId);
+            this.isEditingProperty.set(false);
+            this.currentEditingPropertyId.set(undefined);
+        }
+    }
+    reconnectWithDifferentAccount() {
+        this.onReconnectGoogle.emit();
+    }
     getContainerClasses() {
         return this.isLightMode()
             ? 'min-h-screen bg-gradient-to-br from-slate-50 to-slate-100'
@@ -54340,91 +54754,114 @@ class SymphiqConnectGaDashboardComponent {
             ? 'text-slate-700'
             : 'text-slate-300';
     }
+    propertyCardClasses(propertyId) {
+        const isSelected = this.isEditingProperty()
+            ? this.currentEditingPropertyId() === propertyId
+            : this.selectedGaPropertyId() === propertyId;
+        const baseClasses = this.isLightMode()
+            ? 'border-2 rounded-xl transition-all duration-200 cursor-pointer hover:shadow-md'
+            : 'border-2 rounded-xl transition-all duration-200 cursor-pointer hover:shadow-md';
+        const selectedClasses = this.isLightMode()
+            ? 'border-blue-500 bg-blue-50 shadow-sm'
+            : 'border-blue-400 bg-blue-900/20 shadow-sm';
+        const unselectedClasses = this.isLightMode()
+            ? 'border-slate-200 bg-white hover:border-slate-300'
+            : 'border-slate-700 bg-slate-800 hover:border-slate-600';
+        return `${baseClasses} ${isSelected ? selectedClasses : unselectedClasses}`;
+    }
+    radioIndicatorClasses(propertyId) {
+        const isSelected = this.isEditingProperty()
+            ? this.currentEditingPropertyId() === propertyId
+            : this.selectedGaPropertyId() === propertyId;
+        const baseClasses = 'transition-all duration-200';
+        const selectedClasses = this.isLightMode()
+            ? 'border-blue-500 text-blue-500'
+            : 'border-blue-400 text-blue-400';
+        const unselectedClasses = this.isLightMode()
+            ? 'border-slate-300'
+            : 'border-slate-600';
+        return `${baseClasses} ${isSelected ? selectedClasses : unselectedClasses}`;
+    }
+    propertyNameClasses() {
+        return this.isLightMode()
+            ? 'text-slate-900 font-semibold'
+            : 'text-white font-semibold';
+    }
+    accountNameClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600 text-sm'
+            : 'text-slate-400 text-sm';
+    }
+    selectedPropertyCardClasses() {
+        return this.isLightMode()
+            ? 'bg-gradient-to-br from-white to-blue-50 border-blue-200'
+            : 'bg-gradient-to-br from-slate-800 to-slate-900 border-blue-800/30';
+    }
+    editButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-600 text-white hover:bg-blue-700 shadow-sm'
+            : 'bg-blue-500 text-white hover:bg-blue-600 shadow-sm';
+    }
+    reconnectButtonClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
+            : 'text-slate-400 hover:text-white hover:bg-slate-700';
+    }
+    stickyButtonContainerClasses() {
+        return this.isLightMode()
+            ? 'bg-white/80 border-slate-200'
+            : 'bg-slate-900/80 border-slate-700';
+    }
+    cancelButtonClasses() {
+        return this.isLightMode()
+            ? 'border-2 border-slate-300 text-slate-700 hover:bg-slate-50'
+            : 'border-2 border-slate-600 text-slate-300 hover:bg-slate-700';
+    }
+    submitButtonClasses() {
+        return this.isLightMode()
+            ? 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-slate-300 disabled:text-slate-500 disabled:cursor-not-allowed disabled:hover:scale-100'
+            : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-slate-700 disabled:text-slate-500 disabled:cursor-not-allowed disabled:hover:scale-100';
+    }
+    statusBadgeClasses() {
+        return this.isLightMode()
+            ? 'bg-green-100 text-green-700 border-green-200'
+            : 'bg-green-900/20 text-green-400 border-green-800/30';
+    }
+    emptyStateTextClasses() {
+        return this.isLightMode()
+            ? 'text-slate-600'
+            : 'text-slate-400';
+    }
     static { this.ɵfac = function SymphiqConnectGaDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqConnectGaDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqConnectGaDashboardComponent, selectors: [["symphiq-connect-ga-dashboard"]], hostVars: 4, hostBindings: function SymphiqConnectGaDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
         } if (rf & 2) {
             i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick" }, decls: 70, vars: 66, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "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, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div");
-            i0.ɵɵelement(2, "div", 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(3, "div", 2);
-            i0.ɵɵelementStart(4, "div", 3)(5, "header", 4)(6, "div", 5)(7, "div", 6)(8, "div", 7)(9, "div")(10, "h1", 0);
-            i0.ɵɵtext(11, " Connect Google Analytics 4 ");
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], showNextStepAction: [1, "showNextStepAction"], gaProperties: [1, "gaProperties"], gaAccounts: [1, "gaAccounts"], selectedGaPropertyId: [1, "selectedGaPropertyId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick", onPropertySelect: "onPropertySelect", onPropertyChange: "onPropertyChange", onReconnectGoogle: "onReconnectGoogle" }, decls: 25, vars: 40, consts: [[3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "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, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"], ["role", "radiogroup", "aria-label", "Google Analytics Properties", 1, "space-y-3"], [1, "text-center", "py-8"], ["tabindex", "0", "role", "radio", 1, "block", 3, "ngClass"], ["tabindex", "0", "role", "radio", 1, "block", 3, "click", "keydown.enter", "keydown.space", "ngClass"], [1, "flex", "items-center", "gap-4", "p-4"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2", "mb-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "truncate", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"], [1, "text-base", 3, "ngClass"], ["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"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 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", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "rounded-xl", "border-2", "p-6", "mb-6", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "flex", "items-start", "gap-3", "mb-4"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "border", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", 3, "ngClass"], [1, "text-lg", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "flex-1", "sm:flex-none", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "disabled", "ngClass"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "header", 3)(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "div")(8, "h1", 0);
+            i0.ɵɵtext(9, " Connect Google Analytics 4 ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "p", 0);
-            i0.ɵɵtext(13, " Link your analytics data ");
+            i0.ɵɵelementStart(10, "p", 0);
+            i0.ɵɵtext(11, " Link your analytics data ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(14, "div", 5)(15, "div", 8)(16, "div", 7)(17, "div", 9)(18, "h1", 0);
-            i0.ɵɵtext(19, " Connect Google Analytics 4 ");
+            i0.ɵɵelementStart(12, "div", 4)(13, "div", 7)(14, "div", 6)(15, "div", 8)(16, "h1", 0);
+            i0.ɵɵtext(17, " Connect Google Analytics 4 ");
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(20, "symphiq-journey-progress-indicator", 10);
-            i0.ɵɵlistener("stepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "main", 11)(22, "div", 12)(23, "div", 13)(24, "div", 14)(25, "div", 15)(26, "div", 16);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(27, "svg", 17);
-            i0.ɵɵelement(28, "path", 18);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(29, "div", 19)(30, "h2", 20);
-            i0.ɵɵtext(31, " Connect Google Analytics 4 ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "p", 21);
-            i0.ɵɵtext(33, " Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration. ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "div", 22)(35, "button", 23);
-            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_button_click_35_listener() { return ctx.googleButtonClick.emit(); });
-            i0.ɵɵelement(36, "div", 24);
-            i0.ɵɵelementStart(37, "div", 25)(38, "div", 26);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(39, "svg", 27);
-            i0.ɵɵelement(40, "path", 28)(41, "path", 29)(42, "path", 30)(43, "path", 31)(44, "path", 32);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(45, "span", 33);
-            i0.ɵɵtext(46, "Continue with Google");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(47, "div", 34);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(48, "svg", 35);
-            i0.ɵɵelement(49, "path", 36);
+            i0.ɵɵelementStart(18, "symphiq-journey-progress-indicator", 9);
+            i0.ɵɵlistener("stepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_18_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqConnectGaDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_18_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(50, "div", 19)(51, "p", 37)(52, "strong", 38);
-            i0.ɵɵtext(53, "Note:");
+            i0.ɵɵelementStart(19, "main", 10)(20, "div", 11);
+            i0.ɵɵconditionalCreate(21, SymphiqConnectGaDashboardComponent_Conditional_21_Template, 47, 25, "div", 12);
+            i0.ɵɵconditionalCreate(22, SymphiqConnectGaDashboardComponent_Conditional_22_Template, 14, 7, "div", 12);
+            i0.ɵɵconditionalCreate(23, SymphiqConnectGaDashboardComponent_Conditional_23_Template, 22, 8, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵtext(54, " When you click \"Continue with Google\", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop. ");
+            i0.ɵɵconditionalCreate(24, SymphiqConnectGaDashboardComponent_Conditional_24_Template, 7, 4, "div", 13);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(55, "div", 39)(56, "div", 40);
-            i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Template_div_click_56_listener() { return ctx.toggleExpanded(); });
-            i0.ɵɵelementStart(57, "span", 41);
-            i0.ɵɵtext(58, " How do we use your Google Analytics data? ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(59, "svg", 42);
-            i0.ɵɵelement(60, "path", 43);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(61, "div", 5)(62, "div", 44)(63, "p", 45);
-            i0.ɵɵtext(64, " We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement. ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(65, "p", 37);
-            i0.ɵɵtext(66, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
-            i0.ɵɵelementStart(67, "strong", 46);
-            i0.ɵɵtext(68, "Google API Services User Data Policy");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtext(69, " including the Limited Use requirements. ");
-            i0.ɵɵelementEnd()()()()()()()()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵclassMap(ctx.embedded() ? "sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30" : "fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30");
-            i0.ɵɵadvance();
-            i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
-            i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-cyan-500" : "bg-gradient-to-r from-blue-400 to-cyan-400");
-            i0.ɵɵadvance();
             i0.ɵɵclassProp("light-mode", ctx.isLightMode());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
@@ -54443,40 +54880,15 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate" : "text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.CONNECT_GA4)("showNextStepAction", true)("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.containerClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.contentClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.iconContainerClasses());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.titleClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.textClasses());
-            i0.ɵɵadvance(15);
-            i0.ɵɵproperty("ngClass", ctx.noteBoxClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.noteIconClasses());
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.CONNECT_GA4)("showNextStepAction", ctx.showNextStepAction())("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", ctx.noteTextClasses());
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", ctx.expandableCardClasses());
+            i0.ɵɵconditional(ctx.isConnectState() ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.expandableHeaderClasses());
+            i0.ɵɵconditional(ctx.isSelectionState() ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.expandableHeaderTextClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("rotate-180", ctx.isExpanded());
-            i0.ɵɵproperty("ngClass", ctx.chevronClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("max-h-0", !ctx.isExpanded())("opacity-0", !ctx.isExpanded())("max-h-[1000px]", ctx.isExpanded())("opacity-100", ctx.isExpanded());
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.expandedContentClasses());
+            i0.ɵɵconditional(ctx.isSelectedState() ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.expandedTextClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.expandedTextClasses());
+            i0.ɵɵconditional(ctx.isEditingProperty() ? 24 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}.animated-bubbles[_ngcontent-%COMP%]{overflow:hidden}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out;opacity:.05}.animated-bubbles[_ngcontent-%COMP%]:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode[_ngcontent-%COMP%]:before, .animated-bubbles.light-mode[_ngcontent-%COMP%]:after{opacity:.03}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-icon[_ngcontent-%COMP%]{height:20px;margin-right:12px;min-width:20px;width:20px}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-content-wrapper[_ngcontent-%COMP%]{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-contents[_ngcontent-%COMP%]{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-state[_ngcontent-%COMP%]{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-contents[_ngcontent-%COMP%]{opacity:38%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-icon[_ngcontent-%COMP%]{opacity:38%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):active   .gsi-material-button-state[_ngcontent-%COMP%], .light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):focus   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#303030;opacity:12%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#303030;opacity:8%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-icon[_ngcontent-%COMP%]{height:20px;margin-right:12px;min-width:20px;width:20px}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-content-wrapper[_ngcontent-%COMP%]{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-contents[_ngcontent-%COMP%]{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-state[_ngcontent-%COMP%]{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#e3e3e31f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-contents[_ngcontent-%COMP%]{opacity:38%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-icon[_ngcontent-%COMP%]{opacity:38%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):active   .gsi-material-button-state[_ngcontent-%COMP%], .dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):focus   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#fff;opacity:12%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#fff;opacity:8%}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqConnectGaDashboardComponent, [{
@@ -54486,15 +54898,6 @@ class SymphiqConnectGaDashboardComponent {
                     '[class.dark]': '!isLightMode()'
                 }, template: `
     <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
       <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
       <div class="relative z-[51]">
@@ -54549,119 +54952,288 @@ class SymphiqConnectGaDashboardComponent {
         <symphiq-journey-progress-indicator
           [viewMode]="viewMode()"
           [currentStepId]="JourneyStepIdEnum.CONNECT_GA4"
-          [showNextStepAction]="true"
+          [showNextStepAction]="showNextStepAction()"
           [forDemo]="forDemo()"
           [maxAccessibleStepId]="maxAccessibleStepId()"
           (stepClick)="stepClick.emit($event)"
           (nextStepClick)="nextStepClick.emit()"
         />
-        <main class="relative">
+        <main class="relative pb-32">
           <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-            <!-- Main Content Card -->
-            <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
-              <div [ngClass]="contentClasses()" class="px-8 py-8">
-                <div class="flex items-start gap-6">
-                  <!-- Icon Container -->
-                  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
-                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-                    </svg>
-                  </div>
+            <!-- Connect to Google State -->
+            @if (isConnectState()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start gap-6">
+                    <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                      </svg>
+                    </div>
-                  <div class="flex-1">
-                    <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
-                      Connect Google Analytics 4
-                    </h2>
+                    <div class="flex-1">
+                      <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
+                        Connect Google Analytics 4
+                      </h2>
-                    <!-- Description -->
-                    <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
-                      Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration.
-                    </p>
+                      <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
+                        Integrating Google Analytics is essential. We use it to pull the majority of your data in a read-only format, ensuring no changes are made to your analytics. Please make sure you have access to the Google Analytics property associated with this shop to ensure proper integration.
+                      </p>
-                    <!-- Continue with Google Button -->
-                    <div class="mb-6">
-                      <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
-                        <div class="gsi-material-button-state"></div>
-                        <div class="gsi-material-button-content-wrapper">
-                          <div class="gsi-material-button-icon">
-                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
-                              <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-                              <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-                              <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-                              <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
-                              <path fill="none" d="M0 0h48v48H0z"></path>
-                            </svg>
+                      <div class="mb-6">
+                        <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
+                          <div class="gsi-material-button-state"></div>
+                          <div class="gsi-material-button-content-wrapper">
+                            <div class="gsi-material-button-icon">
+                              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;">
+                                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                                <path fill="none" d="M0 0h48v48H0z"></path>
+                              </svg>
+                            </div>
+                            <span class="gsi-material-button-contents">Continue with Google</span>
                           </div>
-                          <span class="gsi-material-button-contents">Continue with Google</span>
+                        </button>
+                      </div>
+                      <div [ngClass]="noteBoxClasses()" class="p-4 rounded-lg border flex items-start gap-3">
+                        <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <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"></path>
+                        </svg>
+                        <div class="flex-1">
+                          <p [ngClass]="noteTextClasses()" class="text-sm leading-relaxed">
+                            <strong class="font-semibold">Note:</strong> When you click "Continue with Google", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop.
+                          </p>
                         </div>
-                      </button>
+                      </div>
+                      <div [ngClass]="expandableCardClasses()" class="mt-6 rounded-lg border overflow-hidden">
+                        <div (click)="toggleExpanded()" [ngClass]="expandableHeaderClasses()" class="px-4 py-4 cursor-pointer flex items-center justify-between gap-3 transition-colors duration-200">
+                          <span [ngClass]="expandableHeaderTextClasses()" class="text-base font-semibold">
+                            How do we use your Google Analytics data?
+                          </span>
+                          <svg [ngClass]="chevronClasses()" class="w-5 h-5 flex-shrink-0 transition-transform duration-300" [class.rotate-180]="isExpanded()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                          </svg>
+                        </div>
+                        <div class="transition-all duration-300 ease-in-out overflow-hidden" [class.max-h-0]="!isExpanded()" [class.opacity-0]="!isExpanded()" [class.max-h-[1000px]]="isExpanded()" [class.opacity-100]="isExpanded()">
+                          <div [ngClass]="expandedContentClasses()" class="px-4 pb-4 pt-2">
+                            <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed mb-4">
+                              We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement.
+                            </p>
+                            <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed">
+                              Symphiq's use and transfer to any other app of information received from Google APIs will adhere to <strong class="font-bold">Google API Services User Data Policy</strong> including the Limited Use requirements.
+                            </p>
+                          </div>
+                        </div>
+                      </div>
                     </div>
+                  </div>
+                </div>
+              </div>
+            }
-                    <!-- Note Section -->
-                    <div [ngClass]="noteBoxClasses()" class="p-4 rounded-lg border flex items-start gap-3">
-                      <svg class="w-5 h-5 flex-shrink-0 mt-0.5" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <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"></path>
+            <!-- Property Selection State -->
+            @if (isSelectionState()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start gap-6">
+                    <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                       </svg>
-                      <div class="flex-1">
-                        <p [ngClass]="noteTextClasses()" class="text-sm leading-relaxed">
-                          <strong class="font-semibold">Note:</strong> When you click "Continue with Google", you'll be asked to sign in to your Google account and select the Analytics property associated with your shop.
-                        </p>
-                      </div>
                     </div>
-                    <!-- Expandable Data Usage Card -->
-                    <div [ngClass]="expandableCardClasses()" class="mt-6 rounded-lg border overflow-hidden">
-                      <!-- Header (Clickable) -->
-                      <div
-                        (click)="toggleExpanded()"
-                        [ngClass]="expandableHeaderClasses()"
-                        class="px-4 py-4 cursor-pointer flex items-center justify-between gap-3 transition-colors duration-200">
-                        <span [ngClass]="expandableHeaderTextClasses()" class="text-base font-semibold">
-                          How do we use your Google Analytics data?
-                        </span>
-                        <svg
-                          [ngClass]="chevronClasses()"
-                          class="w-5 h-5 flex-shrink-0 transition-transform duration-300"
-                          [class.rotate-180]="isExpanded()"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                        </svg>
-                      </div>
+                    <div class="flex-1">
+                      <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
+                        @if (isEditingProperty()) {
+                          Change Google Analytics Property
+                        } @else {
+                          Choose Your Property
+                        }
+                      </h2>
-                      <!-- Expanded Content -->
-                      <div
-                        class="transition-all duration-300 ease-in-out overflow-hidden"
-                        [class.max-h-0]="!isExpanded()"
-                        [class.opacity-0]="!isExpanded()"
-                        [class.max-h-[1000px]]="isExpanded()"
-                        [class.opacity-100]="isExpanded()">
-                        <div [ngClass]="expandedContentClasses()" class="px-4 pb-4 pt-2">
-                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed mb-4">
-                            We request access to your Google Analytics data to aggregate this information into funnel stages and display trends within our application. This allows us to provide you with a clear overview of your web performance. By analyzing the data, we can map out recommendations, measure the impact of your current strategies, and suggest actionable next steps for improvement.
+                      <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
+                        Please choose the Google Analytics property you'd like to link to your shop.
+                      </p>
+                      @if (gaProperties() && gaProperties()!.length > 0) {
+                        <div class="space-y-3" role="radiogroup" aria-label="Google Analytics Properties">
+                          @for (property of gaProperties(); track property.id) {
+                            <label
+                              [ngClass]="propertyCardClasses(property.id!)"
+                              class="block"
+                              (click)="selectProperty(property.id!)"
+                              (keydown.enter)="selectProperty(property.id!)"
+                              (keydown.space)="selectProperty(property.id!); $event.preventDefault()"
+                              tabindex="0"
+                              role="radio"
+                              [attr.aria-checked]="(isEditingProperty() ? currentEditingPropertyId() : selectedGaPropertyId()) === property.id">
+                              <div class="flex items-center gap-4 p-4">
+                                <div [ngClass]="radioIndicatorClasses(property.id!)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
+                                  @if ((isEditingProperty() ? currentEditingPropertyId() : selectedGaPropertyId()) === property.id) {
+                                    <div class="w-3 h-3 rounded-full bg-current"></div>
+                                  }
+                                </div>
+                                <div class="flex-1 min-w-0">
+                                  <div class="flex items-center gap-2 mb-1">
+                                    <svg class="w-5 h-5 flex-shrink-0" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                                    </svg>
+                                    <div [ngClass]="propertyNameClasses()" class="truncate">
+                                      {{ property.name || 'Unnamed Property' }}
+                                    </div>
+                                  </div>
+                                  @if (property.gaAccountId) {
+                                    @if (getAccountForProperty(property); as account) {
+                                      <div class="flex items-center gap-2 mt-1">
+                                        <svg class="w-4 h-4 flex-shrink-0" [ngClass]="accountNameClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                        </svg>
+                                        <span [ngClass]="accountNameClasses()" class="truncate">
+                                          Account: {{ account.name || 'Unnamed Account' }}
+                                        </span>
+                                      </div>
+                                    }
+                                  }
+                                </div>
+                              </div>
+                            </label>
+                          }
+                        </div>
+                      } @else {
+                        <div class="text-center py-8">
+                          <p [ngClass]="emptyStateTextClasses()" class="text-base">
+                            No properties found. Please connect your Google Analytics account.
                           </p>
-                          <p [ngClass]="expandedTextClasses()" class="text-sm leading-relaxed">
-                            Symphiq's use and transfer to any other app of information received from Google APIs will adhere to <strong class="font-bold">Google API Services User Data Policy</strong> including the Limited Use requirements.
+                        </div>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+            <!-- Selected Property State -->
+            @if (isSelectedState()) {
+              <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
+                <div [ngClass]="contentClasses()" class="px-8 py-8">
+                  <div class="flex items-start gap-6">
+                    <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
+                      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path 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"></path>
+                      </svg>
+                    </div>
+                    <div class="flex-1">
+                      <div class="flex items-start justify-between mb-6">
+                        <div>
+                          <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-2">
+                            Connected to Google Analytics
+                          </h2>
+                          <p [ngClass]="textClasses()" class="text-base">
+                            Your analytics data is linked
                           </p>
                         </div>
+                        <button
+                          type="button"
+                          (click)="enableEditMode()"
+                          [ngClass]="editButtonClasses()"
+                          class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
+                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                          </svg>
+                          Edit
+                        </button>
                       </div>
+                      @if (selectedProperty(); as property) {
+                        <div [ngClass]="selectedPropertyCardClasses()" class="rounded-xl border-2 p-6 mb-6">
+                          <div class="flex items-start gap-3 mb-4">
+                            <div [ngClass]="statusBadgeClasses()" class="px-3 py-1 rounded-full text-xs font-semibold border">
+                              Connected
+                            </div>
+                          </div>
+                          <div class="flex items-center gap-3 mb-3">
+                            <svg class="w-6 h-6 flex-shrink-0" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                            </svg>
+                            <div>
+                              <div [ngClass]="propertyNameClasses()" class="text-lg">
+                                {{ property.name || 'Unnamed Property' }}
+                              </div>
+                              @if (selectedPropertyAccount(); as account) {
+                                <div class="flex items-center gap-2 mt-1">
+                                  <svg class="w-4 h-4 flex-shrink-0" [ngClass]="accountNameClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                                  </svg>
+                                  <span [ngClass]="accountNameClasses()">
+                                    {{ account.name || 'Unnamed Account' }}
+                                  </span>
+                                </div>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      <button
+                        type="button"
+                        (click)="reconnectWithDifferentAccount()"
+                        [ngClass]="reconnectButtonClasses()"
+                        class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 flex items-center gap-2 cursor-pointer">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                        </svg>
+                        Use Different Google Account
+                      </button>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            }
           </div>
+          <!-- Sticky Bottom Action Bar (Edit Mode) -->
+          @if (isEditingProperty()) {
+            <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
+              <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                <div class="flex items-center gap-3">
+                  <button
+                    type="button"
+                    (click)="cancelEditMode()"
+                    [ngClass]="cancelButtonClasses()"
+                    class="flex-1 sm:flex-none px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    (click)="submitPropertyChange()"
+                    [disabled]="!hasPropertyChanged()"
+                    [ngClass]="submitButtonClasses()"
+                    class="flex-1 px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
+                    Submit
+                  </button>
+                </div>
+              </div>
+            </div>
+          }
         </main>
       </div>
     </div>
   `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}:host.light .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}:host.light .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.light .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.light .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.light .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.light .gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}:host.light .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.light .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.light .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.light .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}:host.light .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.light .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}:host.dark .gsi-material-button{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}:host.dark .gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}:host.dark .gsi-material-button .gsi-material-button-content-wrapper{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}:host.dark .gsi-material-button .gsi-material-button-contents{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}:host.dark .gsi-material-button .gsi-material-button-state{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}:host.dark .gsi-material-button:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}:host.dark .gsi-material-button:disabled .gsi-material-button-state{background-color:#e3e3e31f}:host.dark .gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}:host.dark .gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}:host.dark .gsi-material-button:not(:disabled):active .gsi-material-button-state,:host.dark .gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#fff;opacity:12%}:host.dark .gsi-material-button:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}:host.dark .gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#fff;opacity:8%}\n"] }]
-    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], googleButtonClick: [{ type: i0.Output, args: ["googleButtonClick"] }], onScroll: [{
+    }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], gaProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaProperties", required: false }] }], gaAccounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "gaAccounts", required: false }] }], selectedGaPropertyId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGaPropertyId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], googleButtonClick: [{ type: i0.Output, args: ["googleButtonClick"] }], onPropertySelect: [{ type: i0.Output, args: ["onPropertySelect"] }], onPropertyChange: [{ type: i0.Output, args: ["onPropertyChange"] }], onReconnectGoogle: [{ type: i0.Output, args: ["onReconnectGoogle"] }], onScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 471 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 631 }); })();
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);
@@ -57580,85 +58152,85 @@ class RecommendationsTiledGridComponent {
                 standalone: true,
                 imports: [CommonModule, SimplifiedRecommendationCardComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
-              </svg>
-            </div>
-            <div>
-              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-                Strategic Insights & Recommendations
-              </h2>
-              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-                {{ recommendations().length }} personalized recommendations based on your business profile
-              </p>
-            </div>
-          </div>
-          @if (recommendations().length > 0) {
-            <div [ngClass]="countBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-sm">
-              {{ recommendations().length }}
-            </div>
-          }
-        </div>
-      </div>
-      <div [ngClass]="contentClasses()" class="p-6">
-        @if (recommendations().length > 0) {
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
-            @for (recommendation of sortedRecommendations(); track recommendation.id; let idx = $index) {
-              <symphiq-simplified-recommendation-card
-                [item]="recommendation"
-                [viewMode]="viewMode()"
-                [animationIndex]="idx"
-                (viewMoreClick)="viewMoreClick.emit($event)"
-              />
-            }
-          </div>
-        } @else if (isLoading()) {
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
-            @for (i of [0, 1, 2]; track i) {
-              <div [ngClass]="skeletonCardClasses()" class="rounded-xl border p-5 animate-pulse">
-                <div class="flex items-start gap-3 mb-4">
-                  <div [ngClass]="skeletonIconClasses()" class="w-10 h-10 rounded-lg"></div>
-                  <div class="flex-1 space-y-2">
-                    <div [ngClass]="skeletonLineClasses()" class="h-4 rounded w-3/4"></div>
-                    <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-1/2"></div>
-                  </div>
-                </div>
-                <div class="space-y-2 mb-4">
-                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-full"></div>
-                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-5/6"></div>
-                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-4/6"></div>
-                </div>
-                <div class="flex items-center justify-between">
-                  <div [ngClass]="skeletonLineClasses()" class="h-6 rounded-full w-16"></div>
-                  <div [ngClass]="skeletonLineClasses()" class="h-8 rounded-lg w-24"></div>
-                </div>
-              </div>
-            }
-          </div>
-        } @else {
-          <div [ngClass]="emptyStateClasses()" class="text-center py-12 rounded-xl border-2 border-dashed">
-            <div [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
-              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
-              </svg>
-            </div>
-            <h3 [ngClass]="emptyTitleClasses()" class="text-lg font-semibold mb-2">
-              No Recommendations Yet
-            </h3>
-            <p [ngClass]="emptyDescriptionClasses()" class="text-sm">
-              Complete your business profile to receive personalized strategic recommendations
-            </p>
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
+              </svg>
+            </div>
+            <div>
+              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+                Strategic Insights & Recommendations
+              </h2>
+              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+                {{ recommendations().length }} personalized recommendations based on your business profile
+              </p>
+            </div>
+          </div>
+          @if (recommendations().length > 0) {
+            <div [ngClass]="countBadgeClasses()" class="px-3 py-1.5 rounded-lg font-semibold text-sm">
+              {{ recommendations().length }}
+            </div>
+          }
+        </div>
+      </div>
+      <div [ngClass]="contentClasses()" class="p-6">
+        @if (recommendations().length > 0) {
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+            @for (recommendation of sortedRecommendations(); track recommendation.id; let idx = $index) {
+              <symphiq-simplified-recommendation-card
+                [item]="recommendation"
+                [viewMode]="viewMode()"
+                [animationIndex]="idx"
+                (viewMoreClick)="viewMoreClick.emit($event)"
+              />
+            }
+          </div>
+        } @else if (isLoading()) {
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">
+            @for (i of [0, 1, 2]; track i) {
+              <div [ngClass]="skeletonCardClasses()" class="rounded-xl border p-5 animate-pulse">
+                <div class="flex items-start gap-3 mb-4">
+                  <div [ngClass]="skeletonIconClasses()" class="w-10 h-10 rounded-lg"></div>
+                  <div class="flex-1 space-y-2">
+                    <div [ngClass]="skeletonLineClasses()" class="h-4 rounded w-3/4"></div>
+                    <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-1/2"></div>
+                  </div>
+                </div>
+                <div class="space-y-2 mb-4">
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-full"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-5/6"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-3 rounded w-4/6"></div>
+                </div>
+                <div class="flex items-center justify-between">
+                  <div [ngClass]="skeletonLineClasses()" class="h-6 rounded-full w-16"></div>
+                  <div [ngClass]="skeletonLineClasses()" class="h-8 rounded-lg w-24"></div>
+                </div>
+              </div>
+            }
+          </div>
+        } @else {
+          <div [ngClass]="emptyStateClasses()" class="text-center py-12 rounded-xl border-2 border-dashed">
+            <div [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
+              </svg>
+            </div>
+            <h3 [ngClass]="emptyTitleClasses()" class="text-lg font-semibold mb-2">
+              No Recommendations Yet
+            </h3>
+            <p [ngClass]="emptyDescriptionClasses()" class="text-sm">
+              Complete your business profile to receive personalized strategic recommendations
+            </p>
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { recommendations: [{ type: i0.Input, args: [{ isSignal: true, alias: "recommendations", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], viewMoreClick: [{ type: i0.Output, args: ["viewMoreClick"] }] }); })();
@@ -58186,87 +58758,87 @@ class ContentGenerationProgressComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ContentGenerationProgressComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
-      <div class="max-w-3xl w-full space-y-8">
-        <!-- Title Section -->
-        <div class="text-center space-y-3">
-          <div class="flex items-center justify-center mb-4">
-            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
-              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-              </svg>
-              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
-            </div>
-          </div>
-          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
-            {{ title() }}
-          </h2>
-          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
-            {{ subtitle() }}
-          </p>
-        </div>
-        <!-- Progress Section -->
-        <div class="space-y-4">
-          <!-- Progress Message -->
-          <div class="text-center">
-            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
-              {{ progressMessage() }}
-            </p>
-          </div>
-          <!-- Progress Bar Container -->
-          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
-            <!-- Background Track -->
-            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
-            <!-- Solid Fill with Gradient -->
-            <div
-              [ngClass]="progressBarFillClasses()"
-              [style.width.%]="progressPercentage()"
-              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
-              <!-- Inner shimmer effect -->
-              <div class="absolute inset-0 shimmer-effect"></div>
-            </div>
-            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                class="absolute pointer-events-none"
-                [style.left.%]="progressPercentage()"
-                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
-                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
-                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
-              </div>
-            }
-            <!-- Glow effect at the progress edge -->
-            @if (progressPercentage() > 0 && progressPercentage() < 100) {
-              <div
-                [ngClass]="progressGlowClasses()"
-                [style.left.%]="progressPercentage()"
-                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
-                style="margin-left: -8px;">
-              </div>
-            }
-          </div>
-          <!-- Progress Percentage -->
-          <div class="text-center">
-            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
-              {{ progressPercentage() }}% complete
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+        args: [{ selector: 'symphiq-content-generation-progress', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [ngClass]="containerClasses()" class="min-h-[60vh] flex items-center justify-center px-4 py-12">
+      <div class="max-w-3xl w-full space-y-8">
+        <!-- Title Section -->
+        <div class="text-center space-y-3">
+          <div class="flex items-center justify-center mb-4">
+            <div [ngClass]="iconContainerClasses()" class="relative w-20 h-20 rounded-2xl flex items-center justify-center icon-pulse">
+              <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+              <div class="absolute inset-0 rounded-2xl icon-glow"></div>
+            </div>
+          </div>
+          <h2 [ngClass]="titleClasses()" class="text-3xl sm:text-4xl font-bold">
+            {{ title() }}
+          </h2>
+          <p [ngClass]="subtitleClasses()" class="text-base sm:text-lg max-w-2xl mx-auto">
+            {{ subtitle() }}
+          </p>
+        </div>
+        <!-- Progress Section -->
+        <div class="space-y-4">
+          <!-- Progress Message -->
+          <div class="text-center">
+            <p [ngClass]="progressMessageClasses()" class="text-lg sm:text-xl font-medium message-fade">
+              {{ progressMessage() }}
+            </p>
+          </div>
+          <!-- Progress Bar Container -->
+          <div [ngClass]="progressBarContainerClasses()" class="relative h-3 rounded-full" style="overflow: visible;">
+            <!-- Background Track -->
+            <div [ngClass]="progressBarBackgroundClasses()" class="absolute inset-0 rounded-full"></div>
+            <!-- Solid Fill with Gradient -->
+            <div
+              [ngClass]="progressBarFillClasses()"
+              [style.width.%]="progressPercentage()"
+              class="absolute inset-y-0 left-0 rounded-full transition-all duration-700 ease-out overflow-hidden">
+              <!-- Inner shimmer effect -->
+              <div class="absolute inset-0 shimmer-effect"></div>
+            </div>
+            <!-- Animated Dots Overlay (container positioned at progress edge, dots animate within) -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                class="absolute pointer-events-none"
+                [style.left.%]="progressPercentage()"
+                style="right: 0; top: -4px; bottom: -4px; overflow: visible;">
+                <div class="animated-dot animated-dot-1" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-2" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-3" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-4" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-5" [style.background-color]="dotColor()"></div>
+                <div class="animated-dot animated-dot-6" [style.background-color]="dotColor()"></div>
+              </div>
+            }
+            <!-- Glow effect at the progress edge -->
+            @if (progressPercentage() > 0 && progressPercentage() < 100) {
+              <div
+                [ngClass]="progressGlowClasses()"
+                [style.left.%]="progressPercentage()"
+                class="absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full blur-md transition-all duration-700 ease-out"
+                style="margin-left: -8px;">
+              </div>
+            }
+          </div>
+          <!-- Progress Percentage -->
+          <div class="text-center">
+            <span [ngClass]="percentageClasses()" class="text-sm font-medium tabular-nums">
+              {{ progressPercentage() }}% complete
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
   `, styles: ["@keyframes icon-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.9}}@keyframes icon-glow-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes dots-move{0%{left:0%;opacity:0}3%{left:3%;opacity:1}97%{left:97%;opacity:1}to{left:100%;opacity:0}}@keyframes dots-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.4)}}@keyframes message-fade{0%,to{opacity:1}50%{opacity:.7}}.icon-pulse{animation:icon-pulse 2s ease-in-out infinite}.icon-glow{animation:icon-glow-pulse 2s ease-in-out infinite}.shimmer-effect{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s ease-in-out infinite}.message-fade{animation:message-fade 3s ease-in-out infinite}.animated-dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;margin-top:-6px;margin-left:-6px;animation:dots-move 6s linear infinite,dots-pulse 2s ease-in-out infinite;will-change:left,transform,opacity;z-index:20;box-shadow:0 0 8px currentColor,0 0 16px currentColor}.animated-dot-1{animation-delay:0s,0s}.animated-dot-2{animation-delay:1s,0s}.animated-dot-3{animation-delay:2s,0s}.animated-dot-4{animation-delay:3s,0s}.animated-dot-5{animation-delay:4s,0s}.animated-dot-6{animation-delay:5s,0s}\n"] }]
     }], null, { itemStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemStatus", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ContentGenerationProgressComponent, { className: "ContentGenerationProgressComponent", filePath: "lib/components/shared/content-generation-progress.component.ts", lineNumber: 222 }); })();
@@ -58558,7 +59130,9 @@ class SymphiqBusinessAnalysisDashboardComponent {
         this.profileContextService = inject(ProfileContextService);
         this.searchService = inject(BusinessProfileSearchService);
         this.modalService = inject(ModalService);
+        this.confettiService = inject(ConfettiService);
         this.currentProfile = signal(undefined, ...(ngDevMode ? [{ debugName: "currentProfile" }] : []));
+        this.previousContentStatus = signal(undefined, ...(ngDevMode ? [{ debugName: "previousContentStatus" }] : []));
         this.COLLAPSE_THRESHOLD = 20;
         this.EXPAND_THRESHOLD = 10;
         this.embeddedScrollEffect = effect(() => {
@@ -58648,6 +59222,19 @@ class SymphiqBusinessAnalysisDashboardComponent {
                 this.profileContextService.indexProfile(profile.profileStructured.sections, recommendations);
             }
         });
+        effect(() => {
+            const currentStatus = this.profile()?.selfContentStatus;
+            const prevStatus = this.previousContentStatus();
+            if (prevStatus === AiDynamicContentStatusEnum.GENERATING &&
+                currentStatus === AiDynamicContentStatusEnum.GENERATED) {
+                this.confettiService.trigger({
+                    intensity: 'celebration',
+                    delay: 200,
+                    viewMode: this.viewMode(),
+                });
+            }
+            this.previousContentStatus.set(currentStatus);
+        });
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
@@ -59365,7 +59952,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 335 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 336 }); })();
 function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 6);