@eric-emg/symphiq-components 1.2.153 → 1.2.155

package/fesm2022/symphiq-components.mjs

@@ -51515,8 +51515,8 @@ class SymphiqWelcomeDashboardComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqWelcomeDashboardComponent, { className: "SymphiqWelcomeDashboardComponent", filePath: "lib/components/welcome-dashboard/symphiq-welcome-dashboard.component.ts", lineNumber: 201 }); })();
 
-function FocusAreaQuestionComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 6);
+function FocusAreaQuestionComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1, " Not answered yet ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51533,7 +51533,7 @@ function FocusAreaQuestionComponent_Conditional_34_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(0, "div", 12);
 } }
 function FocusAreaQuestionComponent_Conditional_47_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵelementStart(0, "span", 26);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51544,8 +51544,8 @@ function FocusAreaQuestionComponent_Conditional_47_For_2_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", tool_r2, " ");
 } }
 function FocusAreaQuestionComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵrepeaterCreate(1, FocusAreaQuestionComponent_Conditional_47_For_2_Template, 2, 2, "span", 25, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵrepeaterCreate(1, FocusAreaQuestionComponent_Conditional_47_For_2_Template, 2, 2, "span", 26, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -51553,7 +51553,7 @@ function FocusAreaQuestionComponent_Conditional_47_Template(rf, ctx) { if (rf &
     i0.ɵɵrepeater(ctx_r0.selectedTools());
 } }
 function FocusAreaQuestionComponent_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 22);
+    i0.ɵɵelementStart(0, "span", 23);
     i0.ɵɵtext(1, " None specified - Click to select ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -51568,7 +51568,17 @@ class FocusAreaQuestionComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
         this.description = input.required(...(ngDevMode ? [{ debugName: "description" }] : []));
-        this.isAnswered = computed(() => this.selectedStatus() !== null, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
+        this.isAnswered = computed(() => {
+            const status = this.selectedStatus();
+            if (status === null)
+                return false;
+            if (status === FocusAreaDetailStatusEnum.ENGAGED) {
+                return this.selectedTools() !== null && this.selectedTools().length > 0;
+            }
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "isAnswered" }] : []));
+        this.isToolsRequired = computed(() => this.selectedStatus() === FocusAreaDetailStatusEnum.ENGAGED &&
+            (!this.selectedTools() || this.selectedTools().length === 0), ...(ngDevMode ? [{ debugName: "isToolsRequired" }] : []));
         this.statusChange = output();
         this.toolsClick = output();
         this.FocusAreaDetailStatusEnum = FocusAreaDetailStatusEnum;
@@ -51578,6 +51588,9 @@ class FocusAreaQuestionComponent {
     }
     onStatusChange(status) {
         this.statusChange.emit(status);
+        if (status === FocusAreaDetailStatusEnum.ENGAGED && (!this.selectedTools() || this.selectedTools().length === 0)) {
+            setTimeout(() => this.toolsClick.emit(), 100);
+        }
     }
     onToolsClick() {
         this.toolsClick.emit();
@@ -51667,6 +51680,11 @@ class FocusAreaQuestionComponent {
             : 'text-slate-300';
     }
     toolsButtonClasses() {
+        if (this.isToolsRequired()) {
+            return this.isLightMode()
+                ? 'bg-red-50 border-red-300 hover:border-red-400 hover:bg-red-100 text-slate-900'
+                : 'bg-red-900/20 border-red-700 hover:border-red-600 hover:bg-red-900/30 text-white';
+        }
         return this.isLightMode()
             ? 'bg-white border-slate-300 hover:border-blue-400 hover:bg-blue-50 text-slate-900'
             : 'bg-slate-700 border-slate-600 hover:border-blue-400 hover:bg-slate-600 text-white';
@@ -51687,25 +51705,25 @@ class FocusAreaQuestionComponent {
             : 'text-slate-500';
     }
     static { this.ɵfac = function FocusAreaQuestionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FocusAreaQuestionComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FocusAreaQuestionComponent, selectors: [["symphiq-focus-area-question"]], inputs: { focusAreaDomain: [1, "focusAreaDomain"], selectedStatus: [1, "selectedStatus"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"], title: [1, "title"], description: [1, "description"] }, outputs: { statusChange: "statusChange", toolsClick: "toolsClick" }, decls: 51, vars: 31, consts: [[1, "rounded-xl", "border-2", "overflow-hidden", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "text-lg", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "ml-3", "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", "flex-shrink-0", 3, "ngClass"], [1, "space-y-3", "mt-5"], [1, "cursor-pointer", "block", 3, "ngClass"], ["type", "radio", 1, "sr-only", 3, "change", "checked"], [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, "font-semibold", "text-sm", 3, "ngClass"], [1, "text-xs", "mt-0.5", 3, "ngClass"], [1, "grid", "transition-all", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "mt-4"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["type", "button", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "hover:scale-[1.01]", "flex", "items-center", "justify-between", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "text-sm", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "ml-2", 3, "ngClass"], ["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, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass"]], template: function FocusAreaQuestionComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FocusAreaQuestionComponent, selectors: [["symphiq-focus-area-question"]], inputs: { focusAreaDomain: [1, "focusAreaDomain"], selectedStatus: [1, "selectedStatus"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"], title: [1, "title"], description: [1, "description"] }, outputs: { statusChange: "statusChange", toolsClick: "toolsClick" }, decls: 51, vars: 31, consts: [[1, "rounded-xl", "border-2", "overflow-hidden", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "mb-4"], [1, "flex", "items-start", "justify-between", "mb-2"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "ml-3", "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "space-y-3", "mt-5"], [1, "cursor-pointer", "block", 3, "ngClass"], ["type", "radio", 1, "sr-only", 3, "change", "checked"], [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", "text-sm", 3, "ngClass"], [1, "text-xs", "mt-0.5", 3, "ngClass"], [1, "grid", "transition-all", "duration-300", "ease-in-out"], [1, "overflow-hidden", "px-1"], [1, "mt-4"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["type", "button", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "hover:scale-[1.01]", "flex", "items-center", "justify-between", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-2", "flex-1", "min-w-0"], [1, "flex", "flex-wrap", "gap-1.5"], [1, "text-sm", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", "ml-2", 3, "ngClass"], ["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, "px-2", "py-1", "rounded", "text-xs", "font-medium", 3, "ngClass"]], template: function FocusAreaQuestionComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "h3", 4);
             i0.ɵɵtext(5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "p", 5);
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(8, FocusAreaQuestionComponent_Conditional_8_Template, 2, 1, "span", 6);
+            i0.ɵɵconditionalCreate(6, FocusAreaQuestionComponent_Conditional_6_Template, 2, 1, "span", 5);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "p", 6);
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(9, "div", 7)(10, "label", 8)(11, "input", 9);
             i0.ɵɵlistener("change", function FocusAreaQuestionComponent_Template_input_change_11_listener() { return ctx.onStatusChange(ctx.FocusAreaDetailStatusEnum.ENGAGED); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "div", 10)(13, "div", 11);
             i0.ɵɵconditionalCreate(14, FocusAreaQuestionComponent_Conditional_14_Template, 1, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 3)(16, "div", 13);
+            i0.ɵɵelementStart(15, "div", 13)(16, "div", 14);
             i0.ɵɵtext(17, " Engaged ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 14);
+            i0.ɵɵelementStart(18, "div", 15);
             i0.ɵɵtext(19, " We are currently engaged in this area ");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(20, "label", 8)(21, "input", 9);
@@ -51714,10 +51732,10 @@ class FocusAreaQuestionComponent {
             i0.ɵɵelementStart(22, "div", 10)(23, "div", 11);
             i0.ɵɵconditionalCreate(24, FocusAreaQuestionComponent_Conditional_24_Template, 1, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "div", 3)(26, "div", 13);
+            i0.ɵɵelementStart(25, "div", 13)(26, "div", 14);
             i0.ɵɵtext(27, " Interested ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "div", 14);
+            i0.ɵɵelementStart(28, "div", 15);
             i0.ɵɵtext(29, " We are interested in this area but not engaged with it yet ");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(30, "label", 8)(31, "input", 9);
@@ -51726,23 +51744,23 @@ class FocusAreaQuestionComponent {
             i0.ɵɵelementStart(32, "div", 10)(33, "div", 11);
             i0.ɵɵconditionalCreate(34, FocusAreaQuestionComponent_Conditional_34_Template, 1, 0, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "div", 3)(36, "div", 13);
+            i0.ɵɵelementStart(35, "div", 13)(36, "div", 14);
             i0.ɵɵtext(37, " Not interested ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 14);
+            i0.ɵɵelementStart(38, "div", 15);
             i0.ɵɵtext(39, " We have no interest in this area ");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(40, "div", 15)(41, "div", 16)(42, "div", 17)(43, "label", 18);
+            i0.ɵɵelementStart(40, "div", 16)(41, "div", 17)(42, "div", 18)(43, "label", 19);
             i0.ɵɵtext(44, " Marketing automation tools used ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "button", 19);
+            i0.ɵɵelementStart(45, "button", 20);
             i0.ɵɵlistener("click", function FocusAreaQuestionComponent_Template_button_click_45_listener() { return ctx.onToolsClick(); });
-            i0.ɵɵelementStart(46, "div", 20);
-            i0.ɵɵconditionalCreate(47, FocusAreaQuestionComponent_Conditional_47_Template, 3, 0, "div", 21)(48, FocusAreaQuestionComponent_Conditional_48_Template, 2, 1, "span", 22);
+            i0.ɵɵelementStart(46, "div", 21);
+            i0.ɵɵconditionalCreate(47, FocusAreaQuestionComponent_Conditional_47_Template, 3, 0, "div", 22)(48, FocusAreaQuestionComponent_Conditional_48_Template, 2, 1, "span", 23);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(49, "svg", 23);
-            i0.ɵɵelement(50, "path", 24);
+            i0.ɵɵelementStart(49, "svg", 24);
+            i0.ɵɵelement(50, "path", 25);
             i0.ɵɵelementEnd()()()()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
@@ -51753,11 +51771,11 @@ class FocusAreaQuestionComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
             i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isAnswered() ? 6 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.descriptionClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.description(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isAnswered() ? 8 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.radioOptionClasses(ctx.FocusAreaDetailStatusEnum.ENGAGED));
             i0.ɵɵadvance();
@@ -51811,20 +51829,20 @@ class FocusAreaQuestionComponent {
         args: [{ selector: 'symphiq-focus-area-question', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div [ngClass]="containerClasses()" class="rounded-xl border-2 overflow-hidden">
       <div [ngClass]="contentClasses()" class="p-6">
-        <div class="flex items-start justify-between mb-4">
-          <div class="flex-1">
-            <h3 [ngClass]="titleClasses()" class="text-lg font-bold mb-2">
+        <div class="mb-4">
+          <div class="flex items-start justify-between mb-2">
+            <h3 [ngClass]="titleClasses()" class="text-lg font-bold">
               {{ title() }}
             </h3>
-            <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
-              {{ description() }}
-            </p>
+            @if (!isAnswered()) {
+              <span [ngClass]="notAnsweredBadgeClasses()" class="ml-3 px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap flex-shrink-0">
+                Not answered yet
+              </span>
+            }
           </div>
-          @if (!isAnswered()) {
-            <span [ngClass]="notAnsweredBadgeClasses()" class="ml-3 px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap flex-shrink-0">
-              Not answered yet
-            </span>
-          }
+          <p [ngClass]="descriptionClasses()" class="text-sm leading-relaxed">
+            {{ description() }}
+          </p>
         </div>
 
         <div class="space-y-3 mt-5">
@@ -51911,7 +51929,7 @@ class FocusAreaQuestionComponent {
         <div
           class="grid transition-all duration-300 ease-in-out"
           [style.grid-template-rows]="selectedStatus() === FocusAreaDetailStatusEnum.ENGAGED ? '1fr' : '0fr'">
-          <div class="overflow-hidden">
+          <div class="overflow-hidden px-1">
             <div class="mt-4">
               <label [ngClass]="toolsLabelClasses()" class="block text-sm font-semibold mb-2">
                 Marketing automation tools used
@@ -51951,10 +51969,10 @@ class FocusAreaQuestionComponent {
 
 function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 17)(1, "input", 18);
+    i0.ɵɵelementStart(0, "label", 18)(1, "input", 19);
     i0.ɵɵlistener("change", function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template_input_change_1_listener($event) { const tool_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onToolToggle(tool_r4, $event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵelementStart(2, "span", 20);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -51968,11 +51986,11 @@ function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Templat
     i0.ɵɵtextInterpolate1(" ", tool_r4, " ");
 } }
 function FocusAreaToolsModalComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "label", 15);
+    i0.ɵɵelementStart(0, "div", 10)(1, "label", 16);
     i0.ɵɵtext(2, " Select tools from the list: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 16);
-    i0.ɵɵrepeaterCreate(4, FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template, 4, 4, "label", 17, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 17);
+    i0.ɵɵrepeaterCreate(4, FocusAreaToolsModalComponent_Conditional_0_Conditional_10_For_5_Template, 4, 4, "label", 18, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52010,7 +52028,7 @@ function FocusAreaToolsModalComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
     i0.ɵɵtext(17, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 14);
+    i0.ɵɵelementStart(18, "button", 15);
     i0.ɵɵlistener("click", function FocusAreaToolsModalComponent_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
     i0.ɵɵtext(19, " Save ");
     i0.ɵɵelementEnd()()()();
@@ -52040,7 +52058,8 @@ function FocusAreaToolsModalComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.saveButtonClasses());
+    i0.ɵɵclassProp("cursor-pointer", ctx_r1.hasAnyToolSelected())("cursor-not-allowed", !ctx_r1.hasAnyToolSelected())("opacity-50", !ctx_r1.hasAnyToolSelected())("hover:scale-105", ctx_r1.hasAnyToolSelected());
+    i0.ɵɵproperty("disabled", !ctx_r1.hasAnyToolSelected())("ngClass", ctx_r1.saveButtonClasses());
 } }
 class FocusAreaToolsModalComponent {
     constructor() {
@@ -52054,6 +52073,11 @@ class FocusAreaToolsModalComponent {
         this.selectedPredefinedTools = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedPredefinedTools" }] : []));
         this.otherToolsText = signal('', ...(ngDevMode ? [{ debugName: "otherToolsText" }] : []));
         this.predefinedTools = signal([], ...(ngDevMode ? [{ debugName: "predefinedTools" }] : []));
+        this.hasAnyToolSelected = computed(() => {
+            const predefinedCount = this.selectedPredefinedTools().size;
+            const otherText = this.otherToolsText().trim();
+            return predefinedCount > 0 || otherText.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasAnyToolSelected" }] : []));
         effect(() => {
             const domain = this.focusAreaDomain();
             const tools = FocusAreaDomainEnumUtil.topTools(domain);
@@ -52177,8 +52201,8 @@ class FocusAreaToolsModalComponent {
     static { this.ɵfac = function FocusAreaToolsModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FocusAreaToolsModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FocusAreaToolsModalComponent, selectors: [["symphiq-focus-area-tools-modal"]], hostBindings: function FocusAreaToolsModalComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function FocusAreaToolsModalComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { isOpen: [1, "isOpen"], focusAreaDomain: [1, "focusAreaDomain"], focusAreaTitle: [1, "focusAreaTitle"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"] }, outputs: { close: "close", save: "save" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4"], [1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4", 3, "click"], [1, "absolute", "inset-0", "backdrop-blur-sm", "animate-fade-in", "z-[10002]", 3, "ngClass"], [1, "relative", "w-full", "max-w-2xl", "rounded-2xl", "shadow-2xl", "animate-scale-in", "z-[10003]", "max-h-[90vh]", "flex", "flex-col", 3, "click", "ngClass"], [1, "px-6", "py-4", "border-b", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], ["type", "button", 1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "transition-colors", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "flex-1", "overflow-y-auto", "p-6"], [1, "mb-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["rows", "4", "placeholder", "Enter other tools (e.g., Custom Tool, Another Tool)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngModelChange", "ngModel", "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "items-center", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-6", "py-2.5", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [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"]], template: function FocusAreaToolsModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, FocusAreaToolsModalComponent_Conditional_0_Template, 20, 13, "div", 0);
+        } }, inputs: { isOpen: [1, "isOpen"], focusAreaDomain: [1, "focusAreaDomain"], focusAreaTitle: [1, "focusAreaTitle"], selectedTools: [1, "selectedTools"], viewMode: [1, "viewMode"] }, outputs: { close: "close", save: "save" }, decls: 1, vars: 1, consts: [[1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4"], [1, "fixed", "inset-0", "z-[10002]", "flex", "items-center", "justify-center", "px-4", 3, "click"], [1, "absolute", "inset-0", "backdrop-blur-sm", "animate-fade-in", "z-[10002]", 3, "ngClass"], [1, "relative", "w-full", "max-w-2xl", "rounded-2xl", "shadow-2xl", "animate-scale-in", "z-[10003]", "max-h-[90vh]", "flex", "flex-col", 3, "click", "ngClass"], [1, "px-6", "py-4", "border-b", "flex", "items-center", "justify-between", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], ["type", "button", 1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "transition-colors", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "flex-1", "overflow-y-auto", "p-6"], [1, "mb-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], ["rows", "4", "placeholder", "Enter other tools (e.g., Custom Tool, Another Tool)", 1, "w-full", "px-4", "py-3", "rounded-lg", "border-2", "transition-all", "duration-200", "focus:outline-none", "focus:ring-2", 3, "ngModelChange", "ngModel", "ngClass"], [1, "px-6", "py-4", "border-t", "flex", "items-center", "justify-end", "gap-3", 3, "ngClass"], ["type", "button", 1, "px-6", "py-2.5", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "cursor-pointer", "hover:scale-105", 3, "click", "ngClass"], ["type", "button", 1, "px-6", "py-2.5", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", 3, "click", "disabled", "ngClass"], [1, "block", "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "sm:grid-cols-2", "gap-3"], [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"]], template: function FocusAreaToolsModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, FocusAreaToolsModalComponent_Conditional_0_Template, 20, 22, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel], styles: ["@keyframes _ngcontent-%COMP%_fade-in{0%{opacity:0}to{opacity:1}}@keyframes _ngcontent-%COMP%_scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-fade-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_fade-in .2s ease-out}.animate-scale-in[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_scale-in .2s ease-out}"], changeDetection: 0 }); }
@@ -52268,8 +52292,13 @@ class FocusAreaToolsModalComponent {
             <button
               type="button"
               (click)="onSave()"
+              [disabled]="!hasAnyToolSelected()"
               [ngClass]="saveButtonClasses()"
-              class="px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200 cursor-pointer hover:scale-105">
+              class="px-6 py-2.5 rounded-lg font-semibold text-sm transition-all duration-200"
+              [class.cursor-pointer]="hasAnyToolSelected()"
+              [class.cursor-not-allowed]="!hasAnyToolSelected()"
+              [class.opacity-50]="!hasAnyToolSelected()"
+              [class.hover:scale-105]="hasAnyToolSelected()">
               Save
             </button>
           </div>
@@ -52281,7 +52310,7 @@ class FocusAreaToolsModalComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 143 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FocusAreaToolsModalComponent, { className: "FocusAreaToolsModalComponent", filePath: "lib/components/create-account-dashboard/focus-area-tools-modal.component.ts", lineNumber: 149 }); })();
 
 const _c0$q = ["shopNameInput"];
 const _forTrack0$i = ($index, $item) => $item.focusAreaDomain;
@@ -52767,60 +52796,50 @@ function SymphiqCreateAccountDashboardComponent_Conditional_26_Template(rf, ctx)
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.allFocusAreaDomains());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.validationMessageClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate3(" Please answer all ", ctx_r1.totalFocusAreas(), " focus area questions before creating your account. ", ctx_r1.focusAreasAnswered(), " of ", ctx_r1.totalFocusAreas(), " completed. ");
-} }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.cancelFocusAreasEditMode() : ctx_r1.cancelEditMode()); });
+    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.cancelFocusAreasEditMode() : ctx_r1.cancelEditMode()); });
     i0.ɵɵtext(1, " Cancel ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Saving Focus Areas... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Updating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Creating Account... ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 79);
-    i0.ɵɵelement(1, "circle", 80)(2, "path", 81);
+    i0.ɵɵelementStart(0, "svg", 78);
+    i0.ɵɵelement(1, "circle", 79)(2, "path", 80);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_5_Template, 1, 0);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_3_Template, 1, 0)(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_4_Template, 1, 0)(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Conditional_5_Template, 1, 0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.focusAreasEditMode() ? 3 : ctx_r1.accountData() && ctx_r1.editMode() ? 4 : 5);
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Focus Areas ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Save Changes ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Create Account ");
 } }
-function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Conditional_2_Template, 1, 0);
+function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_0_Template, 1, 0)(1, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_1_Template, 1, 0)(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Conditional_2_Template, 1, 0);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(3, "svg", 82);
-    i0.ɵɵelement(4, "path", 83);
+    i0.ɵɵelementStart(3, "svg", 81);
+    i0.ɵɵelement(4, "path", 82);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -52828,26 +52847,22 @@ function SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Tem
 } }
 function SymphiqCreateAccountDashboardComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 73);
-    i0.ɵɵconditionalCreate(2, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_2_Template, 2, 4, "div", 74);
-    i0.ɵɵelementStart(3, "div", 75);
-    i0.ɵɵconditionalCreate(4, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_4_Template, 2, 1, "button", 76);
-    i0.ɵɵelementStart(5, "button", 77);
-    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.handleSaveFocusAreas() : ctx_r1.handleContinue()); });
-    i0.ɵɵconditionalCreate(6, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template, 6, 1)(7, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_7_Template, 5, 1);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 73)(2, "div", 74);
+    i0.ɵɵconditionalCreate(3, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_3_Template, 2, 1, "button", 75);
+    i0.ɵɵelementStart(4, "button", 76);
+    i0.ɵɵlistener("click", function SymphiqCreateAccountDashboardComponent_Conditional_28_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.focusAreasEditMode() ? ctx_r1.handleSaveFocusAreas() : ctx_r1.handleContinue()); });
+    i0.ɵɵconditionalCreate(5, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_5_Template, 6, 1)(6, SymphiqCreateAccountDashboardComponent_Conditional_28_Conditional_6_Template, 5, 1);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(!ctx_r1.allFocusAreasAnswered() && !ctx_r1.accountData() ? 2 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() || ctx_r1.accountData() && ctx_r1.focusAreasEditMode() ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.accountData() && ctx_r1.editMode() || ctx_r1.accountData() && ctx_r1.focusAreasEditMode() ? 3 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("cursor-pointer", ctx_r1.isButtonEnabled())("cursor-not-allowed", !ctx_r1.isButtonEnabled())("opacity-50", !ctx_r1.isButtonEnabled())("hover:scale-105", ctx_r1.isButtonEnabled());
     i0.ɵɵproperty("disabled", !ctx_r1.isButtonEnabled())("ngClass", ctx_r1.continueButtonClasses());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading() ? 6 : 7);
+    i0.ɵɵconditional(ctx_r1.isLoading() ? 5 : 6);
 } }
 var ShopPlatformEnum;
 (function (ShopPlatformEnum) {
@@ -53425,7 +53440,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($event) { return ctx.onScroll($event); }, 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: 29, vars: 51, 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]"], [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, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [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"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "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, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], [1, "text-base", 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"], ["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", "p-3", "rounded-lg", "text-sm", 3, "ngClass"], [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: 29, vars: 51, 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]"], [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, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [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"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "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, "space-y-4"], [1, "block", "text-sm", "font-medium", "mb-1", 3, "ngClass"], [1, "text-base", 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"], ["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) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div");
             i0.ɵɵelement(2, "div", 2);
             i0.ɵɵelementEnd();
@@ -53451,7 +53466,7 @@ class SymphiqCreateAccountDashboardComponent {
             i0.ɵɵelementStart(27, "symphiq-focus-area-tools-modal", 16);
             i0.ɵɵlistener("close", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_close_27_listener() { return ctx.onToolsModalClose(); })("save", function SymphiqCreateAccountDashboardComponent_Template_symphiq_focus_area_tools_modal_save_27_listener($event) { return ctx.onToolsModalSave($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(28, SymphiqCreateAccountDashboardComponent_Conditional_28_Template, 8, 14, "div", 17);
+            i0.ɵɵconditionalCreate(28, SymphiqCreateAccountDashboardComponent_Conditional_28_Template, 7, 13, "div", 17);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -53969,12 +53984,6 @@ class SymphiqCreateAccountDashboardComponent {
         @if (!accountData() || editMode() || focusAreasEditMode()) {
           <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 (!allFocusAreasAnswered() && !accountData()) {
-                <div [ngClass]="validationMessageClasses()" class="mb-3 p-3 rounded-lg text-sm">
-                  Please answer all {{ totalFocusAreas() }} focus area questions before creating your account.
-                  {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} completed.
-                </div>
-              }
               <div class="flex items-center gap-3">
                 @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
                   <button
@@ -54034,7 +54043,7 @@ class SymphiqCreateAccountDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 629 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqCreateAccountDashboardComponent, { className: "SymphiqCreateAccountDashboardComponent", filePath: "lib/components/create-account-dashboard/symphiq-create-account-dashboard.component.ts", lineNumber: 623 }); })();
 
 class SymphiqConnectGaDashboardComponent {
     constructor() {