@eric-emg/symphiq-components 1.2.169 → 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.
- package/fesm2022/symphiq-components.mjs +246 -250
- package/fesm2022/symphiq-components.mjs.map +1 -1
- package/index.d.ts +51 -51
- package/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -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 ɵ$
|
|
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 === ɵ$
|
|
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
|
|
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(
|
|
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
|
|
25037
|
-
const
|
|
25038
|
-
const ɵ$
|
|
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(
|
|
25037
|
+
i0.ɵɵproperty("ngClass", ctx_r2.getStepNumberClasses(step_r10));
|
|
25041
25038
|
i0.ɵɵadvance();
|
|
25042
|
-
i0.ɵɵtextInterpolate1(" ", ɵ$
|
|
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
|
|
25059
|
-
const ɵ$
|
|
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(
|
|
25059
|
+
i0.ɵɵproperty("ngClass", ctx_r2.getStepIconContainerClasses(step_r10));
|
|
25063
25060
|
i0.ɵɵadvance();
|
|
25064
|
-
i0.ɵɵconditional(
|
|
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("", ɵ$
|
|
25065
|
+
i0.ɵɵtextInterpolate1("", ɵ$index_115_r11 + 1, ".");
|
|
25069
25066
|
i0.ɵɵadvance();
|
|
25070
|
-
i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(
|
|
25067
|
+
i0.ɵɵproperty("ngClass", ctx_r2.getStepTitleClasses(step_r10));
|
|
25071
25068
|
i0.ɵɵadvance();
|
|
25072
|
-
i0.ɵɵtextInterpolate(
|
|
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(" ",
|
|
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
|
|
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(
|
|
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", "
|
|
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,
|
|
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
|
|
25596
|
-
[
|
|
25597
|
-
|
|
25598
|
-
(
|
|
25599
|
-
|
|
25600
|
-
|
|
25601
|
-
|
|
25602
|
-
|
|
25603
|
-
|
|
25604
|
-
|
|
25605
|
-
|
|
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
|
-
(
|
|
25626
|
-
|
|
25627
|
-
|
|
25628
|
-
|
|
25629
|
-
|
|
25630
|
-
|
|
25631
|
-
|
|
25632
|
-
|
|
25633
|
-
[
|
|
25634
|
-
|
|
25635
|
-
[
|
|
25636
|
-
|
|
25637
|
-
[style.
|
|
25638
|
-
|
|
25639
|
-
|
|
25640
|
-
|
|
25641
|
-
|
|
25642
|
-
|
|
25643
|
-
|
|
25644
|
-
|
|
25645
|
-
|
|
25646
|
-
|
|
25647
|
-
|
|
25648
|
-
|
|
25649
|
-
|
|
25650
|
-
|
|
25651
|
-
|
|
25652
|
-
|
|
25653
|
-
|
|
25654
|
-
|
|
25655
|
-
|
|
25656
|
-
|
|
25657
|
-
|
|
25658
|
-
|
|
25659
|
-
|
|
25660
|
-
|
|
25661
|
-
|
|
25662
|
-
|
|
25663
|
-
|
|
25664
|
-
|
|
25665
|
-
|
|
25666
|
-
|
|
25667
|
-
|
|
25668
|
-
|
|
25669
|
-
|
|
25670
|
-
|
|
25671
|
-
|
|
25672
|
-
[
|
|
25673
|
-
class
|
|
25674
|
-
[class.
|
|
25675
|
-
[class.
|
|
25676
|
-
|
|
25677
|
-
|
|
25678
|
-
|
|
25679
|
-
|
|
25680
|
-
|
|
25681
|
-
|
|
25682
|
-
|
|
25683
|
-
|
|
25684
|
-
|
|
25685
|
-
|
|
25686
|
-
|
|
25687
|
-
|
|
25688
|
-
|
|
25689
|
-
|
|
25690
|
-
|
|
25691
|
-
|
|
25692
|
-
|
|
25693
|
-
|
|
25694
|
-
|
|
25695
|
-
|
|
25696
|
-
|
|
25697
|
-
|
|
25698
|
-
|
|
25699
|
-
|
|
25700
|
-
|
|
25701
|
-
|
|
25702
|
-
|
|
25703
|
-
|
|
25704
|
-
|
|
25705
|
-
} @else
|
|
25706
|
-
<
|
|
25707
|
-
|
|
25708
|
-
|
|
25709
|
-
|
|
25710
|
-
|
|
25711
|
-
|
|
25712
|
-
|
|
25713
|
-
|
|
25714
|
-
|
|
25715
|
-
|
|
25716
|
-
|
|
25717
|
-
|
|
25718
|
-
|
|
25719
|
-
|
|
25720
|
-
|
|
25721
|
-
|
|
25722
|
-
(
|
|
25723
|
-
|
|
25724
|
-
|
|
25725
|
-
|
|
25726
|
-
|
|
25727
|
-
|
|
25728
|
-
|
|
25729
|
-
|
|
25730
|
-
|
|
25731
|
-
|
|
25732
|
-
|
|
25733
|
-
|
|
25734
|
-
|
|
25735
|
-
|
|
25736
|
-
|
|
25737
|
-
|
|
25738
|
-
|
|
25739
|
-
|
|
25740
|
-
|
|
25741
|
-
|
|
25742
|
-
|
|
25743
|
-
|
|
25744
|
-
|
|
25745
|
-
|
|
25746
|
-
|
|
25747
|
-
} @else if (step.status === '
|
|
25748
|
-
<div class="w-
|
|
25749
|
-
} @else
|
|
25750
|
-
<
|
|
25751
|
-
|
|
25752
|
-
|
|
25753
|
-
|
|
25754
|
-
|
|
25755
|
-
|
|
25756
|
-
|
|
25757
|
-
|
|
25758
|
-
|
|
25759
|
-
|
|
25760
|
-
|
|
25761
|
-
|
|
25762
|
-
|
|
25763
|
-
|
|
25764
|
-
|
|
25765
|
-
|
|
25766
|
-
|
|
25767
|
-
|
|
25768
|
-
|
|
25769
|
-
|
|
25770
|
-
|
|
25771
|
-
|
|
25772
|
-
|
|
25773
|
-
|
|
25774
|
-
|
|
25775
|
-
|
|
25776
|
-
|
|
25777
|
-
|
|
25778
|
-
|
|
25779
|
-
|
|
25780
|
-
|
|
25781
|
-
|
|
25782
|
-
[
|
|
25783
|
-
class
|
|
25784
|
-
[class.
|
|
25785
|
-
[class.
|
|
25786
|
-
|
|
25787
|
-
|
|
25788
|
-
|
|
25789
|
-
|
|
25790
|
-
|
|
25791
|
-
|
|
25792
|
-
|
|
25793
|
-
|
|
25794
|
-
|
|
25795
|
-
|
|
25796
|
-
|
|
25797
|
-
|
|
25798
|
-
|
|
25799
|
-
|
|
25800
|
-
|
|
25801
|
-
|
|
25802
|
-
|
|
25803
|
-
|
|
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:
|
|
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() {
|
|
@@ -54632,7 +54627,8 @@ class SymphiqConnectGaDashboardComponent {
|
|
|
54632
54627
|
const properties = this.gaProperties();
|
|
54633
54628
|
const selectedId = this.selectedGaPropertyId();
|
|
54634
54629
|
const isEditing = this.isEditingProperty();
|
|
54635
|
-
|
|
54630
|
+
const reconnecting = this.isReconnecting();
|
|
54631
|
+
return properties && properties.length > 0 && selectedId !== undefined && !isEditing && !reconnecting;
|
|
54636
54632
|
}, ...(ngDevMode ? [{ debugName: "isSelectedState" }] : []));
|
|
54637
54633
|
this.hasPropertyChanged = computed(() => {
|
|
54638
54634
|
const current = this.currentEditingPropertyId();
|