surveysparrow-ionic-plugin 1.0.7-beta.4 → 2.0.0

package/dist/angular-ui/fesm2022/angular-ui.mjs

@@ -0,0 +1,1013 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, Input, ViewChild, HostListener } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { v4 } from 'uuid';
+import { Device } from '@capacitor/device';
+import axios from 'axios';
+import { BehaviorSubject } from 'rxjs';
+import * as i1 from '@angular/platform-browser';
+
+class SpotcheckStateService {
+    initialState = {
+        isVisible: false,
+        spotcheckPosition: 'bottom',
+        spotcheckURL: '',
+        spotcheckID: 0,
+        spotcheckContactID: 0,
+        afterDelay: 0.0,
+        maxHeight: 0.5,
+        currentQuestionHeight: 0,
+        isFullScreenMode: false,
+        isBannerImageOn: false,
+        triggerToken: '',
+        closeButtonStyle: {},
+        isCloseButtonEnabled: false,
+        isSpotPassed: false,
+        isChecksPassed: false,
+        customEventsSpotChecks: [],
+        targetToken: '',
+        domainName: '',
+        userDetails: {},
+        variables: {},
+        customProperties: {},
+        traceId: '',
+        isClassicLoading: true,
+        isChatLoading: true,
+        classicUrl: '',
+        chatUrl: '',
+        classicWebViewRef: null,
+        chatWebViewRef: null,
+        filteredSpotChecks: [],
+        spotCheckType: '',
+        isMounted: false,
+        textPosition: 0,
+        screenHeight: 0,
+        keyBoardHeight: 0,
+        spotChecksMode: '',
+        avatarEnabled: false,
+        avatarUrl: '',
+        screenwiseUserDetails: {}
+    };
+    spotcheckState = new BehaviorSubject(this.initialState);
+    state$ = this.spotcheckState.asObservable();
+    setState(state) {
+        this.spotcheckState.next({ ...this.spotcheckState.value, ...state });
+    }
+    clearState() {
+        this.spotcheckState.next(this.initialState);
+    }
+    getState() {
+        return this.spotcheckState.getValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotcheckStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotcheckStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotcheckStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+let globalSpotcheckStateService;
+const getSpotcheckStateService = () => {
+    if (!globalSpotcheckStateService) {
+        globalSpotcheckStateService = new SpotcheckStateService();
+    }
+    return globalSpotcheckStateService;
+};
+function generateTraceId() {
+    const uuidString = v4();
+    const timestamp = Date.now();
+    return `${uuidString}-${timestamp}`;
+}
+const ischatSurvey = (type) => {
+    return (type === 'Conversational' ||
+        type === 'CESChat' ||
+        type === 'NPSChat' ||
+        type === 'CSATChat');
+};
+const getOS = async () => {
+    const info = await Device.getInfo();
+    return info.operatingSystem;
+};
+const setAppearance = async (responseJson, screen, domainName, traceId, variables) => {
+    try {
+        const spotcheckStateService = getSpotcheckStateService();
+        let state = spotcheckStateService.getState();
+        if (responseJson) {
+            const currentSpotcheck = state.filteredSpotChecks.find((spotcheck) => spotcheck['id'] === responseJson?.spotCheckId ||
+                spotcheck['id'] === responseJson?.id);
+            const appearance = responseJson?.appearance;
+            let chat = false;
+            let updatedState = {};
+            if (appearance) {
+                const { position, closeButton, colors, cardProperties, mode, bannerImage, } = appearance;
+                const { maxHeight } = cardProperties || {};
+                updatedState = {
+                    spotcheckPosition: position === 'top_full' || position === 'center_top'
+                        ? 'top'
+                        : position === 'center_center'
+                            ? 'center'
+                            : 'bottom',
+                    isCloseButtonEnabled: closeButton ?? true,
+                    closeButtonStyle: colors?.overrides ?? {},
+                    maxHeight: maxHeight ? parseFloat(maxHeight) / 100 : 0,
+                    spotCheckType: ischatSurvey(currentSpotcheck?.['survey']?.surveyType) &&
+                        mode === 'fullScreen'
+                        ? 'chat'
+                        : 'classic',
+                    isFullScreenMode: mode === 'fullScreen',
+                    isBannerImageOn: bannerImage?.enabled ?? false,
+                    spotChecksMode: mode,
+                    avatarEnabled: appearance?.avatar?.enabled ?? false,
+                    avatarUrl: appearance?.avatar?.avatarUrl ?? '',
+                };
+                chat = updatedState.spotCheckType === 'chat';
+            }
+            const spotCheckId = responseJson?.spotCheckId ?? 0;
+            const spotCheckContactId = responseJson?.spotCheckContactId ??
+                responseJson?.spotCheckContact?.id ??
+                0;
+            const triggerToken = responseJson?.triggerToken ?? '';
+            updatedState = {
+                ...updatedState,
+                spotcheckID: spotCheckId,
+                spotcheckContactID: spotCheckContactId,
+                triggerToken,
+            };
+            const baseSpotcheckURL = `https://${domainName}/s/spotcheck/${triggerToken}/${chat ? 'config' : 'bootstrap'}?spotcheckContactId=${spotCheckContactId}&traceId=${traceId}&spotcheckUrl=${screen}`;
+            let fullSpotcheckURL = baseSpotcheckURL;
+            Object.entries(variables).forEach(([key, value]) => {
+                fullSpotcheckURL += `&${key}=${value}`;
+            });
+            updatedState.spotcheckURL = fullSpotcheckURL;
+            spotcheckStateService.setState(updatedState);
+            try {
+                const response = await axios.get(fullSpotcheckURL);
+                const themeInfo = response.data.config.generatedCSS;
+                const theme_payload = { type: 'THEME_UPDATE_SPOTCHECK', themeInfo };
+                state = spotcheckStateService.getState();
+                let webViewRef = chat ? state.chatWebViewRef : state.classicWebViewRef;
+                let isLoading = chat ? state.isChatLoading : state.isClassicLoading;
+                const resetStateData = {
+                    type: 'RESET_STATE',
+                    state: {
+                        ...(response.data || {}),
+                        skip: true,
+                        spotCheckAppearance: {
+                            ...(appearance || {}),
+                            targetType: 'MOBILE',
+                        },
+                        spotcheckUrl: screen,
+                        traceId,
+                        elementBuilderParams: {
+                            ...(variables || {}),
+                        },
+                    },
+                };
+                const sendMessageToIframe = (iframe, data) => {
+                    if (iframe && iframe.contentWindow) {
+                        try {
+                            iframe.contentWindow.postMessage(data, '*');
+                        }
+                        catch (error) {
+                            console.error('❌ Failed to send message to iframe:', error);
+                        }
+                    }
+                };
+                const communicateWithWebView = async (iframe) => {
+                    await new Promise(resolve => setTimeout(() => {
+                        sendMessageToIframe(iframe, resetStateData);
+                        sendMessageToIframe(iframe, theme_payload);
+                        resolve(true);
+                    }, 2000));
+                };
+                if (webViewRef) {
+                    if (isLoading === false) {
+                        communicateWithWebView(webViewRef);
+                        start();
+                        return true;
+                    }
+                    else {
+                        // todo: recheck this
+                        const unsubscribe = spotcheckStateService.state$.subscribe((currentState) => {
+                            const { isChatLoading, isClassicLoading, chatWebViewRef, classicWebViewRef, } = currentState;
+                            if ((!isChatLoading && chat) || (!isClassicLoading && !chat)) {
+                                unsubscribe.unsubscribe();
+                                const activeWebViewRef = chat
+                                    ? chatWebViewRef
+                                    : classicWebViewRef;
+                                if (activeWebViewRef) {
+                                    communicateWithWebView(activeWebViewRef);
+                                    start();
+                                }
+                                else {
+                                    console.warn('⚠️ Active WebView ref is null after loading completed');
+                                }
+                            }
+                        });
+                        return true;
+                    }
+                }
+                else {
+                    const unsubscribeWebView = spotcheckStateService.state$.subscribe((currentState) => {
+                        const updatedWebViewRef = chat
+                            ? currentState.chatWebViewRef
+                            : currentState.classicWebViewRef;
+                        const updatedIsLoading = chat
+                            ? currentState.isChatLoading
+                            : currentState.isClassicLoading;
+                        if (updatedWebViewRef) {
+                            if (!updatedIsLoading) {
+                                unsubscribeWebView.unsubscribe();
+                                communicateWithWebView(updatedWebViewRef);
+                                start();
+                            }
+                            else {
+                                console.log('⏳ WebView ref available but still loading...');
+                            }
+                        }
+                    });
+                    return true;
+                }
+            }
+            catch (error) {
+                throw new Error(error.message);
+            }
+        }
+        throw new Error('Something went wrong');
+    }
+    catch (error) {
+        throw new Error(error.message);
+    }
+};
+const start = () => {
+    const state = getSpotcheckStateService().getState();
+    setTimeout(() => {
+        getSpotcheckStateService().setState({ isVisible: true });
+    }, state.afterDelay * 1000);
+};
+const closeSpotCheck = async () => {
+    try {
+        const stateService = getSpotcheckStateService();
+        const state = stateService.getState();
+        const payload = {
+            traceId: state.traceId,
+            triggerToken: state.triggerToken,
+        };
+        const response = await fetch(`https://${state.domainName}/api/internal/spotcheck/dismiss/${state.spotcheckContactID}`, {
+            method: 'PUT',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        });
+        if (response.status != 200) {
+            console.log(`Error: ${response.status}`);
+        }
+    }
+    catch (error) {
+        console.log('Error parsing JSON:', error);
+    }
+};
+const handleSurveyEnd = () => {
+    const stateService = getSpotcheckStateService();
+    const state = stateService.getState();
+    const webViewRef = state.spotCheckType === 'chat'
+        ? state.chatWebViewRef
+        : state.classicWebViewRef;
+    webViewRef?.current?.injectJavaScript(`
+      (function() {
+        window.dispatchEvent(new MessageEvent('message', {
+          data: ${JSON.stringify({ type: 'UNMOUNT_APP' })}
+        }));
+      })();
+    `);
+    const updatedState = {
+        isVisible: false,
+        isCloseButtonEnabled: false,
+        isFullScreenMode: false,
+        spotcheckID: 0,
+        currentQuestionHeight: 0,
+        closeButtonStyle: {},
+        spotcheckContactID: 0,
+        spotcheckURL: '',
+        spotcheckPosition: 'bottom',
+        isMounted: false,
+        spotCheckType: '',
+        screenHeight: 0,
+        keyBoardHeight: 0,
+        textPosition: 0,
+        spotChecksMode: '',
+        avatarEnabled: false,
+        avatarUrl: '',
+    };
+    stateService.setState(updatedState);
+};
+const getSpotcheckComponentCssStyles = (state) => {
+    let styles = {};
+    let wrapperStyles = {};
+    let extraPaddingForMiniCardCloseButtonIfTopPosition = 0;
+    if (state.isFullScreenMode && state.isVisible) {
+        wrapperStyles = {
+            display: 'flex',
+            height: '100%',
+        };
+        styles = {
+            display: 'flex',
+            height: '100%',
+        };
+    }
+    if (state.isVisible && state.isMounted) {
+        let height = Math.min(state.currentQuestionHeight, (state.maxHeight * window.innerHeight));
+        if (state.spotChecksMode === 'miniCard') {
+            if (state.avatarEnabled) {
+                height = height - 56;
+            }
+            if (state.isCloseButtonEnabled) {
+                height = height - 40;
+            }
+        }
+        switch (state.spotcheckPosition) {
+            case 'bottom':
+                styles = {
+                    display: 'flex',
+                    height: height + 'px',
+                };
+                wrapperStyles = {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                };
+                break;
+            case 'top':
+                styles = {
+                    display: 'flex',
+                    height: height + 'px',
+                };
+                wrapperStyles = {
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                };
+                if (state.spotChecksMode === 'miniCard' && state.isCloseButtonEnabled) {
+                    extraPaddingForMiniCardCloseButtonIfTopPosition = 30;
+                }
+                break;
+            case 'center':
+                styles = {
+                    display: 'flex',
+                    height: height + 'px',
+                };
+                wrapperStyles = {
+                    display: 'flex',
+                    justifyContent: 'center',
+                };
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        wrapperStyles: {
+            position: 'fixed',
+            width: '100%',
+            height: '100%',
+            top: '0',
+            left: '0',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            zIndex: '99999999',
+            display: 'none',
+            flexDirection: 'column',
+            ...wrapperStyles
+        },
+        styles: {
+            display: 'none',
+            flexDirection: 'column',
+            paddingTop: extraPaddingForMiniCardCloseButtonIfTopPosition + 'px',
+            ...styles,
+        }
+    };
+};
+const closeSpotCheckAndHandleSurveyEnd = async () => {
+    await closeSpotCheck();
+    handleSurveyEnd();
+};
+
+class WebViewComponent {
+    sanitizer;
+    url = '';
+    webviewType = 'classic';
+    isMiniCard = false;
+    safeUrl = null;
+    iframe;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    ngOnInit() {
+        if (this.url) {
+            this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
+        }
+    }
+    ngAfterViewInit() {
+        const stateService = getSpotcheckStateService();
+        const webViewRef = this.iframe.nativeElement;
+        if (this.webviewType === 'classic') {
+            stateService.setState({
+                classicWebViewRef: webViewRef,
+                isClassicLoading: false,
+            });
+        }
+        else {
+            stateService.setState({
+                chatWebViewRef: webViewRef,
+                isChatLoading: false,
+            });
+        }
+        this.setupIframeLoadListener();
+    }
+    setupIframeLoadListener() {
+        const iframe = this.iframe.nativeElement;
+        iframe.addEventListener('load', () => {
+            const stateService = getSpotcheckStateService();
+            if (this.webviewType === 'classic') {
+                stateService.setState({ isClassicLoading: false });
+            }
+            else {
+                stateService.setState({ isChatLoading: false });
+            }
+        });
+    }
+    onMessage(event) {
+        const stateService = getSpotcheckStateService();
+        const { data } = event;
+        switch (data.type) {
+            case 'slideInFrame':
+                if (data.mounted) {
+                    stateService.setState({ isMounted: true });
+                }
+                break;
+            case 'resizeWindow':
+                if (data.size) {
+                    stateService.setState({
+                        currentQuestionHeight: data.size.height,
+                    });
+                }
+                else if (data.isCloseButtonEnabled) {
+                    stateService.setState({
+                        isCloseButtonEnabled: data.isCloseButtonEnabled,
+                    });
+                }
+                break;
+            case 'surveyCompleted':
+                closeSpotCheckAndHandleSurveyEnd();
+                // spotchecksListener.emitSurveyCompleted(data.response);
+                break;
+            case 'surveyLoadStarted':
+                // spotchecksListener.emitSurveyLoadStarted(data.surveyDetails);
+                break;
+            default:
+                break;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WebViewComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: WebViewComponent, isStandalone: true, selector: "WebViewComponent", inputs: { url: "url", webviewType: "webviewType", isMiniCard: "isMiniCard" }, host: { listeners: { "window:message": "onMessage($event)" } }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframeRef"], descendants: true }], ngImport: i0, template: `
+    <div style="overflow: hidden; height: 100%; border-radius: {{isMiniCard ? 12 : 0}}px; padding-left: {{isMiniCard ? 12 : 0}}px; padding-right: {{isMiniCard ? 12 : 0}}px; box-sizing: border-box;">
+      <iframe
+        allow="camera; microphone; geolocation; display-capture; autoplay; clipboard-read; clipboard-write;"
+        #iframeRef
+        [src]="safeUrl"
+        style="width: 100%; height: 100%; display: block; border-radius: {{isMiniCard ? 12 : 0}}px;"
+        frameborder="0"
+      >
+      </iframe>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: WebViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'WebViewComponent',
+                    template: `
+    <div style="overflow: hidden; height: 100%; border-radius: {{isMiniCard ? 12 : 0}}px; padding-left: {{isMiniCard ? 12 : 0}}px; padding-right: {{isMiniCard ? 12 : 0}}px; box-sizing: border-box;">
+      <iframe
+        allow="camera; microphone; geolocation; display-capture; autoplay; clipboard-read; clipboard-write;"
+        #iframeRef
+        [src]="safeUrl"
+        style="width: 100%; height: 100%; display: block; border-radius: {{isMiniCard ? 12 : 0}}px;"
+        frameborder="0"
+      >
+      </iframe>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [CommonModule],
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { url: [{
+                type: Input
+            }], webviewType: [{
+                type: Input
+            }], isMiniCard: [{
+                type: Input
+            }], iframe: [{
+                type: ViewChild,
+                args: ['iframeRef']
+            }], onMessage: [{
+                type: HostListener,
+                args: ['window:message', ['$event']]
+            }] } });
+class CloseSVGComponent {
+    size = 32;
+    stroke = '#919191';
+    strokeWidth = 1.5;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseSVGComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CloseSVGComponent, isStandalone: true, selector: "close-svg", inputs: { size: "size", stroke: "stroke", strokeWidth: "strokeWidth" }, ngImport: i0, template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="https://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6665 10.667L21.3332 21.3337M21.3332 10.667L10.6665 21.3337"
+        [attr.stroke]="stroke"
+        [attr.stroke-width]="strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseSVGComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'close-svg',
+                    template: `
+    <svg
+      [attr.width]="size"
+      [attr.height]="size"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="https://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6665 10.667L21.3332 21.3337M21.3332 10.667L10.6665 21.3337"
+        [attr.stroke]="stroke"
+        [attr.stroke-width]="strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+                    standalone: true,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], stroke: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }] } });
+class CloseButtonComponent {
+    size = 30;
+    strokeWidth = 1.2;
+    state;
+    stateService;
+    stateSubscription;
+    isVisible = false;
+    isMiniCard = false;
+    stroke = 'black';
+    constructor() {
+        this.stateService = getSpotcheckStateService();
+        this.state = this.stateService.getState();
+        this.updateComponentState();
+        this.stateSubscription = this.stateService.state$.subscribe((newState) => {
+            this.state = newState;
+            this.updateComponentState();
+        });
+    }
+    ngOnDestroy() {
+        if (this.stateSubscription) {
+            this.stateSubscription.unsubscribe();
+        }
+    }
+    updateComponentState() {
+        this.isVisible =
+            this.state.isCloseButtonEnabled &&
+                ((this.state.currentQuestionHeight > 0 && !this.state.isFullScreenMode) ||
+                    (this.state.isFullScreenMode &&
+                        ((!this.state.isClassicLoading &&
+                            this.state.spotCheckType === 'classic') ||
+                            (!this.state.isChatLoading &&
+                                this.state.spotCheckType === 'chat'))));
+        this.isMiniCard = this.state.spotChecksMode === 'miniCard';
+        this.stroke = this.isMiniCard ? 'black' : this.state.closeButtonStyle?.['ctaButton'] || 'black';
+    }
+    onClick = async () => {
+        await closeSpotCheck();
+        handleSurveyEnd();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CloseButtonComponent, isStandalone: true, selector: "spotcheck-close-button", inputs: { size: "size", strokeWidth: "strokeWidth" }, ngImport: i0, template: `
+      <div style="position: absolute; top: -36px; right: 16px; z-index: 100001; cursor: pointer; background-color: white; border-radius: 50px;" (click)="onClick()" *ngIf="isVisible && isMiniCard">
+        <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth" style="display: flex; align-items: center; justify-content: center;"/>
+      </div>
+      <div style="position: absolute; top: 16px; right: 16px; z-index: 100001; cursor: pointer;" (click)="onClick()" *ngIf="isVisible && !isMiniCard">
+        <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth"/>
+      </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CloseSVGComponent, selector: "close-svg", inputs: ["size", "stroke", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spotcheck-close-button',
+                    template: `
+      <div style="position: absolute; top: -36px; right: 16px; z-index: 100001; cursor: pointer; background-color: white; border-radius: 50px;" (click)="onClick()" *ngIf="isVisible && isMiniCard">
+        <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth" style="display: flex; align-items: center; justify-content: center;"/>
+      </div>
+      <div style="position: absolute; top: 16px; right: 16px; z-index: 100001; cursor: pointer;" (click)="onClick()" *ngIf="isVisible && !isMiniCard">
+        <close-svg [size]="size" [stroke]="stroke" [strokeWidth]="strokeWidth"/>
+      </div>
+  `,
+                    standalone: true,
+                    imports: [CommonModule, CloseSVGComponent],
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }] } });
+class SpotCheckComponent {
+    state;
+    spotcheckStateService;
+    stateSubscription;
+    componentStyles = {};
+    avatarUrl = '';
+    constructor() {
+        this.spotcheckStateService = getSpotcheckStateService();
+        this.state = this.spotcheckStateService.getState();
+        this.updateComponentStyles();
+        this.stateSubscription = this.spotcheckStateService.state$.subscribe((newState) => {
+            this.state = newState;
+            this.updateComponentStyles();
+            this.avatarUrl = this.state.avatarUrl || "https://static.surveysparrow.com/application/images/profile.png";
+        });
+    }
+    ngOnInit() {
+        this.initializeComponent();
+    }
+    ngOnDestroy() {
+        if (this.stateSubscription) {
+            this.stateSubscription.unsubscribe();
+        }
+    }
+    updateComponentStyles() {
+        this.componentStyles = getSpotcheckComponentCssStyles(this.state);
+    }
+    initializeComponent = async () => {
+        try {
+            const domainName = this.state.domainName;
+            const targetToken = this.state.targetToken;
+            const response = await axios.get(`https://${domainName}/api/internal/spotcheck/widget/${targetToken}/init`);
+            const data = response.data;
+            if (data.filteredSpotChecks && data.filteredSpotChecks.length > 0) {
+                let classicIframe = false;
+                let chatIframe = false;
+                data.filteredSpotChecks.forEach((spotcheck) => {
+                    if (spotcheck.appearance.mode === 'fullScreen' &&
+                        ischatSurvey(spotcheck?.survey?.surveyType)) {
+                        chatIframe = true;
+                    }
+                    else {
+                        classicIframe = true;
+                    }
+                });
+                const newClassicUrl = classicIframe
+                    ? `https://${domainName}/eui-template/classic`
+                    : '';
+                const newChatUrl = chatIframe
+                    ? `https://${domainName}/eui-template/chat`
+                    : '';
+                this.spotcheckStateService.setState({
+                    filteredSpotChecks: data.filteredSpotChecks,
+                    classicUrl: newClassicUrl,
+                    chatUrl: newChatUrl,
+                });
+            }
+        }
+        catch (error) {
+            console.log('Error initializing widget:', JSON.stringify(error));
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: SpotCheckComponent, isStandalone: true, selector: "SpotCheckComponent", ngImport: i0, template: "<div [ngStyle]=\"componentStyles.wrapperStyles\" class=\"safe-area\">\n  <div [ngStyle]=\"componentStyles.styles\">\n    <div style=\"position: relative; height: 100%;\">\n      <spotcheck-close-button />\n  \n      <WebViewComponent\n        *ngIf=\"state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'\"\n        [url]=\"state.classicUrl\"\n        [webviewType]=\"'classic'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n  \n      <WebViewComponent\n        *ngIf=\"state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'\"\n        [url]=\"state.chatUrl\"\n        [webviewType]=\"'chat'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n\n      <div *ngIf=\"state.spotChecksMode === 'miniCard' && state.avatarEnabled\">\n        <div style=\"position: absolute; bottom: -66px; left: 16px; z-index: 100001;\">\n          <img [src]=\"avatarUrl\" style=\"width: 56px; height: 56px; border-radius: 50px; background-color: white;\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".safe-area{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WebViewComponent, selector: "WebViewComponent", inputs: ["url", "webviewType", "isMiniCard"] }, { kind: "component", type: CloseButtonComponent, selector: "spotcheck-close-button", inputs: ["size", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheckComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'SpotCheckComponent', standalone: true, imports: [CommonModule, WebViewComponent, CloseButtonComponent], template: "<div [ngStyle]=\"componentStyles.wrapperStyles\" class=\"safe-area\">\n  <div [ngStyle]=\"componentStyles.styles\">\n    <div style=\"position: relative; height: 100%;\">\n      <spotcheck-close-button />\n  \n      <WebViewComponent\n        *ngIf=\"state.classicUrl && state.classicUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'classic'\"\n        [url]=\"state.classicUrl\"\n        [webviewType]=\"'classic'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n  \n      <WebViewComponent\n        *ngIf=\"state.chatUrl && state.chatUrl.length > 0 && state.spotcheckURL.length > 0 && state.spotCheckType === 'chat'\"\n        [url]=\"state.chatUrl\"\n        [webviewType]=\"'chat'\"\n        [isMiniCard]=\"state.spotChecksMode === 'miniCard'\"\n      />\n\n      <div *ngIf=\"state.spotChecksMode === 'miniCard' && state.avatarEnabled\">\n        <div style=\"position: absolute; bottom: -66px; left: 16px; z-index: 100001;\">\n          <img [src]=\"avatarUrl\" style=\"width: 56px; height: 56px; border-radius: 50px; background-color: white;\"/>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".safe-area{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box}\n"] }]
+        }], ctorParameters: () => [] });
+
+class SpotCheck {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheck, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: SpotCheck, isStandalone: true, selector: "SpotCheck", ngImport: i0, template: `<SpotCheckComponent />`, isInline: true, dependencies: [{ kind: "component", type: SpotCheckComponent, selector: "SpotCheckComponent" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: SpotCheck, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'SpotCheck',
+                    template: `<SpotCheckComponent />`,
+                    standalone: true,
+                    imports: [SpotCheckComponent],
+                }]
+        }] });
+
+const getStoredUUID = () => {
+    return localStorage.getItem('SurveySparrowUUID') || null;
+};
+const setUUID = (uuid) => {
+    localStorage.setItem('SurveySparrowUUID', uuid);
+};
+
+const sendTrackScreenRequest = async ({ screen, options, }) => {
+    try {
+        const spotcheckStateService = getSpotcheckStateService();
+        const oldState = spotcheckStateService.getState();
+        let variables = { ...oldState.variables };
+        let customProperties = { ...oldState.customProperties };
+        let userDetails = { ...oldState.userDetails };
+        if (options && options.variables && Object.keys(options.variables).length > 0) {
+            variables = { ...variables, ...options.variables };
+        }
+        if (options && options.customProperties && Object.keys(options.customProperties).length > 0) {
+            customProperties = { ...customProperties, ...options.customProperties };
+        }
+        if (options && options.userDetails && Object.keys(options.userDetails).length > 0) {
+            userDetails = { ...userDetails, ...options.userDetails };
+        }
+        let traceId = oldState.traceId;
+        if (!traceId) {
+            traceId = generateTraceId();
+        }
+        if (!userDetails.uuid && !userDetails.email && !userDetails.mobile) {
+            const uuid = getStoredUUID();
+            if (uuid) {
+                userDetails.uuid = uuid;
+            }
+        }
+        spotcheckStateService.setState({
+            traceId,
+            screenwiseUserDetails: {
+                [screen]: userDetails
+            },
+        });
+        const state = spotcheckStateService.getState();
+        let { isSpotPassed, isChecksPassed } = state;
+        const payload = {
+            screenName: screen,
+            variables: variables,
+            userDetails: userDetails,
+            visitor: {
+                deviceType: 'MOBILE',
+                operatingSystem: await getOS(),
+                screenResolution: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+                currentDate: new Date().toISOString(),
+                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            traceId: state.traceId,
+            customProperties: customProperties,
+        };
+        const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/properties?isSpotCheck=true`;
+        const response = await axios.post(url, payload, {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        if (response.status === 200) {
+            const responseJson = response.data;
+            if (responseJson.uuid) {
+                setUUID(responseJson.uuid);
+            }
+            if (responseJson?.show) {
+                if (responseJson?.show) {
+                    const appearance_response = await setAppearance(responseJson, screen, state.domainName, traceId, variables);
+                    if (appearance_response) {
+                        isSpotPassed = true;
+                        spotcheckStateService.setState({ isSpotPassed });
+                        return { valid: true };
+                    }
+                }
+                else {
+                    throw new Error('');
+                }
+            }
+            if (!isSpotPassed && responseJson?.checkPassed) {
+                if (responseJson.checkCondition) {
+                    const checkCondition = responseJson.checkCondition;
+                    spotcheckStateService.setState({ afterDelay: checkCondition.afterDelay || 0 });
+                    if (checkCondition.customEvent) {
+                        spotcheckStateService.setState({ customEventsSpotChecks: [responseJson] });
+                        throw new Error('');
+                    }
+                }
+                const appearance_response = await setAppearance(responseJson, screen, state.domainName, traceId, variables);
+                if (appearance_response) {
+                    isChecksPassed = true;
+                    spotcheckStateService.setState({ isChecksPassed });
+                    return { valid: true };
+                }
+            }
+            if (!isSpotPassed && !isChecksPassed && responseJson?.multiShow != null) {
+                if (responseJson.multiShow) {
+                    spotcheckStateService.setState({ customEventsSpotChecks: responseJson.resultantSpotCheck });
+                    let selectedSpotCheck = {};
+                    let minDelay = Number.POSITIVE_INFINITY;
+                    for (const spotcheck of responseJson.resultantSpotCheck) {
+                        const checks = spotcheck?.checks || {};
+                        if (Object.keys(checks).length === 0) {
+                            minDelay = 0;
+                            selectedSpotCheck = spotcheck;
+                        }
+                        else if (checks.afterDelay != null) {
+                            const delay = parseFloat(checks.afterDelay);
+                            if (minDelay > delay) {
+                                minDelay = delay;
+                                selectedSpotCheck = spotcheck;
+                            }
+                        }
+                    }
+                    if (Object.keys(selectedSpotCheck).length > 0) {
+                        spotcheckStateService.setState({ afterDelay: minDelay });
+                        const appearance_response = await setAppearance(selectedSpotCheck, screen, state.domainName, traceId, variables);
+                        if (appearance_response) {
+                            return { valid: true };
+                        }
+                    }
+                }
+            }
+            throw new Error(responseJson?.reason.toString());
+        }
+        else {
+            throw new Error(`Received status code ${response.status}`);
+        }
+    }
+    catch (error) {
+        return { valid: false, error: error.message };
+    }
+};
+const sendTrackEventRequest = async ({ screen, event }) => {
+    try {
+        const intMax = Number.POSITIVE_INFINITY;
+        const state = getSpotcheckStateService().getState();
+        let selectedSpotCheckID = intMax;
+        let { isSpotPassed } = state;
+        if (state.customEventsSpotChecks.length > 0) {
+            const eventKeys = Object.keys(event);
+            for (const spotCheck of state.customEventsSpotChecks) {
+                const checks = spotCheck?.['checks'] ?? spotCheck?.['checkCondition'];
+                if (checks) {
+                    const customEvent = checks?.customEvent;
+                    if (eventKeys.includes(customEvent?.eventName)) {
+                        selectedSpotCheckID =
+                            spotCheck?.['id'] ?? spotCheck?.['spotCheckId'] ?? intMax;
+                        if (selectedSpotCheckID !== intMax) {
+                            const payload = {
+                                screenName: screen,
+                                variables: state.variables,
+                                userDetails: state.screenwiseUserDetails[screen] || {},
+                                visitor: {
+                                    deviceType: 'MOBILE',
+                                    operatingSystem: await getOS(),
+                                    screenResolution: {
+                                        height: window.innerHeight,
+                                        width: window.innerWidth,
+                                    },
+                                    currentDate: new Date().toISOString(),
+                                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                                },
+                                spotCheckId: selectedSpotCheckID,
+                                eventTrigger: {
+                                    customEvent: event,
+                                },
+                                traceId: state.traceId,
+                                customProperties: state.customProperties,
+                            };
+                            const url = `https://${state.domainName}/api/internal/spotcheck/widget/${state.targetToken}/eventTrigger?isSpotCheck=true`;
+                            try {
+                                const response = await axios.post(url, payload, {
+                                    headers: {
+                                        'Content-Type': 'application/json',
+                                    },
+                                });
+                                if (response.status === 200) {
+                                    const responseJson = response.data;
+                                    if (responseJson?.show != null) {
+                                        if (responseJson?.show) {
+                                            const appearance_response = await setAppearance(responseJson, screen, state.domainName, state.traceId, state.variables);
+                                            if (appearance_response) {
+                                                getSpotcheckStateService().setState({ isSpotPassed: true });
+                                                isSpotPassed = true;
+                                                return { valid: true };
+                                            }
+                                        }
+                                    }
+                                    if (!isSpotPassed && responseJson?.eventShow) {
+                                        if (responseJson?.checkCondition != null) {
+                                            const checkCondition = responseJson?.checkCondition;
+                                            getSpotcheckStateService().setState({
+                                                afterDelay: checkCondition?.afterDelay ?? 0,
+                                            });
+                                            if (checkCondition?.customEvent != null) {
+                                                getSpotcheckStateService().setState({
+                                                    afterDelay: checkCondition?.customEvent?.delayInSeconds ?? 0,
+                                                });
+                                            }
+                                        }
+                                        const appearance_response = await setAppearance(responseJson, screen, state.domainName, state.traceId, state.variables);
+                                        if (appearance_response) {
+                                            return { valid: true };
+                                        }
+                                    }
+                                    throw new Error(responseJson?.reason.toString());
+                                }
+                                else {
+                                    throw new Error(`Received status code ${response.status}`);
+                                }
+                            }
+                            catch (error) {
+                                throw new Error(error.message);
+                            }
+                        }
+                    }
+                }
+            }
+            throw new Error('');
+        }
+        else {
+            throw new Error('');
+        }
+    }
+    catch (error) {
+        return { valid: false, error: error.message };
+    }
+};
+
+const initializeSpotChecks = ({ domainName, targetToken, userDetails = {}, variables = {}, customProperties = {}, }) => {
+    const spotcheckStateService = getSpotcheckStateService();
+    spotcheckStateService.setState({
+        domainName,
+        targetToken,
+        userDetails,
+        variables,
+        customProperties,
+    });
+};
+const trackScreen = async ({ screen, options }) => {
+    try {
+        const response = await sendTrackScreenRequest({ screen, options });
+        if (response.valid) {
+            console.log('Screen Tracking succeeded.');
+        }
+        else {
+            if ('error' in response) {
+                throw new Error(response.error.toString());
+            }
+            else {
+                throw new Error('Tracking failed without an explicit error.');
+            }
+        }
+    }
+    catch (error) {
+        console.log(`Screen Tracking Failed. ${error.message}`);
+    }
+};
+const trackEvent = async ({ screen, event }) => {
+    try {
+        const response = await sendTrackEventRequest({ screen, event });
+        if (response.valid) {
+            console.log('TrackEvent succeeded.');
+        }
+        else {
+            if ('error' in response) {
+                throw new Error(response.error.toString());
+            }
+            else {
+                throw new Error('Tracking failed without an explicit error.');
+            }
+        }
+    }
+    catch (error) {
+        console.log(`Event Tracking Failed. ${error.message}`);
+    }
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SpotCheck, initializeSpotChecks, trackEvent, trackScreen };
+//# sourceMappingURL=angular-ui.mjs.map