{"version":3,"file":"FormstackForm.CktoRuYN.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/RFGbBWpu4qWEByZQxra2/0OWnyaIgoEcAWKJZoH3l/FormstackForm.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";export default function FormstackForm(){const iframeRef=useRef(null);const[isClient,setIsClient]=useState(false);const[iframeHeight,setIframeHeight]=useState(700);useEffect(()=>{setIsClient(true);},[]);useEffect(()=>{if(!isClient||!iframeRef.current)return;const iframe=iframeRef.current;const iframeWindow=iframe.contentWindow;const iframeDoc=iframeWindow.document;// Create a clean HTML document inside the iframe\niframeDoc.open();iframeDoc.write(`\n            <!DOCTYPE html>\n            <html>\n                <head>\n                    <meta charset=\"utf-8\">\n                    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n                    <style>\n                        body {\n                            margin: 0;\n                            padding: 0;\n                            font-family: sans-serif;\n                            background-color: transparent;\n                            width: 100%;\n                            max-width: 100%;\n                            overflow-x: hidden;\n                        }\n                        \n                        /* Form container styling for better responsiveness */\n                        #form-container {\n                            width: 100%;\n                            max-width: 800px;\n                            margin: 0 auto;\n                            padding: 0 10px;\n                        }\n                        \n                        /* Responsive adjustments */\n                        @media (min-width: 768px) {\n                            #form-container {\n                                padding: 0 20px;\n                            }\n                        }\n                        \n                        /* Form-specific styles contained within iframe */\n                        img {\n                            width: auto !important;\n                            height: auto !important;\n                            max-width: 100% !important;\n                            object-fit: contain !important;\n                        }\n                        \n                        /* Additional form styling */\n                        input, select, textarea {\n                            font-family: inherit;\n                            font-size: inherit;\n                            max-width: 100%;\n                        }\n                        \n                        /* Make form elements more responsive */\n                        .ff-form, form, .ff-container {\n                            width: 100% !important;\n                            max-width: 100% !important;\n                        }\n                        \n                        /* Adjust button styling */\n                        button, .ff-btn, [class*=\"button\"], [type=\"button\"], [type=\"submit\"] {\n                            cursor: pointer;\n                        }\n                    </style>\n                </head>\n                <body>\n                    <div id=\"form-container\"></div>\n                </body>\n            </html>\n        `);iframeDoc.close();// Add the Formstack script to the iframe document\nconst script=iframeDoc.createElement(\"script\");script.type=\"text/javascript\";script.id=\"jsFastForms\";script.src=\"https://intercaretherapy.my.salesforce-sites.com/services/apexrest/VisualAntidote/FFNEngine/v1/?d=XasaKLriZGcp9auCn97pPw%3D%3D\";script.async=true;iframeDoc.body.appendChild(script);// Function to resize iframe based on content height\nconst resizeObserver=new ResizeObserver(entries=>{for(let entry of entries){const newHeight=entry.target.scrollHeight;// Add a small buffer to avoid scrollbars\nsetIframeHeight(newHeight+50);}});// Observe the iframe body for size changes\nresizeObserver.observe(iframeDoc.body);// Scroll to top function that will be called when form navigation occurs\nconst scrollToTop=()=>{iframeWindow.scrollTo({top:0,behavior:\"smooth\"});// Also inform parent to scroll to the container if needed\nwindow.scrollTo({top:iframe.getBoundingClientRect().top+window.pageYOffset-50,behavior:\"smooth\"});};// Inject a script to handle clicks on next/prev buttons and form navigation\nconst navigationScript=iframeDoc.createElement(\"script\");navigationScript.innerHTML=`\n            // Function to detect form navigation and scroll to top\n            function setupFormNavigationListener() {\n                // Handle click events on the document\n                document.addEventListener('click', (e) => {\n                    // Look for next/prev buttons, submit buttons, or navigation elements\n                    const target = e.target;\n                    const isNavButton = \n                        target.matches('button, .ff-btn, [type=\"button\"], [type=\"submit\"], .next, .prev, .submit, [class*=\"next\"], [class*=\"prev\"], [class*=\"submit\"], [class*=\"button\"]') || \n                        target.closest('button, .ff-btn, [type=\"button\"], [type=\"submit\"], .next, .prev, .submit, [class*=\"next\"], [class*=\"prev\"], [class*=\"submit\"], [class*=\"button\"]');\n                    \n                    if (isNavButton) {\n                        // Short delay to allow form processing\n                        setTimeout(() => {\n                            window.scrollTo({ top: 0, behavior: 'smooth' });\n                            // Also inform the parent\n                            window.parent.postMessage({\n                                type: 'formstack-scroll',\n                                action: 'scrollToTop'\n                            }, '*');\n                        }, 100);\n                    }\n                });\n                \n                // Also watch for form submissions\n                const forms = document.querySelectorAll('form');\n                forms.forEach(form => {\n                    form.addEventListener('submit', () => {\n                        setTimeout(() => {\n                            window.scrollTo({ top: 0, behavior: 'smooth' });\n                            window.parent.postMessage({\n                                type: 'formstack-scroll',\n                                action: 'scrollToTop'\n                            }, '*');\n                        }, 100);\n                    });\n                });\n                \n                // Watch for hash changes which might indicate page navigation in multi-page forms\n                window.addEventListener('hashchange', () => {\n                    window.scrollTo({ top: 0, behavior: 'smooth' });\n                    window.parent.postMessage({\n                        type: 'formstack-scroll',\n                        action: 'scrollToTop'\n                    }, '*');\n                });\n            }\n            \n            // Setup initial listeners\n            setupFormNavigationListener();\n            \n            // Try again after everything loads\n            window.addEventListener('load', () => {\n                setupFormNavigationListener();\n                \n                // Continue to monitor for new form elements\n                const observer = new MutationObserver(mutations => {\n                    for (const mutation of mutations) {\n                        if (mutation.addedNodes.length) {\n                            setupFormNavigationListener();\n                        }\n                    }\n                });\n                \n                observer.observe(document.body, { \n                    childList: true, \n                    subtree: true \n                });\n            });\n            \n            // Report height on various events\n            const reportHeight = () => {\n                window.parent.postMessage({\n                    type: 'formstack-height',\n                    height: document.body.scrollHeight\n                }, '*');\n            };\n            \n            // Report height periodically\n            setInterval(reportHeight, 500);\n            \n            // Report on DOM changes\n            const heightObserver = new MutationObserver(reportHeight);\n            heightObserver.observe(document.body, { \n                childList: true, \n                subtree: true, \n                attributes: true \n            });\n        `;iframeDoc.body.appendChild(navigationScript);// Handle messages from iframe content\nconst handleMessage=event=>{if(event.data&&event.data.type===\"formstack-height\"){setIframeHeight(event.data.height+50);}else if(event.data&&event.data.type===\"formstack-scroll\"&&event.data.action===\"scrollToTop\"){scrollToTop();}};window.addEventListener(\"message\",handleMessage);// Additional resize handling\nconst handleResize=()=>{const newHeight=iframeDoc.body.scrollHeight;setIframeHeight(newHeight+50);};iframeWindow.addEventListener(\"load\",handleResize);iframeWindow.addEventListener(\"resize\",handleResize);// Periodic resize check as a fallback\nconst resizeInterval=setInterval(handleResize,1e3);return()=>{resizeObserver.disconnect();iframeWindow.removeEventListener(\"load\",handleResize);iframeWindow.removeEventListener(\"resize\",handleResize);window.removeEventListener(\"message\",handleMessage);clearInterval(resizeInterval);};},[isClient]);const containerStyle={width:\"100%\",maxWidth:\"900px\",margin:\"0 auto\",position:\"relative\"};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsx(\"iframe\",{ref:iframeRef,title:\"Formstack Form\",style:{width:\"100%\",height:`${iframeHeight}px`,border:\"none\",overflow:\"hidden\",backgroundColor:\"transparent\",display:\"block\"},scrolling:\"no\"})});}\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FormstackForm\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FormstackForm.map"],"mappings":"mNAAwF,SAAwB,GAAe,CAAC,IAAM,EAAUA,EAAO,KAAK,CAAM,CAAC,EAAS,GAAaC,EAAS,GAAM,CAAM,CAAC,EAAa,GAAiBA,EAAS,IAAI,CAkKyI,OAlKxI,MAAc,CAAC,EAAY,GAAK,EAAG,EAAE,CAAC,CAAC,MAAc,CAAC,GAAG,CAAC,GAAU,CAAC,EAAU,QAAQ,OAAO,IAAM,EAAO,EAAU,QAAc,EAAa,EAAO,cAAoB,EAAU,EAAa,SAC7b,EAAU,MAAM,CAAC,EAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA+DvB,CAAC,EAAU,OAAO,CAC5B,IAAM,EAAO,EAAU,cAAc,SAAS,CAAC,EAAO,KAAK,kBAAkB,EAAO,GAAG,cAAc,EAAO,IAAI,iIAAiI,EAAO,MAAM,GAAK,EAAU,KAAK,YAAY,EAAO,CACrS,IAAM,EAAe,IAAI,eAAe,GAAS,CAAC,IAAI,IAAI,KAAS,EAAQ,CAAC,IAAM,EAAU,EAAM,OAAO,aACzG,EAAgB,EAAU,GAAG,GAAI,CACjC,EAAe,QAAQ,EAAU,KAAK,CACtC,IAAM,MAAgB,CAAC,EAAa,SAAS,CAAC,IAAI,EAAE,SAAS,SAAS,CAAC,CACvE,EAAO,SAAS,CAAC,IAAI,EAAO,uBAAuB,CAAC,IAAI,EAAO,YAAY,GAAG,SAAS,SAAS,CAAC,EAC3F,EAAiB,EAAU,cAAc,SAAS,CAAC,EAAiB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAwF1E,EAAU,KAAK,YAAY,EAAiB,CACtD,IAAM,EAAc,GAAO,CAAI,EAAM,MAAM,EAAM,KAAK,OAAO,mBAAoB,EAAgB,EAAM,KAAK,OAAO,GAAG,CAAU,EAAM,MAAM,EAAM,KAAK,OAAO,oBAAoB,EAAM,KAAK,SAAS,eAAe,GAAa,EAAI,EAAO,iBAAiB,UAAU,EAAc,CACtR,IAAM,MAAiB,CAAC,IAAM,EAAU,EAAU,KAAK,aAAa,EAAgB,EAAU,GAAG,EAAG,EAAa,iBAAiB,OAAO,EAAa,CAAC,EAAa,iBAAiB,SAAS,EAAa,CAC3M,IAAM,EAAe,YAAY,EAAa,IAAI,CAAC,UAAU,CAAC,EAAe,YAAY,CAAC,EAAa,oBAAoB,OAAO,EAAa,CAAC,EAAa,oBAAoB,SAAS,EAAa,CAAC,EAAO,oBAAoB,UAAU,EAAc,CAAC,cAAc,EAAe,GAAK,CAAC,EAAS,CAAC,CAA8G,EAAK,MAAM,CAAC,MAApG,CAAC,MAAM,OAAO,SAAS,QAAQ,OAAO,SAAS,SAAS,WAAW,CAAsD,SAAsB,EAAK,SAAS,CAAC,IAAI,EAAU,MAAM,iBAAiB,MAAM,CAAC,MAAM,OAAO,OAAO,GAAG,EAAa,IAAI,OAAO,OAAO,SAAS,SAAS,gBAAgB,cAAc,QAAQ,QAAQ,CAAC,UAAU,KAAK,CAAC,CAAC,CAAC,sBAlKvmB,IAA6C"}