@eric-emg/symphiq-components 1.2.168 → 1.2.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/fesm2022/symphiq-components.mjs +519 -438
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts +4 -2
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -24925,13 +24925,11 @@ function JourneyProgressIndicatorComponent_For_5_Conditional_9_Template(rf, ctx)
24925
24925
  function JourneyProgressIndicatorComponent_For_5_Template(rf, ctx) { if (rf & 1) {
24926
24926
  const _r1 = i0.ɵɵgetCurrentView();
24927
24927
  i0.ɵɵelementStart(0, "div", 20);
24928
- i0.ɵɵlistener("mouseenter", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseenter_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setHoveredStep(ɵ$index_9_r2)); })("mouseleave", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearHoveredStep()); });
24928
+ i0.ɵɵlistener("mouseenter", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseenter_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setHoveredStep(ɵ$index_9_r2)); })("mouseleave", function JourneyProgressIndicatorComponent_For_5_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearHoveredStep()); })("click", function JourneyProgressIndicatorComponent_For_5_Template_div_click_0_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r3.$implicit; const ɵ$index_9_r2 = ctx_r3.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleStepClick(step_r5, ɵ$index_9_r2)); });
24929
24929
  i0.ɵɵelementStart(1, "div", 21);
24930
- i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_div_click_1_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r3.$implicit; const ɵ$index_9_r2 = ctx_r3.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleStepClick(step_r5, ɵ$index_9_r2)); });
24931
24930
  i0.ɵɵconditionalCreate(2, JourneyProgressIndicatorComponent_For_5_Conditional_2_Template, 2, 0, ":svg:svg", 22)(3, JourneyProgressIndicatorComponent_For_5_Conditional_3_Template, 1, 1, "div", 23)(4, JourneyProgressIndicatorComponent_For_5_Conditional_4_Template, 1, 1, "div", 24)(5, JourneyProgressIndicatorComponent_For_5_Conditional_5_Template, 2, 2, "span", 25);
24932
24931
  i0.ɵɵelementEnd();
24933
24932
  i0.ɵɵelementStart(6, "span", 26);
24934
- i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_For_5_Template_span_click_6_listener() { const ctx_r6 = i0.ɵɵrestoreView(_r1); const step_r5 = ctx_r6.$implicit; const ɵ$index_9_r2 = ctx_r6.$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleStepClick(step_r5, ɵ$index_9_r2)); });
24935
24933
  i0.ɵɵtext(7);
24936
24934
  i0.ɵɵelementEnd();
24937
24935
  i0.ɵɵconditionalCreate(8, JourneyProgressIndicatorComponent_For_5_Conditional_8_Template, 9, 16, "div", 27);
@@ -24940,23 +24938,22 @@ function JourneyProgressIndicatorComponent_For_5_Template(rf, ctx) { if (rf & 1)
24940
24938
  } if (rf & 2) {
24941
24939
  const step_r5 = ctx.$implicit;
24942
24940
  const ɵ$index_9_r2 = ctx.$index;
24943
- const ɵ$count_9_r8 = ctx.$count;
24941
+ const ɵ$count_9_r7 = ctx.$count;
24944
24942
  const ctx_r2 = i0.ɵɵnextContext();
24945
24943
  i0.ɵɵstyleProp("width", "64px");
24946
- i0.ɵɵadvance();
24947
24944
  i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || step_r5.status === "accessible");
24945
+ i0.ɵɵadvance();
24948
24946
  i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r5));
24949
24947
  i0.ɵɵadvance();
24950
24948
  i0.ɵɵconditional(step_r5.status === "completed" ? 2 : step_r5.status === "current" ? 3 : step_r5.status === "accessible" ? 4 : 5);
24951
24949
  i0.ɵɵadvance(4);
24952
- i0.ɵɵclassProp("cursor-pointer", step_r5.status === "completed" || step_r5.status === "accessible");
24953
24950
  i0.ɵɵproperty("ngClass", ctx_r2.getAbbreviatedTitleClasses(step_r5));
24954
24951
  i0.ɵɵadvance();
24955
24952
  i0.ɵɵtextInterpolate1(" ", ctx_r2.getAbbreviatedTitle(step_r5.title), " ");
24956
24953
  i0.ɵɵadvance();
24957
24954
  i0.ɵɵconditional(ctx_r2.hoveredStepIndex() === ɵ$index_9_r2 ? 8 : -1);
24958
24955
  i0.ɵɵadvance();
24959
- i0.ɵɵconditional(!(ɵ$index_9_r2 === ɵ$count_9_r8 - 1) ? 9 : -1);
24956
+ i0.ɵɵconditional(!(ɵ$index_9_r2 === ɵ$count_9_r7 - 1) ? 9 : -1);
24960
24957
  } }
24961
24958
  function JourneyProgressIndicatorComponent_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
24962
24959
  i0.ɵɵnamespaceSVG();
@@ -24976,9 +24973,9 @@ function JourneyProgressIndicatorComponent_Conditional_6_Conditional_2_Template(
24976
24973
  i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
24977
24974
  } }
24978
24975
  function JourneyProgressIndicatorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
24979
- const _r9 = i0.ɵɵgetCurrentView();
24976
+ const _r8 = i0.ɵɵgetCurrentView();
24980
24977
  i0.ɵɵelementStart(0, "button", 37);
24981
- i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
24978
+ i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
24982
24979
  i0.ɵɵconditionalCreate(1, JourneyProgressIndicatorComponent_Conditional_6_Conditional_1_Template, 4, 0)(2, JourneyProgressIndicatorComponent_Conditional_6_Conditional_2_Template, 3, 1);
24983
24980
  i0.ɵɵelementEnd();
24984
24981
  } if (rf & 2) {
@@ -25033,13 +25030,13 @@ function JourneyProgressIndicatorComponent_Conditional_23_For_5_Conditional_5_Te
25033
25030
  i0.ɵɵtext(1);
25034
25031
  i0.ɵɵelementEnd();
25035
25032
  } if (rf & 2) {
25036
- const ctx_r9 = i0.ɵɵnextContext();
25037
- const step_r11 = ctx_r9.$implicit;
25038
- const ɵ$index_115_r12 = ctx_r9.$index;
25033
+ const ctx_r8 = i0.ɵɵnextContext();
25034
+ const step_r10 = ctx_r8.$implicit;
25035
+ const ɵ$index_115_r11 = ctx_r8.$index;
25039
25036
  const ctx_r2 = i0.ɵɵnextContext(2);
25040
- i0.ɵɵproperty("ngClass", ctx_r2.getStepNumberClasses(step_r11));
25037
+ i0.ɵɵproperty("ngClass", ctx_r2.getStepNumberClasses(step_r10));
25041
25038
  i0.ɵɵadvance();
25042
- i0.ɵɵtextInterpolate1(" ", ɵ$index_115_r12 + 1, " ");
25039
+ i0.ɵɵtextInterpolate1(" ", ɵ$index_115_r11 + 1, " ");
25043
25040
  } }
25044
25041
  function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx) { if (rf & 1) {
25045
25042
  i0.ɵɵelementStart(0, "div", 45)(1, "div", 46);
@@ -25055,25 +25052,25 @@ function JourneyProgressIndicatorComponent_Conditional_23_For_5_Template(rf, ctx
25055
25052
  i0.ɵɵtext(13);
25056
25053
  i0.ɵɵelementEnd()()();
25057
25054
  } if (rf & 2) {
25058
- const step_r11 = ctx.$implicit;
25059
- const ɵ$index_115_r12 = ctx.$index;
25055
+ const step_r10 = ctx.$implicit;
25056
+ const ɵ$index_115_r11 = ctx.$index;
25060
25057
  const ctx_r2 = i0.ɵɵnextContext(2);
25061
25058
  i0.ɵɵadvance();
25062
- i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r11));
25059
+ i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r10));
25063
25060
  i0.ɵɵadvance();
25064
- i0.ɵɵconditional(step_r11.status === "completed" ? 2 : step_r11.status === "current" ? 3 : step_r11.status === "accessible" ? 4 : 5);
25061
+ i0.ɵɵconditional(step_r10.status === "completed" ? 2 : step_r10.status === "current" ? 3 : step_r10.status === "accessible" ? 4 : 5);
25065
25062
  i0.ɵɵadvance(6);
25066
25063
  i0.ɵɵproperty("ngClass", ctx_r2.tooltipStepNumberClasses());
25067
25064
  i0.ɵɵadvance();
25068
- i0.ɵɵtextInterpolate1("", ɵ$index_115_r12 + 1, ".");
25065
+ i0.ɵɵtextInterpolate1("", ɵ$index_115_r11 + 1, ".");
25069
25066
  i0.ɵɵadvance();
25070
- i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(step_r11));
25067
+ i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(step_r10));
25071
25068
  i0.ɵɵadvance();
25072
- i0.ɵɵtextInterpolate(step_r11.title);
25069
+ i0.ɵɵtextInterpolate(step_r10.title);
25073
25070
  i0.ɵɵadvance();
25074
25071
  i0.ɵɵproperty("ngClass", ctx_r2.tooltipDescriptionClasses());
25075
25072
  i0.ɵɵadvance();
25076
- i0.ɵɵtextInterpolate1(" ", step_r11.description, " ");
25073
+ i0.ɵɵtextInterpolate1(" ", step_r10.description, " ");
25077
25074
  } }
25078
25075
  function JourneyProgressIndicatorComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
25079
25076
  i0.ɵɵelementStart(0, "div", 18)(1, "h4", 43);
@@ -25108,9 +25105,9 @@ function JourneyProgressIndicatorComponent_Conditional_24_Conditional_2_Template
25108
25105
  i0.ɵɵtextInterpolate1(" ", ctx_r2.currentStepId() === ctx_r2.JourneyStepIdEnum.WELCOME ? "Get Started" : "Continue", " ");
25109
25106
  } }
25110
25107
  function JourneyProgressIndicatorComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
25111
- const _r13 = i0.ɵɵgetCurrentView();
25108
+ const _r12 = i0.ɵɵgetCurrentView();
25112
25109
  i0.ɵɵelementStart(0, "button", 55);
25113
- i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
25110
+ i0.ɵɵlistener("click", function JourneyProgressIndicatorComponent_Conditional_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleNextStepClick()); });
25114
25111
  i0.ɵɵconditionalCreate(1, JourneyProgressIndicatorComponent_Conditional_24_Conditional_1_Template, 4, 0)(2, JourneyProgressIndicatorComponent_Conditional_24_Conditional_2_Template, 3, 1);
25115
25112
  i0.ɵɵelementEnd();
25116
25113
  } if (rf & 2) {
@@ -25527,9 +25524,9 @@ class JourneyProgressIndicatorComponent {
25527
25524
  return idx >= Math.floor(this.steps().length / 2);
25528
25525
  }
25529
25526
  static { this.ɵfac = function JourneyProgressIndicatorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JourneyProgressIndicatorComponent)(); }; }
25530
- 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) {
25527
+ 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", "relative", "step-column", "overflow-visible", "flex-shrink-0", 3, "mouseenter", "mouseleave", "click"], [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, "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, "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) {
25531
25528
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
25532
- i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 12, null, null, _forTrack0$z);
25529
+ i0.ɵɵrepeaterCreate(4, JourneyProgressIndicatorComponent_For_5_Template, 10, 10, null, null, _forTrack0$z);
25533
25530
  i0.ɵɵelementEnd();
25534
25531
  i0.ɵɵconditionalCreate(6, JourneyProgressIndicatorComponent_Conditional_6_Template, 3, 11, "button", 4);
25535
25532
  i0.ɵɵelementEnd();
@@ -25581,231 +25578,229 @@ class JourneyProgressIndicatorComponent {
25581
25578
  }
25582
25579
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JourneyProgressIndicatorComponent, [{
25583
25580
  type: Component,
25584
- args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
25585
- <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
25586
- <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
25587
- <div class="max-w-7xl mx-auto overflow-visible">
25588
- <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
25589
- <div class="hidden lg:flex items-start justify-between overflow-visible">
25590
- <!-- Steps Container -->
25591
- <div class="flex-1 flex items-start justify-start overflow-visible">
25592
- @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
25593
- <!-- Step Column (Vertical Layout: Dot above, Label below) -->
25594
- <div
25595
- class="flex flex-col items-center cursor-pointer relative step-column overflow-visible flex-shrink-0"
25596
- [style.width]="'64px'"
25597
- (mouseenter)="setHoveredStep(idx)"
25598
- (mouseleave)="clearHoveredStep()">
25599
-
25600
- <!-- Icon Circle -->
25601
- <div
25602
- [ngClass]="getStepIconContainerClasses(step)"
25603
- class="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"
25604
- (click)="handleStepClick(step, idx)"
25605
- [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
25606
- @if (step.status === 'completed') {
25607
- <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
25608
- <path 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"></path>
25609
- </svg>
25610
- } @else if (step.status === 'current') {
25611
- <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25612
- } @else if (step.status === 'accessible') {
25613
- <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25614
- } @else {
25615
- <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
25616
- {{ idx + 1 }}
25617
- </span>
25618
- }
25619
- </div>
25620
-
25621
- <!-- Abbreviated Title (Always Visible) -->
25622
- <span
25623
- [ngClass]="getAbbreviatedTitleClasses(step)"
25624
- class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis"
25625
- (click)="handleStepClick(step, idx)"
25626
- [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'">
25627
- {{ getAbbreviatedTitle(step.title) }}
25628
- </span>
25629
-
25630
- <!-- Absolute Positioned Tooltip -->
25631
- @if (hoveredStepIndex() === idx) {
25632
- <div
25633
- [ngClass]="getExpandedCardClasses(idx)"
25634
- [class.expanded-card-right]="isExpandRight(idx)"
25635
- [class.expanded-card-left]="isExpandLeft(idx)"
25636
- class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
25637
- [style.top]="'-29px'"
25638
- [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
25639
- [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
25640
- <div class="flex items-start px-4 py-3 expanded-content">
25641
- <!-- Step Number and Title with Description -->
25642
- <div class="flex items-start gap-2 w-full">
25643
- <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
25644
- <div class="flex flex-col gap-1 flex-1">
25645
- <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
25646
- <!-- Description (Delayed Fade In) -->
25647
- @if (shouldShowDetailedTooltip()) {
25648
- <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
25649
- {{ step.description }}
25650
- </p>
25651
- }
25652
- </div>
25653
- </div>
25654
- </div>
25655
- </div>
25656
- }
25657
- </div>
25658
-
25659
- <!-- Connector Line (Horizontal, stretches to fill available space) -->
25660
- @if (!isLast) {
25661
- <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
25662
- }
25663
- }
25664
- </div>
25665
-
25666
- <!-- Next Step Button -->
25667
- @if (showNextStepAction() && getNextStep()) {
25668
- <button
25669
- type="button"
25670
- (click)="handleNextStepClick()"
25671
- [disabled]="isLoading()"
25672
- [ngClass]="nextStepButtonClasses()"
25673
- class="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"
25674
- [class.cursor-pointer]="!isLoading()"
25675
- [class.cursor-not-allowed]="isLoading()"
25676
- [class.opacity-50]="isLoading()"
25677
- [class.hover:scale-105]="!isLoading()">
25678
- @if (isLoading()) {
25679
- <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
25680
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25681
- <path class="opacity-75" 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"></path>
25682
- </svg>
25683
- Loading...
25684
- } @else {
25685
- {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25686
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25687
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25688
- </svg>
25689
- }
25690
- </button>
25691
- }
25692
- </div>
25693
-
25694
- <!-- Mobile Navigation (below lg) -->
25695
- <div class="lg:hidden">
25696
- <div class="flex items-center justify-between gap-4">
25697
- <!-- Current Step Display -->
25698
- <div class="flex-1 flex items-center gap-3">
25699
- <!-- Step Icon -->
25700
- <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25701
- @if (getCurrentStep().status === 'completed') {
25702
- <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
25703
- <path 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"></path>
25704
- </svg>
25705
- } @else if (getCurrentStep().status === 'current') {
25706
- <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25707
- } @else {
25708
- <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
25709
- {{ getCurrentStepIndex() + 1 }}
25710
- </span>
25711
- }
25712
- </div>
25713
-
25714
- <!-- Step Info -->
25715
- <div class="flex-1 text-left">
25716
- <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
25717
- {{ getCurrentStep().title }}
25718
- </h3>
25719
- <!-- Step Counter with Tooltip Trigger -->
25720
- <div
25721
- class="flex items-center gap-1.5 relative"
25722
- (mouseenter)="showMobileTooltip.set(true)"
25723
- (mouseleave)="showMobileTooltip.set(false)"
25724
- (click)="toggleMobileTooltip()">
25725
- <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
25726
- Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
25727
- </span>
25728
- <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
25729
- <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25730
- <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>
25731
- </svg>
25732
- </div>
25733
-
25734
- <!-- Mobile Tooltip with All Steps -->
25735
- @if (showMobileTooltip()) {
25736
- <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
25737
- <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
25738
- <div class="space-y-2">
25739
- @for (step of steps(); track step.id; let idx = $index) {
25740
- <div class="flex items-start gap-2">
25741
- <!-- Step Icon -->
25742
- <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25743
- @if (step.status === 'completed') {
25744
- <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
25745
- <path 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"></path>
25746
- </svg>
25747
- } @else if (step.status === 'current') {
25748
- <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25749
- } @else if (step.status === 'accessible') {
25750
- <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25751
- } @else {
25752
- <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
25753
- {{ idx + 1 }}
25754
- </span>
25755
- }
25756
- </div>
25757
- <!-- Step Info -->
25758
- <div class="flex-1 min-w-0">
25759
- <div class="flex items-center gap-2">
25760
- <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
25761
- <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
25762
- </div>
25763
- <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
25764
- {{ step.description }}
25765
- </p>
25766
- </div>
25767
- </div>
25768
- }
25769
- </div>
25770
- </div>
25771
- }
25772
- </div>
25773
- </div>
25774
- </div>
25775
-
25776
- <!-- Get Started Button -->
25777
- @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
25778
- <button
25779
- type="button"
25780
- (click)="handleNextStepClick()"
25781
- [disabled]="isLoading()"
25782
- [ngClass]="nextStepButtonClasses()"
25783
- class="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"
25784
- [class.cursor-pointer]="!isLoading()"
25785
- [class.cursor-not-allowed]="isLoading()"
25786
- [class.opacity-50]="isLoading()"
25787
- [class.hover:scale-105]="!isLoading()">
25788
- @if (isLoading()) {
25789
- <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
25790
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25791
- <path class="opacity-75" 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"></path>
25792
- </svg>
25793
- Loading...
25794
- } @else {
25795
- {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25796
- <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25797
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25798
- </svg>
25799
- }
25800
- </button>
25801
- }
25802
- </div>
25803
- </div>
25804
- </div>
25805
- </div>
25581
+ args: [{ selector: 'symphiq-journey-progress-indicator', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
25582
+ <!-- Sticky Banner Container with Minimal Padding for Glow Effects -->
25583
+ <div [ngClass]="containerClasses()" class="sticky top-[60px] z-40 border-b pt-8 pb-6 px-6 transition-all duration-200 overflow-visible">
25584
+ <div class="max-w-7xl mx-auto overflow-visible">
25585
+ <!-- Desktop/Tablet Horizontal Layout (lg and up) -->
25586
+ <div class="hidden lg:flex items-start justify-between overflow-visible">
25587
+ <!-- Steps Container -->
25588
+ <div class="flex-1 flex items-start justify-start overflow-visible">
25589
+ @for (step of steps(); track step.id; let idx = $index; let isLast = $last) {
25590
+ <!-- Step Column (Vertical Layout: Dot above, Label below) -->
25591
+ <div
25592
+ class="flex flex-col items-center relative step-column overflow-visible flex-shrink-0"
25593
+ [class.cursor-pointer]="step.status === 'completed' || step.status === 'accessible'"
25594
+ [style.width]="'64px'"
25595
+ (mouseenter)="setHoveredStep(idx)"
25596
+ (mouseleave)="clearHoveredStep()"
25597
+ (click)="handleStepClick(step, idx)">
25598
+
25599
+ <!-- Icon Circle -->
25600
+ <div
25601
+ [ngClass]="getStepIconContainerClasses(step)"
25602
+ class="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">
25603
+ @if (step.status === 'completed') {
25604
+ <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
25605
+ <path 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"></path>
25606
+ </svg>
25607
+ } @else if (step.status === 'current') {
25608
+ <div class="w-2.5 h-2.5 min-w-[0.625rem] min-h-[0.625rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25609
+ } @else if (step.status === 'accessible') {
25610
+ <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25611
+ } @else {
25612
+ <span [ngClass]="getStepNumberClasses(step)" class="text-xs font-bold">
25613
+ {{ idx + 1 }}
25614
+ </span>
25615
+ }
25616
+ </div>
25617
+
25618
+ <!-- Abbreviated Title (Always Visible) -->
25619
+ <span
25620
+ [ngClass]="getAbbreviatedTitleClasses(step)"
25621
+ class="text-[10px] text-center leading-tight whitespace-nowrap max-w-[64px] overflow-hidden text-ellipsis">
25622
+ {{ getAbbreviatedTitle(step.title) }}
25623
+ </span>
25624
+
25625
+ <!-- Absolute Positioned Tooltip -->
25626
+ @if (hoveredStepIndex() === idx) {
25627
+ <div
25628
+ [ngClass]="getExpandedCardClasses(idx)"
25629
+ [class.expanded-card-right]="isExpandRight(idx)"
25630
+ [class.expanded-card-left]="isExpandLeft(idx)"
25631
+ class="absolute rounded-lg shadow-2xl z-50 pointer-events-none"
25632
+ [style.top]="'-29px'"
25633
+ [style.left]="isExpandRight(idx) ? 'calc(100% + 6px)' : 'auto'"
25634
+ [style.right]="isExpandLeft(idx) ? 'calc(100% + 6px)' : 'auto'">
25635
+ <div class="flex items-start px-4 py-3 expanded-content">
25636
+ <!-- Step Number and Title with Description -->
25637
+ <div class="flex items-start gap-2 w-full">
25638
+ <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold flex-shrink-0 mt-0.5">{{ idx + 1 }}.</span>
25639
+ <div class="flex flex-col gap-1 flex-1">
25640
+ <span [ngClass]="tooltipTitleClasses()" class="text-sm font-bold leading-tight">{{ step.title }}</span>
25641
+ <!-- Description (Delayed Fade In) -->
25642
+ @if (shouldShowDetailedTooltip()) {
25643
+ <p [ngClass]="tooltipDescriptionClasses()" class="text-xs leading-relaxed description-fade">
25644
+ {{ step.description }}
25645
+ </p>
25646
+ }
25647
+ </div>
25648
+ </div>
25649
+ </div>
25650
+ </div>
25651
+ }
25652
+ </div>
25653
+
25654
+ <!-- Connector Line (Horizontal, stretches to fill available space) -->
25655
+ @if (!isLast) {
25656
+ <div [ngClass]="getConnectorClasses(step)" class="flex-1 h-0.5 transition-all duration-200 mt-[16px]"></div>
25657
+ }
25658
+ }
25659
+ </div>
25660
+
25661
+ <!-- Next Step Button -->
25662
+ @if (showNextStepAction() && getNextStep()) {
25663
+ <button
25664
+ type="button"
25665
+ (click)="handleNextStepClick()"
25666
+ [disabled]="isLoading()"
25667
+ [ngClass]="nextStepButtonClasses()"
25668
+ class="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"
25669
+ [class.cursor-pointer]="!isLoading()"
25670
+ [class.cursor-not-allowed]="isLoading()"
25671
+ [class.opacity-50]="isLoading()"
25672
+ [class.hover:scale-105]="!isLoading()">
25673
+ @if (isLoading()) {
25674
+ <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
25675
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25676
+ <path class="opacity-75" 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"></path>
25677
+ </svg>
25678
+ Loading...
25679
+ } @else {
25680
+ {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25681
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25682
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25683
+ </svg>
25684
+ }
25685
+ </button>
25686
+ }
25687
+ </div>
25688
+
25689
+ <!-- Mobile Navigation (below lg) -->
25690
+ <div class="lg:hidden">
25691
+ <div class="flex items-center justify-between gap-4">
25692
+ <!-- Current Step Display -->
25693
+ <div class="flex-1 flex items-center gap-3">
25694
+ <!-- Step Icon -->
25695
+ <div [ngClass]="getStepIconContainerClasses(getCurrentStep())" class="w-10 h-10 min-w-[2.5rem] min-h-[2.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25696
+ @if (getCurrentStep().status === 'completed') {
25697
+ <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
25698
+ <path 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"></path>
25699
+ </svg>
25700
+ } @else if (getCurrentStep().status === 'current') {
25701
+ <div class="w-3 h-3 min-w-[0.75rem] min-h-[0.75rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25702
+ } @else {
25703
+ <span [ngClass]="getStepNumberClasses(getCurrentStep())" class="text-sm font-bold">
25704
+ {{ getCurrentStepIndex() + 1 }}
25705
+ </span>
25706
+ }
25707
+ </div>
25708
+
25709
+ <!-- Step Info -->
25710
+ <div class="flex-1 text-left">
25711
+ <h3 [ngClass]="getStepTitleClasses(getCurrentStep())" class="text-sm font-bold">
25712
+ {{ getCurrentStep().title }}
25713
+ </h3>
25714
+ <!-- Step Counter with Tooltip Trigger -->
25715
+ <div
25716
+ class="flex items-center gap-1.5 relative"
25717
+ (mouseenter)="showMobileTooltip.set(true)"
25718
+ (mouseleave)="showMobileTooltip.set(false)"
25719
+ (click)="toggleMobileTooltip()">
25720
+ <span [ngClass]="stepCounterClasses()" class="text-xs cursor-pointer">
25721
+ Step {{ getCurrentStepIndex() + 1 }} of {{ steps().length }}
25722
+ </span>
25723
+ <div [ngClass]="tooltipTriggerClasses()" class="p-0.5 rounded-full cursor-pointer">
25724
+ <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25725
+ <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>
25726
+ </svg>
25727
+ </div>
25728
+
25729
+ <!-- Mobile Tooltip with All Steps -->
25730
+ @if (showMobileTooltip()) {
25731
+ <div [ngClass]="mobileTooltipClasses()" class="absolute top-full left-0 mt-2 w-80 max-w-[calc(100vw-2rem)] p-4 rounded-lg shadow-xl z-50">
25732
+ <h4 [ngClass]="tooltipTitleClasses()" class="text-sm font-bold mb-3">Journey Progress</h4>
25733
+ <div class="space-y-2">
25734
+ @for (step of steps(); track step.id; let idx = $index) {
25735
+ <div class="flex items-start gap-2">
25736
+ <!-- Step Icon -->
25737
+ <div [ngClass]="getStepIconContainerClasses(step)" class="w-6 h-6 min-w-[1.5rem] min-h-[1.5rem] rounded-full flex items-center justify-center flex-shrink-0">
25738
+ @if (step.status === 'completed') {
25739
+ <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
25740
+ <path 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"></path>
25741
+ </svg>
25742
+ } @else if (step.status === 'current') {
25743
+ <div class="w-2 h-2 min-w-[0.5rem] min-h-[0.5rem] rounded-full animate-pulse" [ngClass]="getCurrentDotClasses()"></div>
25744
+ } @else if (step.status === 'accessible') {
25745
+ <div class="w-1.5 h-1.5 min-w-[0.375rem] min-h-[0.375rem] rounded-full" [ngClass]="getAccessibleDotClasses()"></div>
25746
+ } @else {
25747
+ <span [ngClass]="getStepNumberClasses(step)" class="text-[10px] font-bold">
25748
+ {{ idx + 1 }}
25749
+ </span>
25750
+ }
25751
+ </div>
25752
+ <!-- Step Info -->
25753
+ <div class="flex-1 min-w-0">
25754
+ <div class="flex items-center gap-2">
25755
+ <span [ngClass]="tooltipStepNumberClasses()" class="text-xs font-bold">{{ idx + 1 }}.</span>
25756
+ <span [ngClass]="getStepTitleClasses(step)" class="text-xs font-medium">{{ step.title }}</span>
25757
+ </div>
25758
+ <p [ngClass]="tooltipDescriptionClasses()" class="text-[10px] mt-0.5">
25759
+ {{ step.description }}
25760
+ </p>
25761
+ </div>
25762
+ </div>
25763
+ }
25764
+ </div>
25765
+ </div>
25766
+ }
25767
+ </div>
25768
+ </div>
25769
+ </div>
25770
+
25771
+ <!-- Get Started Button -->
25772
+ @if (showNextStepAction() && getNextStep() && getCurrentStep().status === 'current') {
25773
+ <button
25774
+ type="button"
25775
+ (click)="handleNextStepClick()"
25776
+ [disabled]="isLoading()"
25777
+ [ngClass]="nextStepButtonClasses()"
25778
+ class="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"
25779
+ [class.cursor-pointer]="!isLoading()"
25780
+ [class.cursor-not-allowed]="isLoading()"
25781
+ [class.opacity-50]="isLoading()"
25782
+ [class.hover:scale-105]="!isLoading()">
25783
+ @if (isLoading()) {
25784
+ <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
25785
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
25786
+ <path class="opacity-75" 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"></path>
25787
+ </svg>
25788
+ Loading...
25789
+ } @else {
25790
+ {{ currentStepId() === JourneyStepIdEnum.WELCOME ? 'Get Started' : 'Continue' }}
25791
+ <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
25792
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
25793
+ </svg>
25794
+ }
25795
+ </button>
25796
+ }
25797
+ </div>
25798
+ </div>
25799
+ </div>
25800
+ </div>
25806
25801
  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.step-glow-current{box-shadow:0 0 0 3px #3b82f64d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-current-dark{box-shadow:0 0 0 3px #60a5fa4d;animation:pulseGlow 2s ease-in-out infinite}.step-glow-completed{box-shadow:0 0 0 2px #10b98133}.step-glow-completed-dark{box-shadow:0 0 0 2px #34d39933}.step-glow-accessible{box-shadow:0 0 0 2px #3b82f61f}.step-glow-accessible-dark{box-shadow:0 0 0 2px #60a5fa26}@keyframes pulseGlow{0%,to{box-shadow:0 0 0 3px #3b82f64d}50%{box-shadow:0 0 0 6px #3b82f61a}}.step-column{transition:all .2s cubic-bezier(.4,0,.2,1)}.step-circle{transition:all .15s cubic-bezier(.4,0,.2,1)}.step-column:hover .step-circle{transform:scale(1.05)}.expanded-card-right{animation:expandCardRight .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:left center}.expanded-card-left{animation:expandCardLeft .2s cubic-bezier(.4,0,.2,1) forwards;transform-origin:right center}@keyframes expandCardRight{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}@keyframes expandCardLeft{0%{opacity:0;width:0;min-height:90px}to{opacity:1;width:300px;min-height:90px}}.description-fade{animation:fadeIn .15s ease-out forwards;opacity:0}@keyframes fadeIn{to{opacity:1}}.expanded-content{animation:contentFadeIn .15s ease-out .1s forwards;opacity:0}@keyframes contentFadeIn{to{opacity:1}}\n"] }]
25807
25802
  }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }] }); })();
25808
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 371 }); })();
25803
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 369 }); })();
25809
25804
 
25810
25805
  class ConfidenceLevelCardComponent {
25811
25806
  constructor() {
@@ -54187,6 +54182,28 @@ class SymphiqCreateAccountDashboardComponent {
54187
54182
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 625 }); })();
54188
54183
 
54189
54184
  const _forTrack0$i = ($index, $item) => $item.id;
54185
+ function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
54186
+ i0.ɵɵtext(0, " Change Google Account ");
54187
+ } }
54188
+ function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_10_Template(rf, ctx) { if (rf & 1) {
54189
+ i0.ɵɵtext(0, " Connect Google Analytics 4 ");
54190
+ } }
54191
+ function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_11_Template(rf, ctx) { if (rf & 1) {
54192
+ const _r2 = i0.ɵɵgetCurrentView();
54193
+ i0.ɵɵelementStart(0, "button", 49);
54194
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.cancelReconnectMode()); });
54195
+ i0.ɵɵtext(1, " Cancel ");
54196
+ i0.ɵɵelementEnd();
54197
+ } if (rf & 2) {
54198
+ const ctx_r2 = i0.ɵɵnextContext(2);
54199
+ i0.ɵɵproperty("ngClass", ctx_r2.headerCancelButtonClasses());
54200
+ } }
54201
+ function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_13_Template(rf, ctx) { if (rf & 1) {
54202
+ i0.ɵɵtext(0, " Sign in with a different Google account to access other Google Analytics properties. ");
54203
+ } }
54204
+ function SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_14_Template(rf, ctx) { if (rf & 1) {
54205
+ i0.ɵɵtext(0, " 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. ");
54206
+ } }
54190
54207
  function SymphiqConnectGaDashboardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
54191
54208
  const _r1 = i0.ɵɵgetCurrentView();
54192
54209
  i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
@@ -54195,179 +54212,197 @@ function SymphiqConnectGaDashboardComponent_Conditional_21_Template(rf, ctx) { i
54195
54212
  i0.ɵɵelement(5, "path", 18);
54196
54213
  i0.ɵɵelementEnd()();
54197
54214
  i0.ɵɵnamespaceHTML();
54198
- i0.ɵɵelementStart(6, "div", 19)(7, "h2", 20);
54199
- i0.ɵɵtext(8, " Connect Google Analytics 4 ");
54215
+ i0.ɵɵelementStart(6, "div", 19)(7, "div", 20)(8, "h2", 21);
54216
+ i0.ɵɵconditionalCreate(9, SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_9_Template, 1, 0)(10, SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_10_Template, 1, 0);
54200
54217
  i0.ɵɵelementEnd();
54201
- i0.ɵɵelementStart(9, "p", 21);
54202
- 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. ");
54218
+ i0.ɵɵconditionalCreate(11, SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_11_Template, 2, 1, "button", 22);
54203
54219
  i0.ɵɵelementEnd();
54204
- i0.ɵɵelementStart(11, "div", 22)(12, "button", 23);
54205
- 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()); });
54206
- i0.ɵɵelement(13, "div", 24);
54207
- i0.ɵɵelementStart(14, "div", 25)(15, "div", 26);
54220
+ i0.ɵɵelementStart(12, "p", 23);
54221
+ i0.ɵɵconditionalCreate(13, SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_13_Template, 1, 0)(14, SymphiqConnectGaDashboardComponent_Conditional_21_Conditional_14_Template, 1, 0);
54222
+ i0.ɵɵelementEnd();
54223
+ i0.ɵɵelementStart(15, "div", 24)(16, "button", 25);
54224
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_21_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.googleButtonClick.emit()); });
54225
+ i0.ɵɵelement(17, "div", 26);
54226
+ i0.ɵɵelementStart(18, "div", 27)(19, "div", 28);
54208
54227
  i0.ɵɵnamespaceSVG();
54209
- i0.ɵɵelementStart(16, "svg", 27);
54210
- i0.ɵɵelement(17, "path", 28)(18, "path", 29)(19, "path", 30)(20, "path", 31)(21, "path", 32);
54228
+ i0.ɵɵelementStart(20, "svg", 29);
54229
+ i0.ɵɵelement(21, "path", 30)(22, "path", 31)(23, "path", 32)(24, "path", 33)(25, "path", 34);
54211
54230
  i0.ɵɵelementEnd()();
54212
54231
  i0.ɵɵnamespaceHTML();
54213
- i0.ɵɵelementStart(22, "span", 33);
54214
- i0.ɵɵtext(23, "Continue with Google");
54232
+ i0.ɵɵelementStart(26, "span", 35);
54233
+ i0.ɵɵtext(27, "Continue with Google");
54215
54234
  i0.ɵɵelementEnd()()()();
54216
- i0.ɵɵelementStart(24, "div", 34);
54235
+ i0.ɵɵelementStart(28, "div", 36);
54217
54236
  i0.ɵɵnamespaceSVG();
54218
- i0.ɵɵelementStart(25, "svg", 35);
54219
- i0.ɵɵelement(26, "path", 36);
54237
+ i0.ɵɵelementStart(29, "svg", 37);
54238
+ i0.ɵɵelement(30, "path", 38);
54220
54239
  i0.ɵɵelementEnd();
54221
54240
  i0.ɵɵnamespaceHTML();
54222
- i0.ɵɵelementStart(27, "div", 19)(28, "p", 37)(29, "strong", 38);
54223
- i0.ɵɵtext(30, "Note:");
54241
+ i0.ɵɵelementStart(31, "div", 19)(32, "p", 39)(33, "strong", 40);
54242
+ i0.ɵɵtext(34, "Note:");
54224
54243
  i0.ɵɵelementEnd();
54225
- 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. ");
54244
+ i0.ɵɵtext(35, " 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. ");
54226
54245
  i0.ɵɵelementEnd()()();
54227
- i0.ɵɵelementStart(32, "div", 39)(33, "div", 40);
54228
- 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()); });
54229
- i0.ɵɵelementStart(34, "span", 41);
54230
- i0.ɵɵtext(35, " How do we use your Google Analytics data? ");
54246
+ i0.ɵɵelementStart(36, "div", 41)(37, "div", 42);
54247
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_21_Template_div_click_37_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpanded()); });
54248
+ i0.ɵɵelementStart(38, "span", 43);
54249
+ i0.ɵɵtext(39, " How do we use your Google Analytics data? ");
54231
54250
  i0.ɵɵelementEnd();
54232
54251
  i0.ɵɵnamespaceSVG();
54233
- i0.ɵɵelementStart(36, "svg", 42);
54234
- i0.ɵɵelement(37, "path", 43);
54252
+ i0.ɵɵelementStart(40, "svg", 44);
54253
+ i0.ɵɵelement(41, "path", 45);
54235
54254
  i0.ɵɵelementEnd()();
54236
54255
  i0.ɵɵnamespaceHTML();
54237
- i0.ɵɵelementStart(38, "div", 4)(39, "div", 44)(40, "p", 45);
54238
- 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. ");
54256
+ i0.ɵɵelementStart(42, "div", 4)(43, "div", 46)(44, "p", 47);
54257
+ i0.ɵɵtext(45, " 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. ");
54239
54258
  i0.ɵɵelementEnd();
54240
- i0.ɵɵelementStart(42, "p", 37);
54241
- i0.ɵɵtext(43, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
54242
- i0.ɵɵelementStart(44, "strong", 46);
54243
- i0.ɵɵtext(45, "Google API Services User Data Policy");
54259
+ i0.ɵɵelementStart(46, "p", 39);
54260
+ i0.ɵɵtext(47, " Symphiq's use and transfer to any other app of information received from Google APIs will adhere to ");
54261
+ i0.ɵɵelementStart(48, "strong", 48);
54262
+ i0.ɵɵtext(49, "Google API Services User Data Policy");
54244
54263
  i0.ɵɵelementEnd();
54245
- i0.ɵɵtext(46, " including the Limited Use requirements. ");
54264
+ i0.ɵɵtext(50, " including the Limited Use requirements. ");
54246
54265
  i0.ɵɵelementEnd()()()()()()()();
54247
54266
  } if (rf & 2) {
54248
- const ctx_r1 = i0.ɵɵnextContext();
54249
- i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
54267
+ const ctx_r2 = i0.ɵɵnextContext();
54268
+ i0.ɵɵproperty("ngClass", ctx_r2.containerClasses());
54250
54269
  i0.ɵɵadvance();
54251
- i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
54270
+ i0.ɵɵproperty("ngClass", ctx_r2.contentClasses());
54252
54271
  i0.ɵɵadvance(2);
54253
- i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
54254
- i0.ɵɵadvance(4);
54255
- i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
54272
+ i0.ɵɵproperty("ngClass", ctx_r2.iconContainerClasses());
54273
+ i0.ɵɵadvance(5);
54274
+ i0.ɵɵproperty("ngClass", ctx_r2.titleClasses());
54275
+ i0.ɵɵadvance();
54276
+ i0.ɵɵconditional(ctx_r2.isReconnecting() ? 9 : 10);
54256
54277
  i0.ɵɵadvance(2);
54257
- i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
54278
+ i0.ɵɵconditional(ctx_r2.isReconnecting() ? 11 : -1);
54279
+ i0.ɵɵadvance();
54280
+ i0.ɵɵproperty("ngClass", ctx_r2.textClasses());
54281
+ i0.ɵɵadvance();
54282
+ i0.ɵɵconditional(ctx_r2.isReconnecting() ? 13 : 14);
54258
54283
  i0.ɵɵadvance(15);
54259
- i0.ɵɵproperty("ngClass", ctx_r1.noteBoxClasses());
54284
+ i0.ɵɵproperty("ngClass", ctx_r2.noteBoxClasses());
54260
54285
  i0.ɵɵadvance();
54261
- i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
54286
+ i0.ɵɵproperty("ngClass", ctx_r2.noteIconClasses());
54262
54287
  i0.ɵɵadvance(3);
54263
- i0.ɵɵproperty("ngClass", ctx_r1.noteTextClasses());
54288
+ i0.ɵɵproperty("ngClass", ctx_r2.noteTextClasses());
54264
54289
  i0.ɵɵadvance(4);
54265
- i0.ɵɵproperty("ngClass", ctx_r1.expandableCardClasses());
54290
+ i0.ɵɵproperty("ngClass", ctx_r2.expandableCardClasses());
54266
54291
  i0.ɵɵadvance();
54267
- i0.ɵɵproperty("ngClass", ctx_r1.expandableHeaderClasses());
54292
+ i0.ɵɵproperty("ngClass", ctx_r2.expandableHeaderClasses());
54268
54293
  i0.ɵɵadvance();
54269
- i0.ɵɵproperty("ngClass", ctx_r1.expandableHeaderTextClasses());
54294
+ i0.ɵɵproperty("ngClass", ctx_r2.expandableHeaderTextClasses());
54270
54295
  i0.ɵɵadvance(2);
54271
- i0.ɵɵclassProp("rotate-180", ctx_r1.isExpanded());
54272
- i0.ɵɵproperty("ngClass", ctx_r1.chevronClasses());
54296
+ i0.ɵɵclassProp("rotate-180", ctx_r2.isExpanded());
54297
+ i0.ɵɵproperty("ngClass", ctx_r2.chevronClasses());
54273
54298
  i0.ɵɵadvance(2);
54274
- i0.ɵɵclassProp("max-h-0", !ctx_r1.isExpanded())("opacity-0", !ctx_r1.isExpanded())("max-h-[1000px]", ctx_r1.isExpanded())("opacity-100", ctx_r1.isExpanded());
54299
+ i0.ɵɵclassProp("max-h-0", !ctx_r2.isExpanded())("opacity-0", !ctx_r2.isExpanded())("max-h-[1000px]", ctx_r2.isExpanded())("opacity-100", ctx_r2.isExpanded());
54275
54300
  i0.ɵɵadvance();
54276
- i0.ɵɵproperty("ngClass", ctx_r1.expandedContentClasses());
54301
+ i0.ɵɵproperty("ngClass", ctx_r2.expandedContentClasses());
54277
54302
  i0.ɵɵadvance();
54278
- i0.ɵɵproperty("ngClass", ctx_r1.expandedTextClasses());
54303
+ i0.ɵɵproperty("ngClass", ctx_r2.expandedTextClasses());
54279
54304
  i0.ɵɵadvance(2);
54280
- i0.ɵɵproperty("ngClass", ctx_r1.expandedTextClasses());
54305
+ i0.ɵɵproperty("ngClass", ctx_r2.expandedTextClasses());
54281
54306
  } }
54282
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_8_Template(rf, ctx) { if (rf & 1) {
54307
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
54283
54308
  i0.ɵɵtext(0, " Change Google Analytics Property ");
54284
54309
  } }
54285
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template(rf, ctx) { if (rf & 1) {
54310
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_10_Template(rf, ctx) { if (rf & 1) {
54286
54311
  i0.ɵɵtext(0, " Choose Your Property ");
54287
54312
  } }
54288
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
54289
- i0.ɵɵelement(0, "div", 53);
54313
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
54314
+ const _r4 = i0.ɵɵgetCurrentView();
54315
+ i0.ɵɵelementStart(0, "button", 49);
54316
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.cancelEditMode()); });
54317
+ i0.ɵɵtext(1, " Cancel ");
54318
+ i0.ɵɵelementEnd();
54319
+ } if (rf & 2) {
54320
+ const ctx_r2 = i0.ɵɵnextContext(2);
54321
+ i0.ɵɵproperty("ngClass", ctx_r2.headerCancelButtonClasses());
54322
+ } }
54323
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
54324
+ i0.ɵɵelement(0, "div", 56);
54290
54325
  } }
54291
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
54292
- i0.ɵɵelementStart(0, "div", 58);
54326
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
54327
+ i0.ɵɵelementStart(0, "div", 61);
54293
54328
  i0.ɵɵnamespaceSVG();
54294
- i0.ɵɵelementStart(1, "svg", 59);
54295
- i0.ɵɵelement(2, "path", 60);
54329
+ i0.ɵɵelementStart(1, "svg", 62);
54330
+ i0.ɵɵelement(2, "path", 63);
54296
54331
  i0.ɵɵelementEnd();
54297
54332
  i0.ɵɵnamespaceHTML();
54298
- i0.ɵɵelementStart(3, "span", 57);
54333
+ i0.ɵɵelementStart(3, "span", 60);
54299
54334
  i0.ɵɵtext(4);
54300
54335
  i0.ɵɵelementEnd()();
54301
54336
  } if (rf & 2) {
54302
- const ctx_r1 = i0.ɵɵnextContext(5);
54337
+ const ctx_r2 = i0.ɵɵnextContext(5);
54303
54338
  i0.ɵɵadvance();
54304
- i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
54339
+ i0.ɵɵproperty("ngClass", ctx_r2.accountNameClasses());
54305
54340
  i0.ɵɵadvance(2);
54306
- i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
54341
+ i0.ɵɵproperty("ngClass", ctx_r2.accountNameClasses());
54307
54342
  i0.ɵɵadvance();
54308
54343
  i0.ɵɵtextInterpolate1(" Account: ", ctx.name || "Unnamed Account", " ");
54309
54344
  } }
54310
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
54311
- i0.ɵɵconditionalCreate(0, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Conditional_0_Template, 5, 3, "div", 58);
54345
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
54346
+ i0.ɵɵconditionalCreate(0, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_10_Conditional_0_Template, 5, 3, "div", 61);
54312
54347
  } if (rf & 2) {
54313
54348
  let tmp_13_0;
54314
- const property_r4 = i0.ɵɵnextContext().$implicit;
54315
- const ctx_r1 = i0.ɵɵnextContext(3);
54316
- i0.ɵɵconditional((tmp_13_0 = ctx_r1.getAccountForProperty(property_r4)) ? 0 : -1, tmp_13_0);
54349
+ const property_r6 = i0.ɵɵnextContext().$implicit;
54350
+ const ctx_r2 = i0.ɵɵnextContext(3);
54351
+ i0.ɵɵconditional((tmp_13_0 = ctx_r2.getAccountForProperty(property_r6)) ? 0 : -1, tmp_13_0);
54317
54352
  } }
54318
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
54319
- const _r3 = i0.ɵɵgetCurrentView();
54320
- i0.ɵɵelementStart(0, "label", 50);
54321
- 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()); });
54322
- i0.ɵɵelementStart(1, "div", 51)(2, "div", 52);
54323
- i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_3_Template, 1, 0, "div", 53);
54353
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
54354
+ const _r5 = i0.ɵɵgetCurrentView();
54355
+ i0.ɵɵelementStart(0, "label", 53);
54356
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template_label_click_0_listener() { const property_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectProperty(property_r6.id)); })("keydown.enter", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template_label_keydown_enter_0_listener() { const property_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectProperty(property_r6.id)); })("keydown.space", function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template_label_keydown_space_0_listener($event) { const property_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.selectProperty(property_r6.id); return i0.ɵɵresetView($event.preventDefault()); });
54357
+ i0.ɵɵelementStart(1, "div", 54)(2, "div", 55);
54358
+ i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_3_Template, 1, 0, "div", 56);
54324
54359
  i0.ɵɵelementEnd();
54325
- i0.ɵɵelementStart(4, "div", 54)(5, "div", 55);
54360
+ i0.ɵɵelementStart(4, "div", 57)(5, "div", 58);
54326
54361
  i0.ɵɵnamespaceSVG();
54327
- i0.ɵɵelementStart(6, "svg", 56);
54362
+ i0.ɵɵelementStart(6, "svg", 59);
54328
54363
  i0.ɵɵelement(7, "path", 18);
54329
54364
  i0.ɵɵelementEnd();
54330
54365
  i0.ɵɵnamespaceHTML();
54331
- i0.ɵɵelementStart(8, "div", 57);
54366
+ i0.ɵɵelementStart(8, "div", 60);
54332
54367
  i0.ɵɵtext(9);
54333
54368
  i0.ɵɵelementEnd()();
54334
- i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Conditional_10_Template, 1, 1);
54369
+ i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Conditional_10_Template, 1, 1);
54335
54370
  i0.ɵɵelementEnd()()();
54336
54371
  } if (rf & 2) {
54337
- const property_r4 = ctx.$implicit;
54338
- const ctx_r1 = i0.ɵɵnextContext(3);
54339
- i0.ɵɵproperty("ngClass", ctx_r1.propertyCardClasses(property_r4.id));
54340
- i0.ɵɵattribute("aria-checked", ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() === property_r4.id : ctx_r1.selectedGaPropertyId() ? ctx_r1.selectedGaPropertyId() === property_r4.id : ctx_r1.currentSelectingPropertyId() === property_r4.id);
54372
+ const property_r6 = ctx.$implicit;
54373
+ const ctx_r2 = i0.ɵɵnextContext(3);
54374
+ i0.ɵɵproperty("ngClass", ctx_r2.propertyCardClasses(property_r6.id));
54375
+ i0.ɵɵattribute("aria-checked", ctx_r2.isEditingProperty() ? ctx_r2.currentEditingPropertyId() === property_r6.id : ctx_r2.selectedGaPropertyId() ? ctx_r2.selectedGaPropertyId() === property_r6.id : ctx_r2.currentSelectingPropertyId() === property_r6.id);
54341
54376
  i0.ɵɵadvance(2);
54342
- i0.ɵɵproperty("ngClass", ctx_r1.radioIndicatorClasses(property_r4.id));
54377
+ i0.ɵɵproperty("ngClass", ctx_r2.radioIndicatorClasses(property_r6.id));
54343
54378
  i0.ɵɵadvance();
54344
- i0.ɵɵconditional((ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() === property_r4.id : ctx_r1.selectedGaPropertyId() ? ctx_r1.selectedGaPropertyId() === property_r4.id : ctx_r1.currentSelectingPropertyId() === property_r4.id) ? 3 : -1);
54379
+ i0.ɵɵconditional((ctx_r2.isEditingProperty() ? ctx_r2.currentEditingPropertyId() === property_r6.id : ctx_r2.selectedGaPropertyId() ? ctx_r2.selectedGaPropertyId() === property_r6.id : ctx_r2.currentSelectingPropertyId() === property_r6.id) ? 3 : -1);
54345
54380
  i0.ɵɵadvance(3);
54346
- i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
54381
+ i0.ɵɵproperty("ngClass", ctx_r2.noteIconClasses());
54347
54382
  i0.ɵɵadvance(2);
54348
- i0.ɵɵproperty("ngClass", ctx_r1.propertyNameClasses());
54383
+ i0.ɵɵproperty("ngClass", ctx_r2.propertyNameClasses());
54349
54384
  i0.ɵɵadvance();
54350
- i0.ɵɵtextInterpolate1(" ", property_r4.name || "Unnamed Property", " ");
54385
+ i0.ɵɵtextInterpolate1(" ", property_r6.name || "Unnamed Property", " ");
54351
54386
  i0.ɵɵadvance();
54352
- i0.ɵɵconditional(property_r4.gaAccountId ? 10 : -1);
54387
+ i0.ɵɵconditional(property_r6.gaAccountId ? 10 : -1);
54353
54388
  } }
54354
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
54355
- i0.ɵɵelementStart(0, "div", 47);
54356
- i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_Template, 11, 8, "label", 49, _forTrack0$i);
54389
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_Template(rf, ctx) { if (rf & 1) {
54390
+ i0.ɵɵelementStart(0, "div", 50);
54391
+ i0.ɵɵrepeaterCreate(1, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_For_2_Template, 11, 8, "label", 52, _forTrack0$i);
54357
54392
  i0.ɵɵelementEnd();
54358
54393
  } if (rf & 2) {
54359
- const ctx_r1 = i0.ɵɵnextContext(2);
54394
+ const ctx_r2 = i0.ɵɵnextContext(2);
54360
54395
  i0.ɵɵadvance();
54361
- i0.ɵɵrepeater(ctx_r1.sortedGaProperties());
54396
+ i0.ɵɵrepeater(ctx_r2.sortedGaProperties());
54362
54397
  } }
54363
- function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
54364
- i0.ɵɵelementStart(0, "div", 48)(1, "p", 61);
54398
+ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_15_Template(rf, ctx) { if (rf & 1) {
54399
+ i0.ɵɵelementStart(0, "div", 51)(1, "p", 64);
54365
54400
  i0.ɵɵtext(2, " No properties found. Please connect your Google Analytics account. ");
54366
54401
  i0.ɵɵelementEnd()();
54367
54402
  } if (rf & 2) {
54368
- const ctx_r1 = i0.ɵɵnextContext(2);
54403
+ const ctx_r2 = i0.ɵɵnextContext(2);
54369
54404
  i0.ɵɵadvance();
54370
- i0.ɵɵproperty("ngClass", ctx_r1.emptyStateTextClasses());
54405
+ i0.ɵɵproperty("ngClass", ctx_r2.emptyStateTextClasses());
54371
54406
  } }
54372
54407
  function SymphiqConnectGaDashboardComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
54373
54408
  i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
@@ -54376,165 +54411,169 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Template(rf, ctx) { i
54376
54411
  i0.ɵɵelement(5, "path", 18);
54377
54412
  i0.ɵɵelementEnd()();
54378
54413
  i0.ɵɵnamespaceHTML();
54379
- i0.ɵɵelementStart(6, "div", 19)(7, "h2", 20);
54380
- i0.ɵɵconditionalCreate(8, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_8_Template, 1, 0)(9, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template, 1, 0);
54414
+ i0.ɵɵelementStart(6, "div", 19)(7, "div", 20)(8, "h2", 21);
54415
+ i0.ɵɵconditionalCreate(9, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_9_Template, 1, 0)(10, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_10_Template, 1, 0);
54381
54416
  i0.ɵɵelementEnd();
54382
- i0.ɵɵelementStart(10, "p", 21);
54383
- i0.ɵɵtext(11, " Please choose the Google Analytics property you'd like to link to your shop. ");
54417
+ i0.ɵɵconditionalCreate(11, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_11_Template, 2, 1, "button", 22);
54384
54418
  i0.ɵɵelementEnd();
54385
- i0.ɵɵconditionalCreate(12, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_Template, 3, 0, "div", 47)(13, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template, 3, 1, "div", 48);
54419
+ i0.ɵɵelementStart(12, "p", 23);
54420
+ i0.ɵɵtext(13, " Please choose the Google Analytics property you'd like to link to your shop. ");
54421
+ i0.ɵɵelementEnd();
54422
+ i0.ɵɵconditionalCreate(14, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_Template, 3, 0, "div", 50)(15, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_15_Template, 3, 1, "div", 51);
54386
54423
  i0.ɵɵelementEnd()()()();
54387
54424
  } if (rf & 2) {
54388
- const ctx_r1 = i0.ɵɵnextContext();
54389
- i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
54425
+ const ctx_r2 = i0.ɵɵnextContext();
54426
+ i0.ɵɵproperty("ngClass", ctx_r2.containerClasses());
54390
54427
  i0.ɵɵadvance();
54391
- i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
54428
+ i0.ɵɵproperty("ngClass", ctx_r2.contentClasses());
54392
54429
  i0.ɵɵadvance(2);
54393
- i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
54394
- i0.ɵɵadvance(4);
54395
- i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
54430
+ i0.ɵɵproperty("ngClass", ctx_r2.iconContainerClasses());
54431
+ i0.ɵɵadvance(5);
54432
+ i0.ɵɵproperty("ngClass", ctx_r2.titleClasses());
54396
54433
  i0.ɵɵadvance();
54397
- i0.ɵɵconditional(ctx_r1.isEditingProperty() ? 8 : 9);
54434
+ i0.ɵɵconditional(ctx_r2.isEditingProperty() ? 9 : 10);
54398
54435
  i0.ɵɵadvance(2);
54399
- i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
54436
+ i0.ɵɵconditional(ctx_r2.isEditingProperty() ? 11 : -1);
54437
+ i0.ɵɵadvance();
54438
+ i0.ɵɵproperty("ngClass", ctx_r2.textClasses());
54400
54439
  i0.ɵɵadvance(2);
54401
- i0.ɵɵconditional(ctx_r1.sortedGaProperties() && ctx_r1.sortedGaProperties().length > 0 ? 12 : 13);
54440
+ i0.ɵɵconditional(ctx_r2.sortedGaProperties() && ctx_r2.sortedGaProperties().length > 0 ? 14 : 15);
54402
54441
  } }
54403
54442
  function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template(rf, ctx) { if (rf & 1) {
54404
- i0.ɵɵelementStart(0, "div", 58);
54443
+ i0.ɵɵelementStart(0, "div", 61);
54405
54444
  i0.ɵɵnamespaceSVG();
54406
- i0.ɵɵelementStart(1, "svg", 59);
54407
- i0.ɵɵelement(2, "path", 60);
54445
+ i0.ɵɵelementStart(1, "svg", 62);
54446
+ i0.ɵɵelement(2, "path", 63);
54408
54447
  i0.ɵɵelementEnd();
54409
54448
  i0.ɵɵnamespaceHTML();
54410
54449
  i0.ɵɵelementStart(3, "span", 0);
54411
54450
  i0.ɵɵtext(4);
54412
54451
  i0.ɵɵelementEnd()();
54413
54452
  } if (rf & 2) {
54414
- const ctx_r1 = i0.ɵɵnextContext(3);
54453
+ const ctx_r2 = i0.ɵɵnextContext(3);
54415
54454
  i0.ɵɵadvance();
54416
- i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
54455
+ i0.ɵɵproperty("ngClass", ctx_r2.accountNameClasses());
54417
54456
  i0.ɵɵadvance(2);
54418
- i0.ɵɵproperty("ngClass", ctx_r1.accountNameClasses());
54457
+ i0.ɵɵproperty("ngClass", ctx_r2.accountNameClasses());
54419
54458
  i0.ɵɵadvance();
54420
54459
  i0.ɵɵtextInterpolate1(" ", ctx.name || "Unnamed Account", " ");
54421
54460
  } }
54422
54461
  function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Template(rf, ctx) { if (rf & 1) {
54423
- i0.ɵɵelementStart(0, "div", 68)(1, "div", 71)(2, "div", 72);
54462
+ i0.ɵɵelementStart(0, "div", 71)(1, "div", 74)(2, "div", 75);
54424
54463
  i0.ɵɵtext(3, " Connected ");
54425
54464
  i0.ɵɵelementEnd()();
54426
- i0.ɵɵelementStart(4, "div", 73);
54465
+ i0.ɵɵelementStart(4, "div", 76);
54427
54466
  i0.ɵɵnamespaceSVG();
54428
- i0.ɵɵelementStart(5, "svg", 74);
54467
+ i0.ɵɵelementStart(5, "svg", 77);
54429
54468
  i0.ɵɵelement(6, "path", 18);
54430
54469
  i0.ɵɵelementEnd();
54431
54470
  i0.ɵɵnamespaceHTML();
54432
- i0.ɵɵelementStart(7, "div")(8, "div", 75);
54471
+ i0.ɵɵelementStart(7, "div")(8, "div", 78);
54433
54472
  i0.ɵɵtext(9);
54434
54473
  i0.ɵɵelementEnd();
54435
- i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template, 5, 3, "div", 58);
54474
+ i0.ɵɵconditionalCreate(10, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template, 5, 3, "div", 61);
54436
54475
  i0.ɵɵelementEnd()()();
54437
54476
  } if (rf & 2) {
54438
54477
  let tmp_8_0;
54439
- const ctx_r1 = i0.ɵɵnextContext(2);
54440
- i0.ɵɵproperty("ngClass", ctx_r1.selectedPropertyCardClasses());
54478
+ const ctx_r2 = i0.ɵɵnextContext(2);
54479
+ i0.ɵɵproperty("ngClass", ctx_r2.selectedPropertyCardClasses());
54441
54480
  i0.ɵɵadvance(2);
54442
- i0.ɵɵproperty("ngClass", ctx_r1.statusBadgeClasses());
54481
+ i0.ɵɵproperty("ngClass", ctx_r2.statusBadgeClasses());
54443
54482
  i0.ɵɵadvance(3);
54444
- i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
54483
+ i0.ɵɵproperty("ngClass", ctx_r2.noteIconClasses());
54445
54484
  i0.ɵɵadvance(3);
54446
- i0.ɵɵproperty("ngClass", ctx_r1.propertyNameClasses());
54485
+ i0.ɵɵproperty("ngClass", ctx_r2.propertyNameClasses());
54447
54486
  i0.ɵɵadvance();
54448
54487
  i0.ɵɵtextInterpolate1(" ", ctx.name || "Unnamed Property", " ");
54449
54488
  i0.ɵɵadvance();
54450
- i0.ɵɵconditional((tmp_8_0 = ctx_r1.selectedPropertyAccount()) ? 10 : -1, tmp_8_0);
54489
+ i0.ɵɵconditional((tmp_8_0 = ctx_r2.selectedPropertyAccount()) ? 10 : -1, tmp_8_0);
54451
54490
  } }
54452
54491
  function SymphiqConnectGaDashboardComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
54453
- const _r5 = i0.ɵɵgetCurrentView();
54492
+ const _r7 = i0.ɵɵgetCurrentView();
54454
54493
  i0.ɵɵelementStart(0, "div", 12)(1, "div", 14)(2, "div", 15)(3, "div", 16);
54455
54494
  i0.ɵɵnamespaceSVG();
54456
54495
  i0.ɵɵelementStart(4, "svg", 17);
54457
- i0.ɵɵelement(5, "path", 62);
54496
+ i0.ɵɵelement(5, "path", 65);
54458
54497
  i0.ɵɵelementEnd()();
54459
54498
  i0.ɵɵnamespaceHTML();
54460
- i0.ɵɵelementStart(6, "div", 19)(7, "div", 63)(8, "div")(9, "h2", 64);
54499
+ i0.ɵɵelementStart(6, "div", 19)(7, "div", 66)(8, "div")(9, "h2", 67);
54461
54500
  i0.ɵɵtext(10, " Connected to Google Analytics ");
54462
54501
  i0.ɵɵelementEnd();
54463
- i0.ɵɵelementStart(11, "p", 61);
54502
+ i0.ɵɵelementStart(11, "p", 64);
54464
54503
  i0.ɵɵtext(12, " Your analytics data is linked ");
54465
54504
  i0.ɵɵelementEnd()();
54466
- i0.ɵɵelementStart(13, "button", 65);
54467
- 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()); });
54505
+ i0.ɵɵelementStart(13, "button", 68);
54506
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_23_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.enableEditMode()); });
54468
54507
  i0.ɵɵnamespaceSVG();
54469
- i0.ɵɵelementStart(14, "svg", 66);
54470
- i0.ɵɵelement(15, "path", 67);
54508
+ i0.ɵɵelementStart(14, "svg", 69);
54509
+ i0.ɵɵelement(15, "path", 70);
54471
54510
  i0.ɵɵelementEnd();
54472
54511
  i0.ɵɵtext(16, " Edit ");
54473
54512
  i0.ɵɵelementEnd()();
54474
- i0.ɵɵconditionalCreate(17, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Template, 11, 6, "div", 68);
54513
+ i0.ɵɵconditionalCreate(17, SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Template, 11, 6, "div", 71);
54475
54514
  i0.ɵɵnamespaceHTML();
54476
- i0.ɵɵelementStart(18, "button", 69);
54477
- 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()); });
54515
+ i0.ɵɵelementStart(18, "button", 72);
54516
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_23_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.reconnectWithDifferentAccount()); });
54478
54517
  i0.ɵɵnamespaceSVG();
54479
- i0.ɵɵelementStart(19, "svg", 66);
54480
- i0.ɵɵelement(20, "path", 70);
54518
+ i0.ɵɵelementStart(19, "svg", 69);
54519
+ i0.ɵɵelement(20, "path", 73);
54481
54520
  i0.ɵɵelementEnd();
54482
54521
  i0.ɵɵtext(21, " Use Different Google Account ");
54483
54522
  i0.ɵɵelementEnd()()()()();
54484
54523
  } if (rf & 2) {
54485
54524
  let tmp_7_0;
54486
- const ctx_r1 = i0.ɵɵnextContext();
54487
- i0.ɵɵproperty("ngClass", ctx_r1.containerClasses());
54525
+ const ctx_r2 = i0.ɵɵnextContext();
54526
+ i0.ɵɵproperty("ngClass", ctx_r2.containerClasses());
54488
54527
  i0.ɵɵadvance();
54489
- i0.ɵɵproperty("ngClass", ctx_r1.contentClasses());
54528
+ i0.ɵɵproperty("ngClass", ctx_r2.contentClasses());
54490
54529
  i0.ɵɵadvance(2);
54491
- i0.ɵɵproperty("ngClass", ctx_r1.iconContainerClasses());
54530
+ i0.ɵɵproperty("ngClass", ctx_r2.iconContainerClasses());
54492
54531
  i0.ɵɵadvance(6);
54493
- i0.ɵɵproperty("ngClass", ctx_r1.titleClasses());
54532
+ i0.ɵɵproperty("ngClass", ctx_r2.titleClasses());
54494
54533
  i0.ɵɵadvance(2);
54495
- i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
54534
+ i0.ɵɵproperty("ngClass", ctx_r2.textClasses());
54496
54535
  i0.ɵɵadvance(2);
54497
- i0.ɵɵproperty("ngClass", ctx_r1.editButtonClasses());
54536
+ i0.ɵɵproperty("ngClass", ctx_r2.editButtonClasses());
54498
54537
  i0.ɵɵadvance(4);
54499
- i0.ɵɵconditional((tmp_7_0 = ctx_r1.selectedProperty()) ? 17 : -1, tmp_7_0);
54538
+ i0.ɵɵconditional((tmp_7_0 = ctx_r2.selectedProperty()) ? 17 : -1, tmp_7_0);
54500
54539
  i0.ɵɵadvance();
54501
- i0.ɵɵproperty("ngClass", ctx_r1.reconnectButtonClasses());
54540
+ i0.ɵɵproperty("ngClass", ctx_r2.reconnectButtonClasses());
54502
54541
  } }
54503
54542
  function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
54504
- const _r6 = i0.ɵɵgetCurrentView();
54505
- i0.ɵɵelementStart(0, "button", 79);
54506
- i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
54543
+ const _r8 = i0.ɵɵgetCurrentView();
54544
+ i0.ɵɵelementStart(0, "button", 82);
54545
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.cancelEditMode()); });
54507
54546
  i0.ɵɵtext(1, " Cancel ");
54508
54547
  i0.ɵɵelementEnd();
54509
- i0.ɵɵelementStart(2, "button", 80);
54510
- i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submitPropertyChange()); });
54548
+ i0.ɵɵelementStart(2, "button", 83);
54549
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.submitPropertyChange()); });
54511
54550
  i0.ɵɵtext(3, " Submit ");
54512
54551
  i0.ɵɵelementEnd();
54513
54552
  } if (rf & 2) {
54514
- const ctx_r1 = i0.ɵɵnextContext(2);
54515
- i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
54553
+ const ctx_r2 = i0.ɵɵnextContext(2);
54554
+ i0.ɵɵproperty("ngClass", ctx_r2.cancelButtonClasses());
54516
54555
  i0.ɵɵadvance(2);
54517
- i0.ɵɵproperty("disabled", !ctx_r1.hasPropertyChanged())("ngClass", ctx_r1.submitButtonClasses());
54556
+ i0.ɵɵproperty("disabled", !ctx_r2.hasPropertyChanged())("ngClass", ctx_r2.submitButtonClasses());
54518
54557
  } }
54519
54558
  function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
54520
- const _r7 = i0.ɵɵgetCurrentView();
54521
- i0.ɵɵelementStart(0, "button", 80);
54522
- i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submitPropertySelection()); });
54559
+ const _r9 = i0.ɵɵgetCurrentView();
54560
+ i0.ɵɵelementStart(0, "button", 83);
54561
+ i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.submitPropertySelection()); });
54523
54562
  i0.ɵɵtext(1, " Continue ");
54524
54563
  i0.ɵɵelementEnd();
54525
54564
  } if (rf & 2) {
54526
- const ctx_r1 = i0.ɵɵnextContext(2);
54527
- i0.ɵɵproperty("disabled", !ctx_r1.hasPropertySelected())("ngClass", ctx_r1.submitButtonClasses());
54565
+ const ctx_r2 = i0.ɵɵnextContext(2);
54566
+ i0.ɵɵproperty("disabled", !ctx_r2.hasPropertySelected())("ngClass", ctx_r2.submitButtonClasses());
54528
54567
  } }
54529
54568
  function SymphiqConnectGaDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
54530
- i0.ɵɵelementStart(0, "div", 13)(1, "div", 76)(2, "div", 77);
54531
- i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template, 4, 3)(4, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template, 2, 2, "button", 78);
54569
+ i0.ɵɵelementStart(0, "div", 13)(1, "div", 79)(2, "div", 80);
54570
+ i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template, 4, 3)(4, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template, 2, 2, "button", 81);
54532
54571
  i0.ɵɵelementEnd()()();
54533
54572
  } if (rf & 2) {
54534
- const ctx_r1 = i0.ɵɵnextContext();
54535
- i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
54573
+ const ctx_r2 = i0.ɵɵnextContext();
54574
+ i0.ɵɵproperty("ngClass", ctx_r2.stickyButtonContainerClasses());
54536
54575
  i0.ɵɵadvance(3);
54537
- i0.ɵɵconditional(ctx_r1.isEditingProperty() ? 3 : 4);
54576
+ i0.ɵɵconditional(ctx_r2.isEditingProperty() ? 3 : 4);
54538
54577
  } }
54539
54578
  class SymphiqConnectGaDashboardComponent {
54540
54579
  constructor() {
@@ -54554,13 +54593,13 @@ class SymphiqConnectGaDashboardComponent {
54554
54593
  this.googleButtonClick = output();
54555
54594
  this.onPropertySelect = output();
54556
54595
  this.onPropertyChange = output();
54557
- this.onReconnectGoogle = output();
54558
54596
  this.headerScrollService = inject(HeaderScrollService);
54559
54597
  this.JourneyStepIdEnum = JourneyStepIdEnum;
54560
54598
  this.COLLAPSE_THRESHOLD = 20;
54561
54599
  this.EXPAND_THRESHOLD = 10;
54562
54600
  this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
54563
54601
  this.isEditingProperty = signal(false, ...(ngDevMode ? [{ debugName: "isEditingProperty" }] : []));
54602
+ this.isReconnecting = signal(false, ...(ngDevMode ? [{ debugName: "isReconnecting" }] : []));
54564
54603
  this.currentEditingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentEditingPropertyId" }] : []));
54565
54604
  this.currentSelectingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentSelectingPropertyId" }] : []));
54566
54605
  this.sortedGaProperties = computed(() => {
@@ -54575,7 +54614,8 @@ class SymphiqConnectGaDashboardComponent {
54575
54614
  }, ...(ngDevMode ? [{ debugName: "sortedGaProperties" }] : []));
54576
54615
  this.isConnectState = computed(() => {
54577
54616
  const properties = this.gaProperties();
54578
- return !properties || properties.length === 0;
54617
+ const reconnecting = this.isReconnecting();
54618
+ return (!properties || properties.length === 0) || reconnecting;
54579
54619
  }, ...(ngDevMode ? [{ debugName: "isConnectState" }] : []));
54580
54620
  this.isSelectionState = computed(() => {
54581
54621
  const properties = this.gaProperties();
@@ -54587,7 +54627,8 @@ class SymphiqConnectGaDashboardComponent {
54587
54627
  const properties = this.gaProperties();
54588
54628
  const selectedId = this.selectedGaPropertyId();
54589
54629
  const isEditing = this.isEditingProperty();
54590
- return properties && properties.length > 0 && selectedId !== undefined && !isEditing;
54630
+ const reconnecting = this.isReconnecting();
54631
+ return properties && properties.length > 0 && selectedId !== undefined && !isEditing && !reconnecting;
54591
54632
  }, ...(ngDevMode ? [{ debugName: "isSelectedState" }] : []));
54592
54633
  this.hasPropertyChanged = computed(() => {
54593
54634
  const current = this.currentEditingPropertyId();
@@ -54712,7 +54753,10 @@ class SymphiqConnectGaDashboardComponent {
54712
54753
  }
54713
54754
  }
54714
54755
  reconnectWithDifferentAccount() {
54715
- this.onReconnectGoogle.emit();
54756
+ this.isReconnecting.set(true);
54757
+ }
54758
+ cancelReconnectMode() {
54759
+ this.isReconnecting.set(false);
54716
54760
  }
54717
54761
  getContainerClasses() {
54718
54762
  return this.isLightMode()
@@ -54876,6 +54920,11 @@ class SymphiqConnectGaDashboardComponent {
54876
54920
  ? 'bg-white/80 border-slate-200'
54877
54921
  : 'bg-slate-900/80 border-slate-700';
54878
54922
  }
54923
+ headerCancelButtonClasses() {
54924
+ return this.isLightMode()
54925
+ ? 'bg-slate-100 text-slate-700 hover:bg-slate-200 border border-slate-300'
54926
+ : 'bg-slate-700 text-slate-200 hover:bg-slate-600 border border-slate-600';
54927
+ }
54879
54928
  cancelButtonClasses() {
54880
54929
  return this.isLightMode()
54881
54930
  ? 'border-2 border-slate-300 text-slate-700 hover:bg-slate-50'
@@ -54901,7 +54950,7 @@ class SymphiqConnectGaDashboardComponent {
54901
54950
  i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
54902
54951
  } if (rf & 2) {
54903
54952
  i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
54904
- } }, 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", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "disabled", "ngClass"], ["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) {
54953
+ } }, 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" }, 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", "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"], [1, "flex-1"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "text-2xl", "sm:text-3xl", "font-bold", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", "flex-shrink-0", 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"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", "flex-shrink-0", 3, "click", "ngClass"], ["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", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "disabled", "ngClass"], ["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) {
54905
54954
  i0.ɵɵelementStart(0, "div", 0);
54906
54955
  i0.ɵɵelement(1, "div", 1);
54907
54956
  i0.ɵɵelementStart(2, "div", 2)(3, "header", 3)(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "div")(8, "h1", 0);
@@ -54917,8 +54966,8 @@ class SymphiqConnectGaDashboardComponent {
54917
54966
  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(); });
54918
54967
  i0.ɵɵelementEnd();
54919
54968
  i0.ɵɵelementStart(19, "main", 10)(20, "div", 11);
54920
- i0.ɵɵconditionalCreate(21, SymphiqConnectGaDashboardComponent_Conditional_21_Template, 47, 25, "div", 12);
54921
- i0.ɵɵconditionalCreate(22, SymphiqConnectGaDashboardComponent_Conditional_22_Template, 14, 7, "div", 12);
54969
+ i0.ɵɵconditionalCreate(21, SymphiqConnectGaDashboardComponent_Conditional_21_Template, 51, 28, "div", 12);
54970
+ i0.ɵɵconditionalCreate(22, SymphiqConnectGaDashboardComponent_Conditional_22_Template, 16, 8, "div", 12);
54922
54971
  i0.ɵɵconditionalCreate(23, SymphiqConnectGaDashboardComponent_Conditional_23_Template, 22, 8, "div", 12);
54923
54972
  i0.ɵɵelementEnd();
54924
54973
  i0.ɵɵconditionalCreate(24, SymphiqConnectGaDashboardComponent_Conditional_24_Template, 5, 2, "div", 13);
@@ -55032,17 +55081,37 @@ class SymphiqConnectGaDashboardComponent {
55032
55081
  <div class="flex items-start gap-6">
55033
55082
  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
55034
55083
  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55035
- <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>
55084
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
55036
55085
  </svg>
55037
55086
  </div>
55038
55087
 
55039
55088
  <div class="flex-1">
55040
- <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
55041
- Connect Google Analytics 4
55042
- </h2>
55089
+ <div class="flex items-start justify-between gap-4 mb-4">
55090
+ <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold">
55091
+ @if (isReconnecting()) {
55092
+ Change Google Account
55093
+ } @else {
55094
+ Connect Google Analytics 4
55095
+ }
55096
+ </h2>
55097
+
55098
+ @if (isReconnecting()) {
55099
+ <button
55100
+ type="button"
55101
+ (click)="cancelReconnectMode()"
55102
+ [ngClass]="headerCancelButtonClasses()"
55103
+ class="px-4 py-2 rounded-lg font-semibold text-sm transition-all duration-200 hover:scale-105 cursor-pointer flex-shrink-0">
55104
+ Cancel
55105
+ </button>
55106
+ }
55107
+ </div>
55043
55108
 
55044
55109
  <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
55045
- 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.
55110
+ @if (isReconnecting()) {
55111
+ Sign in with a different Google account to access other Google Analytics properties.
55112
+ } @else {
55113
+ 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.
55114
+ }
55046
55115
  </p>
55047
55116
 
55048
55117
  <div class="mb-6">
@@ -55108,18 +55177,30 @@ class SymphiqConnectGaDashboardComponent {
55108
55177
  <div class="flex items-start gap-6">
55109
55178
  <div [ngClass]="iconContainerClasses()" class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center">
55110
55179
  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55111
- <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>
55180
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
55112
55181
  </svg>
55113
55182
  </div>
55114
55183
 
55115
55184
  <div class="flex-1">
55116
- <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold mb-4">
55185
+ <div class="flex items-start justify-between gap-4 mb-4">
55186
+ <h2 [ngClass]="titleClasses()" class="text-2xl sm:text-3xl font-bold">
55187
+ @if (isEditingProperty()) {
55188
+ Change Google Analytics Property
55189
+ } @else {
55190
+ Choose Your Property
55191
+ }
55192
+ </h2>
55193
+
55117
55194
  @if (isEditingProperty()) {
55118
- Change Google Analytics Property
55119
- } @else {
55120
- Choose Your Property
55195
+ <button
55196
+ type="button"
55197
+ (click)="cancelEditMode()"
55198
+ [ngClass]="headerCancelButtonClasses()"
55199
+ class="px-4 py-2 rounded-lg font-semibold text-sm transition-all duration-200 hover:scale-105 cursor-pointer flex-shrink-0">
55200
+ Cancel
55201
+ </button>
55121
55202
  }
55122
- </h2>
55203
+ </div>
55123
55204
 
55124
55205
  <p [ngClass]="textClasses()" class="text-base leading-relaxed mb-6">
55125
55206
  Please choose the Google Analytics property you'd like to link to your shop.
@@ -55147,7 +55228,7 @@ class SymphiqConnectGaDashboardComponent {
55147
55228
  <div class="flex-1 min-w-0">
55148
55229
  <div class="flex items-center gap-2 mb-1">
55149
55230
  <svg class="w-5 h-5 flex-shrink-0" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55150
- <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>
55231
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
55151
55232
  </svg>
55152
55233
  <div [ngClass]="propertyNameClasses()" class="truncate">
55153
55234
  {{ property.name || 'Unnamed Property' }}
@@ -55227,7 +55308,7 @@ class SymphiqConnectGaDashboardComponent {
55227
55308
 
55228
55309
  <div class="flex items-center gap-3 mb-3">
55229
55310
  <svg class="w-6 h-6 flex-shrink-0" [ngClass]="noteIconClasses()" fill="none" stroke="currentColor" viewBox="0 0 24 24">
55230
- <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>
55311
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
55231
55312
  </svg>
55232
55313
  <div>
55233
55314
  <div [ngClass]="propertyNameClasses()" class="text-lg">
@@ -55304,11 +55385,11 @@ class SymphiqConnectGaDashboardComponent {
55304
55385
  </div>
55305
55386
  </div>
55306
55387
  `, 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"] }]
55307
- }], () => [], { 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: [{
55388
+ }], () => [], { 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"] }], onScroll: [{
55308
55389
  type: HostListener,
55309
55390
  args: ['window:scroll', ['$event']]
55310
55391
  }] }); })();
55311
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 642 }); })();
55392
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 674 }); })();
55312
55393
 
55313
55394
  function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
55314
55395
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);