@eric-emg/symphiq-components 1.3.4 → 1.3.5

package/fesm2022/symphiq-components.mjs

@@ -53523,50 +53523,74 @@ function SymphiqCreateAccountDashboardComponent_Conditional_9_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r0.accountData() || ctx_r0.focusAreasEditMode() ? 4 : -1);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73)(1, "div", 77)(2, "span", 59);
+    i0.ɵɵtext(3, " Focus Areas ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 78);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 79);
+    i0.ɵɵelement(7, "div", 80);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.focusAreaProgressLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.focusAreaProgressCountClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", ctx_r0.focusAreasAnswered(), " / ", ctx_r0.totalFocusAreas(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.focusAreaProgressBarBgClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("width", ctx_r0.focusAreaProgressPercent(), "%");
+    i0.ɵɵproperty("ngClass", ctx_r0.focusAreaProgressBarFillClasses());
+} }
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 76);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.cancelFocusAreasEditMode() : ctx_r0.cancelEditMode()); });
+    i0.ɵɵelementStart(0, "button", 81);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.cancelFocusAreasEditMode() : ctx_r0.cancelEditMode()); });
     i0.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.cancelButtonClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Saving Focus Areas... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Updating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Creating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 77);
-    i0.ɵɵelement(1, "circle", 78)(2, "path", 79);
+    i0.ɵɵelementStart(0, "svg", 82);
+    i0.ɵɵelement(1, "circle", 83)(2, "path", 84);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Conditional_5_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_5_Template, 1, 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.focusAreasEditMode() ? 3 : ctx_r0.accountData() && ctx_r0.editMode() ? 4 : 5);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Focus Areas ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Changes ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Create Account ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Conditional_2_Template, 1, 0);
+function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Conditional_2_Template, 1, 0);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 80);
-    i0.ɵɵelement(4, "path", 81);
+    i0.ɵɵelementStart(3, "svg", 85);
+    i0.ɵɵelement(4, "path", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -53574,22 +53598,26 @@ function SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Tem
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11)(1, "div", 72)(2, "div", 73);
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_3_Template, 2, 1, "button", 74);
-    i0.ɵɵelementStart(4, "button", 75);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.handleSaveFocusAreas() : ctx_r0.handleContinue()); });
-    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template, 5, 1);
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 72);
+    i0.ɵɵconditionalCreate(2, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_2_Template, 8, 8, "div", 73);
+    i0.ɵɵelementStart(3, "div", 74);
+    i0.ɵɵconditionalCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_4_Template, 2, 1, "button", 75);
+    i0.ɵɵelementStart(5, "button", 76);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.focusAreasEditMode() ? ctx_r0.handleSaveFocusAreas() : ctx_r0.handleContinue()); });
+    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_6_Template, 6, 1)(7, SymphiqCreateAccountDashboardComponent_Conditional_11_Conditional_7_Template, 5, 1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.stickyButtonContainerClasses());
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.accountData() && ctx_r0.editMode() || ctx_r0.accountData() && ctx_r0.focusAreasEditMode() ? 3 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.formValid() && !ctx_r0.accountData() && !ctx_r0.focusAreasEditMode() ? 2 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.accountData() && ctx_r0.editMode() || ctx_r0.accountData() && ctx_r0.focusAreasEditMode() ? 4 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("cursor-pointer", ctx_r0.isButtonEnabled())("cursor-not-allowed", !ctx_r0.isButtonEnabled())("opacity-50", !ctx_r0.isButtonEnabled())("hover:scale-105", ctx_r0.isButtonEnabled());
     i0.ɵɵproperty("disabled", !ctx_r0.isButtonEnabled())("ngClass", ctx_r0.continueButtonClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isLoading() ? 5 : 6);
+    i0.ɵɵconditional(ctx_r0.isLoading() ? 6 : 7);
 } }
 var ShopPlatformEnum;
 (function (ShopPlatformEnum) {
@@ -53657,6 +53685,7 @@ class SymphiqCreateAccountDashboardComponent {
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.isCreatingAccount = computed(() => this.isLoading() && !this.accountData(), ...(ngDevMode ? [{ debugName: "isCreatingAccount" }] : []));
         this.formChanged = signal(false, ...(ngDevMode ? [{ debugName: "formChanged" }] : []));
+        this.formValid = signal(false, ...(ngDevMode ? [{ debugName: "formValid" }] : []));
         this.originalFormValue = null;
         this.loadTime = Date.now();
         this.ShopPlatformEnum = ShopPlatformEnum;
@@ -53693,6 +53722,12 @@ class SymphiqCreateAccountDashboardComponent {
         this.allFocusAreasAnswered = computed(() => {
             return this.focusAreasAnswered() === this.totalFocusAreas();
         }, ...(ngDevMode ? [{ debugName: "allFocusAreasAnswered" }] : []));
+        this.focusAreaProgressPercent = computed(() => {
+            const total = this.totalFocusAreas();
+            if (total === 0)
+                return 0;
+            return (this.focusAreasAnswered() / total) * 100;
+        }, ...(ngDevMode ? [{ debugName: "focusAreaProgressPercent" }] : []));
         this.currentEditingFocusAreaTitle = computed(() => {
             const domain = this.currentEditingFocusArea();
             return domain ? FocusAreaDomainEnumUtil.title(domain) : '';
@@ -53740,6 +53775,22 @@ class SymphiqCreateAccountDashboardComponent {
                 title: FocusAreaDomainEnumUtil.title(fa.focusAreaDomain)
             }));
         }, ...(ngDevMode ? [{ debugName: "notInterestedFocusAreasDisplay" }] : []));
+        this.isButtonEnabled = computed(() => {
+            if (this.isLoading())
+                return false;
+            if (this.focusAreasEditMode()) {
+                return this.allFocusAreasAnswered() && this.focusAreasChanged();
+            }
+            if (!this.formValid())
+                return false;
+            if (!this.accountData()) {
+                return this.allFocusAreasAnswered();
+            }
+            if (this.accountData() && this.editMode()) {
+                return this.formChanged();
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "isButtonEnabled" }] : []));
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
         this.containerWrapperClasses = computed(() => {
             if (this.embedded()) {
@@ -53833,6 +53884,38 @@ class SymphiqCreateAccountDashboardComponent {
                 ? 'bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white'
                 : 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white';
         }, ...(ngDevMode ? [{ debugName: "continueButtonClasses" }] : []));
+        this.focusAreaProgressLabelClasses = computed(() => {
+            return this.isLightMode()
+                ? 'text-slate-600'
+                : 'text-slate-400';
+        }, ...(ngDevMode ? [{ debugName: "focusAreaProgressLabelClasses" }] : []));
+        this.focusAreaProgressCountClasses = computed(() => {
+            const allAnswered = this.allFocusAreasAnswered();
+            if (allAnswered) {
+                return this.isLightMode()
+                    ? 'text-emerald-600'
+                    : 'text-emerald-400';
+            }
+            return this.isLightMode()
+                ? 'text-blue-600'
+                : 'text-blue-400';
+        }, ...(ngDevMode ? [{ debugName: "focusAreaProgressCountClasses" }] : []));
+        this.focusAreaProgressBarBgClasses = computed(() => {
+            return this.isLightMode()
+                ? 'bg-slate-200'
+                : 'bg-slate-700';
+        }, ...(ngDevMode ? [{ debugName: "focusAreaProgressBarBgClasses" }] : []));
+        this.focusAreaProgressBarFillClasses = computed(() => {
+            const allAnswered = this.allFocusAreasAnswered();
+            if (allAnswered) {
+                return this.isLightMode()
+                    ? 'bg-gradient-to-r from-emerald-500 to-teal-500'
+                    : 'bg-gradient-to-r from-emerald-400 to-teal-400';
+            }
+            return this.isLightMode()
+                ? 'bg-gradient-to-r from-blue-500 to-cyan-500'
+                : 'bg-gradient-to-r from-blue-400 to-cyan-400';
+        }, ...(ngDevMode ? [{ debugName: "focusAreaProgressBarFillClasses" }] : []));
         this.progressBadgeClasses = computed(() => {
             const allAnswered = this.allFocusAreasAnswered();
             return this.isLightMode()
@@ -53920,6 +54003,10 @@ class SymphiqCreateAccountDashboardComponent {
                 this.checkFormChanged();
             }
         });
+        this.accountForm.statusChanges.subscribe(() => {
+            this.formValid.set(this.accountForm.valid);
+        });
+        this.formValid.set(this.accountForm.valid);
     }
     onScroll() {
         this.headerScrollService.handleScroll(this.embedded());
@@ -53968,22 +54055,6 @@ class SymphiqCreateAccountDashboardComponent {
     isFormValid() {
         return this.accountForm.valid;
     }
-    isButtonEnabled() {
-        if (this.isLoading())
-            return false;
-        if (this.focusAreasEditMode()) {
-            return this.allFocusAreasAnswered() && this.focusAreasChanged();
-        }
-        if (!this.isFormValid())
-            return false;
-        if (!this.accountData()) {
-            return this.allFocusAreasAnswered();
-        }
-        if (this.accountData() && this.editMode()) {
-            return this.formChanged();
-        }
-        return true;
-    }
     handleContinue() {
         if (this.accountForm.get('website')?.value) {
             return;
@@ -54205,7 +54276,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopNameInput = _t.first);
         } }, hostBindings: function SymphiqCreateAccountDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqCreateAccountDashboardComponent_scroll_HostBindingHandler() { return ctx.onScroll(); }, i0.ɵɵresolveWindow);
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 12, vars: 26, consts: [["shopNameInput", ""], [3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls", "embedded", "scrollEvent"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "flex", "flex-col", "items-center", "justify-center", "min-h-[60vh]", "gap-6"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], ["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, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [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"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["formControlName", "website", "tabindex", "-1", "autocomplete", "off", 1, "absolute", "-left-[9999px]", "opacity-0"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 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, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "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-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], accountData: [1, "accountData"], forDemo: [1, "forDemo"], showNextStepAction: [1, "showNextStepAction"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { onCreateAccount: "onCreateAccount", stepClick: "stepClick", nextStepClick: "nextStepClick" }, decls: 12, vars: 26, consts: [["shopNameInput", ""], [3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [3, "title", "subtitle", "viewMode", "showControls", "embedded", "scrollEvent"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "flex", "flex-col", "items-center", "justify-center", "min-h-[60vh]", "gap-6"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [3, "close", "save", "isOpen", "focusAreaDomain", "focusAreaTitle", "selectedTools", "viewMode"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], ["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, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 1, "text-base", "hover:underline", 3, "href", "ngClass"], [1, "mb-6"], [1, "space-y-6", 3, "formGroup"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-red-500"], ["type", "text", "formControlName", "shopName", "placeholder", "Enter your shop name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "mt-1", "text-sm", 3, "ngClass"], [1, "flex", "items-center"], [1, "px-4", "py-3", "rounded-l-lg", "border-2", "border-r-0", "text-sm", "font-medium", 3, "ngClass"], ["type", "text", "formControlName", "shopUrl", "placeholder", "yourshop.com", 1, "flex-1", "px-4", "py-3", "rounded-r-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-4"], [1, "cursor-pointer", 3, "ngClass"], ["type", "radio", "formControlName", "shopPlatform", 1, "sr-only", 3, "value"], [1, "flex", "items-center", "gap-3", "p-4", "rounded-lg", "border-2", "transition-all", "duration-200"], [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"], [1, "font-semibold", 3, "ngClass"], ["type", "text", "formControlName", "companyName", "placeholder", "Enter company name", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass", "readonly"], [1, "mt-2"], [1, "flex", "items-center", "gap-2", "cursor-pointer"], ["type", "checkbox", 1, "w-4", "h-4", "rounded", "border-2", "transition-all", "duration-200", 3, "change", "checked", "ngClass"], [1, "text-sm", 3, "ngClass"], ["formControlName", "website", "tabindex", "-1", "autocomplete", "off", 1, "absolute", "-left-[9999px]", "opacity-0"], ["type", "text", "formControlName", "otherPlatformName", "placeholder", "Enter platform name (e.g., WooCommerce, Magento)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngClass"], [1, "text-base", "font-bold", "mb-3", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-emerald-500"], [1, "space-y-3"], [1, "p-4", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "font-semibold", "text-sm", 3, "ngClass"], [1, "px-2", "py-0.5", "rounded", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-2"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "px-2", "py-0.5", "rounded", "text-xs", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-blue-500"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [1, "p-3", "rounded-lg", "border-l-4", 3, "ngClass"], [1, "w-2", "h-2", "rounded-full", "bg-slate-400"], [1, "grid", "grid-cols-2", "sm:grid-cols-3", "gap-2"], [1, "p-2", "rounded", "text-center", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [3, "statusChange", "toolsClick", "focusAreaDomain", "selectedStatus", "selectedTools", "viewMode", "title", "description"], [1, "my-4", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "mb-3"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-lg", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-3", "shadow-lg", 3, "click", "disabled", "ngClass"], [1, "flex", "items-center", "justify-between", "mb-1.5"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "rounded-full", "transition-all", "duration-500", "ease-out", 3, "ngClass"], ["type", "button", 1, "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "flex", "items-center", "justify-center", "gap-2", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "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-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqCreateAccountDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div");
             i0.ɵɵelement(2, "div", 2);
             i0.ɵɵelementEnd();
@@ -54221,7 +54292,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵelementStart(10, "symphiq-focus-area-tools-modal", 10);
             i0.ɵɵlistener("close", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_close_10_listener() { return ctx.onToolsModalClose(); })("save", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_save_10_listener($event) { return ctx.onToolsModalSave($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(11, SymphiqCreateAccountDashboardComponent_Conditional_11_Template, 7, 13, "div", 11);
+            i0.ɵɵconditionalCreate(11, SymphiqCreateAccountDashboardComponent_Conditional_11_Template, 8, 14, "div", 11);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerWrapperClasses());
@@ -54700,6 +54771,25 @@ class SymphiqCreateAccountDashboardComponent {
         @if ((!accountData() || editMode() || focusAreasEditMode()) && !isCreatingAccount()) {
           <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
             <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              @if (formValid() && !accountData() && !focusAreasEditMode()) {
+                <div class="mb-3">
+                  <div class="flex items-center justify-between mb-1.5">
+                    <span [ngClass]="focusAreaProgressLabelClasses()" class="text-xs font-medium">
+                      Focus Areas
+                    </span>
+                    <span [ngClass]="focusAreaProgressCountClasses()" class="text-xs font-semibold">
+                      {{ focusAreasAnswered() }} / {{ totalFocusAreas() }}
+                    </span>
+                  </div>
+                  <div [ngClass]="focusAreaProgressBarBgClasses()" class="h-2 rounded-full overflow-hidden">
+                    <div
+                      [style.width.%]="focusAreaProgressPercent()"
+                      [ngClass]="focusAreaProgressBarFillClasses()"
+                      class="h-full rounded-full transition-all duration-500 ease-out">
+                    </div>
+                  </div>
+                </div>
+              }
               <div class="flex items-center gap-3">
                 @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
                   <button
@@ -54759,7 +54849,7 @@ class SymphiqCreateAccountDashboardComponent {
             type: HostListener,
             args: ['window:scroll']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 605 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 624 }); })();
 
 const _forTrack0$D = ($index, $item) => $item.property.id;
 function SymphiqConnectGaDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {