@eric-emg/symphiq-components 1.2.308 → 1.2.309

package/fesm2022/symphiq-components.mjs

@@ -53821,7 +53821,7 @@ function SymphiqConnectGaDashboardComponent_Conditional_22_Template(rf, ctx) { i
     i0.ɵɵconditionalCreate(13, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_13_Template, 1, 0)(14, SymphiqConnectGaDashboardComponent_Conditional_22_Conditional_14_Template, 1, 0);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "div", 29)(16, "button", 30);
-    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_22_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.googleButtonClick.emit()); });
+    i0.ɵɵlistener("click", function SymphiqConnectGaDashboardComponent_Conditional_22_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onGoogleButtonClick()); });
     i0.ɵɵelement(17, "div", 31);
     i0.ɵɵelementStart(18, "div", 32)(19, "div", 33);
     i0.ɵɵnamespaceSVG();
@@ -54215,8 +54215,10 @@ class SymphiqConnectGaDashboardComponent {
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this.isEditingProperty = signal(false, ...(ngDevMode ? [{ debugName: "isEditingProperty" }] : []));
         this.isReconnecting = signal(false, ...(ngDevMode ? [{ debugName: "isReconnecting" }] : []));
+        this.internalConnecting = signal(false, ...(ngDevMode ? [{ debugName: "internalConnecting" }] : []));
         this.currentEditingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentEditingPropertyId" }] : []));
         this.currentSelectingPropertyId = signal(undefined, ...(ngDevMode ? [{ debugName: "currentSelectingPropertyId" }] : []));
+        this.isConnecting = computed(() => this.isConnectingToGoogle() || this.internalConnecting(), ...(ngDevMode ? [{ debugName: "isConnecting" }] : []));
         this.sortedGaProperties = computed(() => {
             const properties = this.gaProperties();
             if (!properties)
@@ -54306,6 +54308,12 @@ class SymphiqConnectGaDashboardComponent {
                 }
             }
         }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
+        this.propertiesReceivedEffect = effect(() => {
+            const properties = this.gaProperties();
+            if (properties && properties.length > 0) {
+                this.internalConnecting.set(false);
+            }
+        }, ...(ngDevMode ? [{ debugName: "propertiesReceivedEffect" }] : []));
         this.scrollProgress = computed(() => this.headerScrollService.scrollProgress(), ...(ngDevMode ? [{ debugName: "scrollProgress" }] : []));
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
     }
@@ -54374,8 +54382,19 @@ class SymphiqConnectGaDashboardComponent {
     cancelReconnectMode() {
         this.isReconnecting.set(false);
     }
+    onGoogleButtonClick() {
+        this.internalConnecting.set(true);
+        this.googleButtonClick.emit();
+    }
     useDifferentGoogleAccount() {
         this.isReconnecting.set(true);
+        const element = this.scrollElement();
+        if (element) {
+            element.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        else {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
     }
     getContainerClasses() {
         return this.isLightMode()
@@ -54625,13 +54644,13 @@ class SymphiqConnectGaDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.CONNECT_GA4)("showNextStepAction", ctx.showNextStepAction())("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isConnectingToGoogle() ? 21 : -1);
+            i0.ɵɵconditional(ctx.isConnecting() ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isConnectState() && !ctx.isConnectingToGoogle() ? 22 : -1);
+            i0.ɵɵconditional(ctx.isConnectState() && !ctx.isConnecting() ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSelectionState() && !ctx.isConnectingToGoogle() ? 23 : -1);
+            i0.ɵɵconditional(ctx.isSelectionState() && !ctx.isConnecting() ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isSelectedState() && !ctx.isConnectingToGoogle() ? 24 : -1);
+            i0.ɵɵconditional(ctx.isSelectedState() && !ctx.isConnecting() ? 24 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showSubmitButton() ? 25 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, JourneyProgressIndicatorComponent, IndeterminateSpinnerComponent], 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 }); }
@@ -54707,7 +54726,7 @@ class SymphiqConnectGaDashboardComponent {
         <main class="relative pb-32">
           <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
             <!-- Connecting to Google State -->
-            @if (isConnectingToGoogle()) {
+            @if (isConnecting()) {
               <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
                 <div [ngClass]="contentClasses()" class="px-8 py-16">
                   <div class="flex flex-col items-center justify-center text-center">
@@ -54727,7 +54746,7 @@ class SymphiqConnectGaDashboardComponent {
             }
 
             <!-- Connect to Google State -->
-            @if (isConnectState() && !isConnectingToGoogle()) {
+            @if (isConnectState() && !isConnecting()) {
               <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
                 <div [ngClass]="contentClasses()" class="px-8 py-8">
                   <div class="flex items-start gap-6">
@@ -54767,7 +54786,7 @@ class SymphiqConnectGaDashboardComponent {
                       </p>
 
                       <div class="mb-6">
-                        <button type="button" class="gsi-material-button" (click)="googleButtonClick.emit()">
+                        <button type="button" class="gsi-material-button" (click)="onGoogleButtonClick()">
                           <div class="gsi-material-button-state"></div>
                           <div class="gsi-material-button-content-wrapper">
                             <div class="gsi-material-button-icon">
@@ -54823,7 +54842,7 @@ class SymphiqConnectGaDashboardComponent {
             }
 
             <!-- Property Selection State -->
-            @if (isSelectionState() && !isConnectingToGoogle()) {
+            @if (isSelectionState() && !isConnecting()) {
               <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
                 <div [ngClass]="contentClasses()" class="px-8 py-8">
                   <div class="flex items-start gap-6">
@@ -54931,7 +54950,7 @@ class SymphiqConnectGaDashboardComponent {
             }
 
             <!-- Selected Property State -->
-            @if (isSelectedState() && !isConnectingToGoogle()) {
+            @if (isSelectedState() && !isConnecting()) {
               <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
                 <div [ngClass]="contentClasses()" class="px-8 py-8">
                   <div class="flex items-start gap-6">