@eric-emg/symphiq-components 1.2.167 → 1.2.168

package/fesm2022/symphiq-components.mjs

@@ -25488,9 +25488,9 @@ class JourneyProgressIndicatorComponent {
         // Create abbreviated versions of titles
         const abbreviations = {
             'Welcome to Symphiq': 'Welcome',
-            'Create Account': 'Create',
+            'Create Account': 'Account',
             'Business Analysis': 'Business',
-            'Connect GA4 Data': 'Connect',
+            'Connect GA4 Data': 'GA4 Data',
             'Revenue Calculator': 'Revenue',
             'Funnel Analysis': 'Funnel',
             'Shop Analysis': 'Shop',
@@ -54337,11 +54337,11 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_For_2_
     const property_r4 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.propertyCardClasses(property_r4.id));
-    i0.ɵɵattribute("aria-checked", (ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() : ctx_r1.selectedGaPropertyId()) === property_r4.id);
+    i0.ɵɵattribute("aria-checked", ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() === property_r4.id : ctx_r1.selectedGaPropertyId() ? ctx_r1.selectedGaPropertyId() === property_r4.id : ctx_r1.currentSelectingPropertyId() === property_r4.id);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.radioIndicatorClasses(property_r4.id));
     i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() : ctx_r1.selectedGaPropertyId()) === property_r4.id ? 3 : -1);
+    i0.ɵɵconditional((ctx_r1.isEditingProperty() ? ctx_r1.currentEditingPropertyId() === property_r4.id : ctx_r1.selectedGaPropertyId() ? ctx_r1.selectedGaPropertyId() === property_r4.id : ctx_r1.currentSelectingPropertyId() === property_r4.id) ? 3 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.noteIconClasses());
     i0.ɵɵadvance(2);
@@ -54358,7 +54358,7 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_12_Templa
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.gaProperties());
+    i0.ɵɵrepeater(ctx_r1.sortedGaProperties());
 } }
 function SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 48)(1, "p", 61);
@@ -54398,7 +54398,7 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.textClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.gaProperties() && ctx_r1.gaProperties().length > 0 ? 12 : 13);
+    i0.ɵɵconditional(ctx_r1.sortedGaProperties() && ctx_r1.sortedGaProperties().length > 0 ? 12 : 13);
 } }
 function SymphiqConnectGaDashboardComponent_Conditional_23_Conditional_17_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 58);
@@ -54500,24 +54500,42 @@ function SymphiqConnectGaDashboardComponent_Conditional_23_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.reconnectButtonClasses());
 } }
-function SymphiqConnectGaDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "div", 76)(2, "div", 77)(3, "button", 78);
-    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
-    i0.ɵɵtext(4, " Cancel ");
+    i0.ɵɵelementStart(0, "button", 79);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelEditMode()); });
+    i0.ɵɵtext(1, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 80);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submitPropertyChange()); });
+    i0.ɵɵtext(3, " Submit ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 79);
-    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.submitPropertyChange()); });
-    i0.ɵɵtext(6, " Submit ");
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
-    i0.ɵɵadvance(3);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r1.cancelButtonClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.hasPropertyChanged())("ngClass", ctx_r1.submitButtonClasses());
 } }
+function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 80);
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submitPropertySelection()); });
+    i0.ɵɵtext(1, " Continue ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.hasPropertySelected())("ngClass", ctx_r1.submitButtonClasses());
+} }
+function SymphiqConnectGaDashboardComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 76)(2, "div", 77);
+    i0.ɵɵconditionalCreate(3, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_3_Template, 4, 3)(4, SymphiqConnectGaDashboardComponent_Conditional_24_Conditional_4_Template, 2, 2, "button", 78);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r1.stickyButtonContainerClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.isEditingProperty() ? 3 : 4);
+} }
 class SymphiqConnectGaDashboardComponent {
     constructor() {
         this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
@@ -54544,6 +54562,17 @@ class SymphiqConnectGaDashboardComponent {
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this.isEditingProperty = signal(false, ...(ngDevMode ? [{ debugName: "isEditingProperty" }] : []));
         this.currentEditingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentEditingPropertyId" }] : []));
+        this.currentSelectingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentSelectingPropertyId" }] : []));
+        this.sortedGaProperties = computed(() => {
+            const properties = this.gaProperties();
+            if (!properties)
+                return undefined;
+            return [...properties].sort((a, b) => {
+                const nameA = (a.name || '').toLowerCase();
+                const nameB = (b.name || '').toLowerCase();
+                return nameA.localeCompare(nameB);
+            });
+        }, ...(ngDevMode ? [{ debugName: "sortedGaProperties" }] : []));
         this.isConnectState = computed(() => {
             const properties = this.gaProperties();
             return !properties || properties.length === 0;
@@ -54565,6 +54594,17 @@ class SymphiqConnectGaDashboardComponent {
             const selected = this.selectedGaPropertyId();
             return current !== undefined && current !== selected;
         }, ...(ngDevMode ? [{ debugName: "hasPropertyChanged" }] : []));
+        this.hasPropertySelected = computed(() => {
+            const current = this.currentSelectingPropertyId();
+            return current !== undefined;
+        }, ...(ngDevMode ? [{ debugName: "hasPropertySelected" }] : []));
+        this.showSubmitButton = computed(() => {
+            const isSelecting = this.isSelectionState();
+            const isEditing = this.isEditingProperty();
+            const hasSelection = this.currentSelectingPropertyId() !== undefined;
+            const hasChange = this.hasPropertyChanged();
+            return (isSelecting && !isEditing && hasSelection) || (isEditing && hasChange);
+        }, ...(ngDevMode ? [{ debugName: "showSubmitButton" }] : []));
         this.selectedProperty = computed(() => {
             const selectedId = this.selectedGaPropertyId();
             if (selectedId === undefined)
@@ -54638,12 +54678,12 @@ class SymphiqConnectGaDashboardComponent {
         return this.getAccountById(property.gaAccountId);
     }
     selectProperty(propertyId) {
-        if (!this.isEditingProperty()) {
-            this.onPropertySelect.emit(propertyId);
-        }
-        else {
+        if (this.isEditingProperty()) {
             this.currentEditingPropertyId.set(propertyId);
         }
+        else if (!this.selectedGaPropertyId()) {
+            this.currentSelectingPropertyId.set(propertyId);
+        }
     }
     enableEditMode() {
         this.isEditingProperty.set(true);
@@ -54653,6 +54693,16 @@ class SymphiqConnectGaDashboardComponent {
         this.isEditingProperty.set(false);
         this.currentEditingPropertyId.set(undefined);
     }
+    cancelSelection() {
+        this.currentSelectingPropertyId.set(undefined);
+    }
+    submitPropertySelection() {
+        const selectedId = this.currentSelectingPropertyId();
+        if (selectedId !== undefined) {
+            this.onPropertySelect.emit(selectedId);
+            this.currentSelectingPropertyId.set(undefined);
+        }
+    }
     submitPropertyChange() {
         const newPropertyId = this.currentEditingPropertyId();
         if (newPropertyId !== undefined && this.hasPropertyChanged()) {
@@ -54755,9 +54805,16 @@ class SymphiqConnectGaDashboardComponent {
             : 'text-slate-300';
     }
     propertyCardClasses(propertyId) {
-        const isSelected = this.isEditingProperty()
-            ? this.currentEditingPropertyId() === propertyId
-            : this.selectedGaPropertyId() === propertyId;
+        let isSelected;
+        if (this.isEditingProperty()) {
+            isSelected = this.currentEditingPropertyId() === propertyId;
+        }
+        else if (this.selectedGaPropertyId()) {
+            isSelected = this.selectedGaPropertyId() === propertyId;
+        }
+        else {
+            isSelected = this.currentSelectingPropertyId() === propertyId;
+        }
         const baseClasses = this.isLightMode()
             ? 'border-2 rounded-xl transition-all duration-200 cursor-pointer hover:shadow-md'
             : 'border-2 rounded-xl transition-all duration-200 cursor-pointer hover:shadow-md';
@@ -54770,9 +54827,16 @@ class SymphiqConnectGaDashboardComponent {
         return `${baseClasses} ${isSelected ? selectedClasses : unselectedClasses}`;
     }
     radioIndicatorClasses(propertyId) {
-        const isSelected = this.isEditingProperty()
-            ? this.currentEditingPropertyId() === propertyId
-            : this.selectedGaPropertyId() === propertyId;
+        let isSelected;
+        if (this.isEditingProperty()) {
+            isSelected = this.currentEditingPropertyId() === propertyId;
+        }
+        else if (this.selectedGaPropertyId()) {
+            isSelected = this.selectedGaPropertyId() === propertyId;
+        }
+        else {
+            isSelected = this.currentSelectingPropertyId() === propertyId;
+        }
         const baseClasses = 'transition-all duration-200';
         const selectedClasses = this.isLightMode()
             ? 'border-blue-500 text-blue-500'
@@ -54837,7 +54901,7 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵlistener("scroll", function SymphiqConnectGaDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow);
         } if (rf & 2) {
             i0.ɵɵclassProp("light", ctx.isLightMode())("dark", !ctx.isLightMode());
-        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], showNextStepAction: [1, "showNextStepAction"], gaProperties: [1, "gaProperties"], gaAccounts: [1, "gaAccounts"], selectedGaPropertyId: [1, "selectedGaPropertyId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick", onPropertySelect: "onPropertySelect", onPropertyChange: "onPropertyChange", onReconnectGoogle: "onReconnectGoogle" }, decls: 25, vars: 40, consts: [[3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"], ["role", "radiogroup", "aria-label", "Google Analytics Properties", 1, "space-y-3"], [1, "text-center", "py-8"], ["tabindex", "0", "role", "radio", 1, "block", 3, "ngClass"], ["tabindex", "0", "role", "radio", 1, "block", 3, "click", "keydown.enter", "keydown.space", "ngClass"], [1, "flex", "items-center", "gap-4", "p-4"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2", "mb-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "truncate", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"], [1, "text-base", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "rounded-xl", "border-2", "p-6", "mb-6", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "flex", "items-start", "gap-3", "mb-4"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "border", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", 3, "ngClass"], [1, "text-lg", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "flex-1", "sm:flex-none", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "disabled", "ngClass"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], parentHeaderOffset: [1, "parentHeaderOffset"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], showNextStepAction: [1, "showNextStepAction"], gaProperties: [1, "gaProperties"], gaAccounts: [1, "gaAccounts"], selectedGaPropertyId: [1, "selectedGaPropertyId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", googleButtonClick: "googleButtonClick", onPropertySelect: "onPropertySelect", onPropertyChange: "onPropertyChange", onReconnectGoogle: "onReconnectGoogle" }, decls: 25, vars: 40, consts: [[3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "pb-32"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", "mb-8", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-sm", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-4", 3, "ngClass"], [1, "text-base", "leading-relaxed", "mb-6", 3, "ngClass"], [1, "mb-6"], ["type", "button", 1, "gsi-material-button", 3, "click"], [1, "gsi-material-button-state"], [1, "gsi-material-button-content-wrapper"], [1, "gsi-material-button-icon"], ["version", "1.1", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 48 48", 0, "xmlns", "xlink", "http://www.w3.org/1999/xlink", 2, "display", "block"], ["fill", "#EA4335", "d", "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"], ["fill", "#4285F4", "d", "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"], ["fill", "#FBBC05", "d", "M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"], ["fill", "#34A853", "d", "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"], ["fill", "none", "d", "M0 0h48v48H0z"], [1, "gsi-material-button-contents"], [1, "p-4", "rounded-lg", "border", "flex", "items-start", "gap-3", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-sm", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "mt-6", "rounded-lg", "border", "overflow-hidden", 3, "ngClass"], [1, "px-4", "py-4", "cursor-pointer", "flex", "items-center", "justify-between", "gap-3", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "text-base", "font-semibold", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-300", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "px-4", "pb-4", "pt-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "font-bold"], ["role", "radiogroup", "aria-label", "Google Analytics Properties", 1, "space-y-3"], [1, "text-center", "py-8"], ["tabindex", "0", "role", "radio", 1, "block", 3, "ngClass"], ["tabindex", "0", "role", "radio", 1, "block", 3, "click", "keydown.enter", "keydown.space", "ngClass"], [1, "flex", "items-center", "gap-4", "p-4"], [1, "w-5", "h-5", "rounded-full", "border-2", "flex", "items-center", "justify-center", "flex-shrink-0", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", "bg-current"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "gap-2", "mb-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", 3, "ngClass"], [1, "truncate", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mt-1"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"], [1, "text-base", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-2", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "rounded-xl", "border-2", "p-6", "mb-6", 3, "ngClass"], ["type", "button", 1, "px-4", "py-2", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "flex", "items-center", "gap-2", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"], [1, "flex", "items-start", "gap-3", "mb-4"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "border", 3, "ngClass"], [1, "flex", "items-center", "gap-3", "mb-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "flex-shrink-0", 3, "ngClass"], [1, "text-lg", 3, "ngClass"], [1, "max-w-3xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "disabled", "ngClass"], ["type", "button", 1, "flex-1", "sm:flex-none", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "ngClass"], ["type", "button", 1, "flex-1", "px-6", "py-4", "rounded-xl", "font-bold", "text-base", "transition-all", "duration-200", "hover:scale-105", "cursor-pointer", 3, "click", "disabled", "ngClass"]], template: function SymphiqConnectGaDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "header", 3)(4, "div", 4)(5, "div", 5)(6, "div", 6)(7, "div")(8, "h1", 0);
@@ -54857,7 +54921,7 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵconditionalCreate(22, SymphiqConnectGaDashboardComponent_Conditional_22_Template, 14, 7, "div", 12);
             i0.ɵɵconditionalCreate(23, SymphiqConnectGaDashboardComponent_Conditional_23_Template, 22, 8, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(24, SymphiqConnectGaDashboardComponent_Conditional_24_Template, 7, 4, "div", 13);
+            i0.ɵɵconditionalCreate(24, SymphiqConnectGaDashboardComponent_Conditional_24_Template, 5, 2, "div", 13);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -54888,7 +54952,7 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSelectedState() ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isEditingProperty() ? 24 : -1);
+            i0.ɵɵconditional(ctx.showSubmitButton() ? 24 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, JourneyProgressIndicatorComponent], styles: ["[_nghost-%COMP%]{display:block}.animated-bubbles[_ngcontent-%COMP%]{overflow:hidden}.animated-bubbles[_ngcontent-%COMP%]:before, .animated-bubbles[_ngcontent-%COMP%]:after{content:\"\";position:absolute;border-radius:50%;animation:_ngcontent-%COMP%_float 20s infinite ease-in-out;opacity:.05}.animated-bubbles[_ngcontent-%COMP%]:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles[_ngcontent-%COMP%]:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode[_ngcontent-%COMP%]:before, .animated-bubbles.light-mode[_ngcontent-%COMP%]:after{opacity:.03}@keyframes _ngcontent-%COMP%_float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-icon[_ngcontent-%COMP%]{height:20px;margin-right:12px;min-width:20px;width:20px}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-content-wrapper[_ngcontent-%COMP%]{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-contents[_ngcontent-%COMP%]{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-state[_ngcontent-%COMP%]{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-contents[_ngcontent-%COMP%]{opacity:38%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-icon[_ngcontent-%COMP%]{opacity:38%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):active   .gsi-material-button-state[_ngcontent-%COMP%], .light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):focus   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#303030;opacity:12%}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.light[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#303030;opacity:8%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-appearance:none;background-color:#131314;background-image:none;border:1px solid #747775;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#e3e3e3;cursor:pointer;font-family:Roboto,arial,sans-serif;font-size:14px;height:40px;letter-spacing:.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;-webkit-transition:background-color .218s,border-color .218s,box-shadow .218s;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content;border-color:#8e918f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-icon[_ngcontent-%COMP%]{height:20px;margin-right:12px;min-width:20px;width:20px}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-content-wrapper[_ngcontent-%COMP%]{-webkit-align-items:center;align-items:center;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-contents[_ngcontent-%COMP%]{-webkit-flex-grow:1;flex-grow:1;font-family:Roboto,arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]   .gsi-material-button-state[_ngcontent-%COMP%]{-webkit-transition:opacity .218s;transition:opacity .218s;inset:0;opacity:0;position:absolute}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled{cursor:default;background-color:#13131461;border-color:#8e918f1f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#e3e3e31f}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-contents[_ngcontent-%COMP%]{opacity:38%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:disabled   .gsi-material-button-icon[_ngcontent-%COMP%]{opacity:38%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):active   .gsi-material-button-state[_ngcontent-%COMP%], .dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):focus   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#fff;opacity:12%}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover{-webkit-box-shadow:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);box-shadow:0 1px 2px #3c40434d,0 1px 3px 1px #3c404326}.dark[_nghost-%COMP%]   .gsi-material-button[_ngcontent-%COMP%]:not(:disabled):hover   .gsi-material-button-state[_ngcontent-%COMP%]{background-color:#fff;opacity:8%}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqConnectGaDashboardComponent, [{
@@ -55061,9 +55125,9 @@ class SymphiqConnectGaDashboardComponent {
                         Please choose the Google Analytics property you'd like to link to your shop.
                       </p>
 
-                      @if (gaProperties() && gaProperties()!.length > 0) {
+                      @if (sortedGaProperties() && sortedGaProperties()!.length > 0) {
                         <div class="space-y-3" role="radiogroup" aria-label="Google Analytics Properties">
-                          @for (property of gaProperties(); track property.id) {
+                          @for (property of sortedGaProperties(); track property.id) {
                             <label
                               [ngClass]="propertyCardClasses(property.id!)"
                               class="block"
@@ -55072,10 +55136,10 @@ class SymphiqConnectGaDashboardComponent {
                               (keydown.space)="selectProperty(property.id!); $event.preventDefault()"
                               tabindex="0"
                               role="radio"
-                              [attr.aria-checked]="(isEditingProperty() ? currentEditingPropertyId() : selectedGaPropertyId()) === property.id">
+                              [attr.aria-checked]="isEditingProperty() ? (currentEditingPropertyId() === property.id) : (selectedGaPropertyId() ? (selectedGaPropertyId() === property.id) : (currentSelectingPropertyId() === property.id))">
                               <div class="flex items-center gap-4 p-4">
                                 <div [ngClass]="radioIndicatorClasses(property.id!)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
-                                  @if ((isEditingProperty() ? currentEditingPropertyId() : selectedGaPropertyId()) === property.id) {
+                                  @if (isEditingProperty() ? (currentEditingPropertyId() === property.id) : (selectedGaPropertyId() ? (selectedGaPropertyId() === property.id) : (currentSelectingPropertyId() === property.id))) {
                                     <div class="w-3 h-3 rounded-full bg-current"></div>
                                   }
                                 </div>
@@ -55201,26 +55265,37 @@ class SymphiqConnectGaDashboardComponent {
             }
           </div>
 
-          <!-- Sticky Bottom Action Bar (Edit Mode) -->
-          @if (isEditingProperty()) {
+          <!-- Sticky Bottom Action Bar (Selection or Edit Mode) -->
+          @if (showSubmitButton()) {
             <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
               <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                 <div class="flex items-center gap-3">
-                  <button
-                    type="button"
-                    (click)="cancelEditMode()"
-                    [ngClass]="cancelButtonClasses()"
-                    class="flex-1 sm:flex-none px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
-                    Cancel
-                  </button>
-                  <button
-                    type="button"
-                    (click)="submitPropertyChange()"
-                    [disabled]="!hasPropertyChanged()"
-                    [ngClass]="submitButtonClasses()"
-                    class="flex-1 px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
-                    Submit
-                  </button>
+                  @if (isEditingProperty()) {
+                    <button
+                      type="button"
+                      (click)="cancelEditMode()"
+                      [ngClass]="cancelButtonClasses()"
+                      class="flex-1 sm:flex-none px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      (click)="submitPropertyChange()"
+                      [disabled]="!hasPropertyChanged()"
+                      [ngClass]="submitButtonClasses()"
+                      class="flex-1 px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
+                      Submit
+                    </button>
+                  } @else {
+                    <button
+                      type="button"
+                      (click)="submitPropertySelection()"
+                      [disabled]="!hasPropertySelected()"
+                      [ngClass]="submitButtonClasses()"
+                      class="flex-1 px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 hover:scale-105 cursor-pointer">
+                      Continue
+                    </button>
+                  }
                 </div>
               </div>
             </div>
@@ -55233,7 +55308,7 @@ class SymphiqConnectGaDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 631 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqConnectGaDashboardComponent, { className: "SymphiqConnectGaDashboardComponent", filePath: "lib/components/connect-ga-dashboard/symphiq-connect-ga-dashboard.component.ts", lineNumber: 642 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);