{"version":3,"file":"DynamicCMSCode.Dfkz6sos.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/vvnzI5RN96kB6LTXaZvw/b8RHHs7T6ZZAnV8S4d7c/DynamicCMSCode.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight auto\n */export default function CMSCodeRenderer(props){const{code=\"\",horizontalAlign=\"center\",verticalAlign=\"top\",contentWidth=\"100%\",padding=0,minHeight=0,background=\"transparent\"}=props;const iframeRef=React.useRef(null);// IMPORTANT:\n// iframe does not render during Framer's server render.\nconst[isClient,setIsClient]=React.useState(false);const[contentHeight,setContentHeight]=React.useState(1);/*\n     * Register the listener first,\n     * THEN allow the iframe to mount.\n     */React.useEffect(()=>{const handleMessage=event=>{if(iframeRef.current&&event.source!==iframeRef.current.contentWindow){return;}if(event.data?.type!==\"cms-renderer-height\"){return;}const nextHeight=Math.ceil(Number(event.data.height));if(Number.isFinite(nextHeight)&&nextHeight>0){setContentHeight(nextHeight);}};window.addEventListener(\"message\",handleMessage);// Now we're safely in the browser.\nsetIsClient(true);return()=>{window.removeEventListener(\"message\",handleMessage);};},[]);/*\n     * When switching CMS records or when\n     * Framer hydrates the CMS field,\n     * start measuring from scratch.\n     */React.useEffect(()=>{if(!isClient)return;setContentHeight(1);},[code,contentWidth,padding,minHeight,isClient]);function getHorizontalAlign(){switch(horizontalAlign){case\"left\":return\"flex-start\";case\"right\":return\"flex-end\";default:return\"center\";}}function getVerticalAlign(){switch(verticalAlign){case\"center\":return\"center\";case\"bottom\":return\"flex-end\";default:return\"flex-start\";}}const rendererCSS=`\n            <style id=\"cms-renderer-css\">\n\n                html,\n                body {\n                    margin: 0 !important;\n                    padding: 0 !important;\n\n                    width: 100% !important;\n\n                    height: auto !important;\n                    min-height: 0 !important;\n\n                    background: transparent !important;\n                }\n\n                html,\n                body {\n                    overflow: hidden !important;\n                }\n\n                *,\n                *::before,\n                *::after {\n                    box-sizing: border-box;\n                }\n\n                #cms-renderer-root {\n                    position: relative;\n\n                    width: 100%;\n\n                    min-height: ${minHeight>0?`${minHeight}px`:\"0\"};\n\n                    margin: 0;\n\n                    padding: ${padding}px;\n\n                    display: flex;\n\n                    justify-content:\n                        ${getHorizontalAlign()};\n\n                    align-items:\n                        ${getVerticalAlign()};\n\n                    background: ${background};\n                }\n\n                #cms-renderer-content {\n                    position: relative;\n\n                    width: ${contentWidth};\n                    max-width: 100%;\n\n                    min-width: 0;\n\n                    margin: 0;\n                    padding: 0;\n                }\n\n            </style>\n        `;const resizeScript=`\n            <script>\n                (() => {\n\n                    let raf = null;\n                    let lastHeight = -1;\n\n                    function getActualHeight() {\n                        const root =\n                            document.getElementById(\n                                \"cms-renderer-root\"\n                            );\n\n                        const content =\n                            document.getElementById(\n                                \"cms-renderer-content\"\n                            );\n\n                        if (!root || !content) {\n                            return 0;\n                        }\n\n                        const rootRect =\n                            root.getBoundingClientRect();\n\n                        let height =\n                            rootRect.height;\n\n                        let maxBottom =\n                            rootRect.bottom;\n\n                        const elements =\n                            content.querySelectorAll(\"*\");\n\n                        for (\n                            const element\n                            of elements\n                        ) {\n                            const rect =\n                                element.getBoundingClientRect();\n\n                            if (\n                                rect.width > 0 ||\n                                rect.height > 0\n                            ) {\n                                maxBottom =\n                                    Math.max(\n                                        maxBottom,\n                                        rect.bottom\n                                    );\n                            }\n                        }\n\n                        height = Math.max(\n                            height,\n                            maxBottom -\n                                rootRect.top\n                        );\n\n                        return Math.ceil(height);\n                    }\n\n\n                    function reportHeight() {\n                        if (raf) {\n                            cancelAnimationFrame(raf);\n                        }\n\n                        raf =\n                            requestAnimationFrame(\n                                () => {\n                                    const height =\n                                        getActualHeight();\n\n                                    if (\n                                        height > 0 &&\n                                        height !==\n                                            lastHeight\n                                    ) {\n                                        lastHeight =\n                                            height;\n\n                                        window.parent\n                                            .postMessage(\n                                                {\n                                                    type:\n                                                        \"cms-renderer-height\",\n\n                                                    height:\n                                                        height\n                                                },\n                                                \"*\"\n                                            );\n                                    }\n                                }\n                            );\n                    }\n\n\n                    /*\n                    * Initial\n                    */\n                    reportHeight();\n\n\n                    window.addEventListener(\n                        \"load\",\n                        reportHeight\n                    );\n\n\n                    window.addEventListener(\n                        \"resize\",\n                        reportHeight\n                    );\n\n\n                    /*\n                    * Fonts\n                    */\n                    if (document.fonts?.ready) {\n                        document.fonts.ready\n                            .then(reportHeight)\n                            .catch(() => {});\n                    }\n\n\n                    /*\n                    * Images\n                    */\n                    document\n                        .querySelectorAll(\"img\")\n                        .forEach((img) => {\n\n                            if (!img.complete) {\n                                img.addEventListener(\n                                    \"load\",\n                                    reportHeight\n                                );\n\n                                img.addEventListener(\n                                    \"error\",\n                                    reportHeight\n                                );\n                            }\n                        });\n\n\n                    /*\n                    * Resize observer\n                    */\n                    if (\n                        \"ResizeObserver\"\n                        in window\n                    ) {\n                        const observer =\n                            new ResizeObserver(\n                                reportHeight\n                            );\n\n                        const root =\n                            document.getElementById(\n                                \"cms-renderer-root\"\n                            );\n\n                        const content =\n                            document.getElementById(\n                                \"cms-renderer-content\"\n                            );\n\n                        if (root) {\n                            observer.observe(root);\n                        }\n\n                        if (content) {\n                            observer.observe(\n                                content\n                            );\n                        }\n                    }\n\n\n                    /*\n                    * DOM changes\n                    */\n                    if (\n                        \"MutationObserver\"\n                        in window\n                    ) {\n                        const mutations =\n                            new MutationObserver(\n                                reportHeight\n                            );\n\n                        mutations.observe(\n                            document.body,\n                            {\n                                subtree: true,\n                                childList: true,\n                                attributes: true,\n                                characterData: true\n                            }\n                        );\n                    }\n\n\n                    /*\n                    * Useful for Framer direct-load\n                    * hydration and external fonts.\n                    */\n                    setTimeout(\n                        reportHeight,\n                        0\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        50\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        150\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        300\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        750\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        1500\n                    );\n\n                    setTimeout(\n                        reportHeight,\n                        3000\n                    );\n\n                })();\n            </script>\n        `;function createDocument(source){const value=source?.trim()||\"\";if(!value){return\"\";}const isFullDocument=/<!doctype/i.test(value)||/<html[\\s>]/i.test(value);let userHead=\"\";let userBody=value;if(isFullDocument){const headMatch=value.match(/<head[^>]*>([\\s\\S]*?)<\\/head>/i);if(headMatch){userHead=headMatch[1];}const bodyMatch=value.match(/<body[^>]*>([\\s\\S]*?)<\\/body>/i);if(bodyMatch){userBody=bodyMatch[1];}}return`\n                <!DOCTYPE html>\n\n                <html>\n\n                    <head>\n\n                        <meta\n                            charset=\"UTF-8\"\n                        />\n\n                        <meta\n                            name=\"viewport\"\n                            content=\"width=device-width, initial-scale=1.0\"\n                        />\n\n                        ${userHead}\n\n                        ${rendererCSS}\n\n                    </head>\n\n\n                    <body>\n\n                        <div\n                            id=\"cms-renderer-root\"\n                        >\n\n                            <div\n                                id=\"cms-renderer-content\"\n                            >\n\n                                ${userBody}\n\n                            </div>\n\n                        </div>\n\n\n                        ${resizeScript}\n\n                    </body>\n\n                </html>\n            `;}/*\n     * During SSR / first hydration:\n     * don't create an iframe yet.\n     */if(!isClient){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:1,overflow:\"hidden\"}});}/*\n     * CMS value may briefly be empty while\n     * Framer hydrates it.\n     */if(!code||!code.trim()){return /*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",minHeight:1}});}/*\n     * Forces a NEW iframe whenever the CMS\n     * code changes.\n     *\n     * Important for CMS navigation/hydration.\n     */const iframeKey=`${code.length}-${code.slice(0,50)}`;return /*#__PURE__*/_jsx(\"iframe\",{ref:iframeRef,srcDoc:createDocument(code),title:\"CMS Code Renderer\",sandbox:\" allow-scripts allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox \",style:{display:\"block\",width:\"100%\",height:`${contentHeight}px`,border:0,margin:0,padding:0,overflow:\"hidden\",background:\"transparent\"}},iframeKey);}CMSCodeRenderer.defaultProps={code:\"\",horizontalAlign:\"center\",verticalAlign:\"top\",contentWidth:\"100%\",padding:0,minHeight:0,background:\"transparent\"};addPropertyControls(CMSCodeRenderer,{code:{type:ControlType.String,title:\"Code\",displayTextArea:true,defaultValue:\"\"},horizontalAlign:{type:ControlType.Enum,title:\"Horizontal\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"center\",displaySegmentedControl:true},verticalAlign:{type:ControlType.Enum,title:\"Vertical\",options:[\"top\",\"center\",\"bottom\"],optionTitles:[\"Top\",\"Center\",\"Bottom\"],defaultValue:\"top\",displaySegmentedControl:true},contentWidth:{type:ControlType.String,title:\"Content Width\",defaultValue:\"100%\",placeholder:\"100%, 560px, 800px...\"},padding:{type:ControlType.Number,title:\"Padding\",defaultValue:0,min:0,max:200,step:1,unit:\"px\"},minHeight:{type:ControlType.Number,title:\"Min Height\",defaultValue:0,min:0,max:2e3,step:10,unit:\"px\"},background:{type:ControlType.Color,title:\"Background\",defaultValue:\"rgba(0,0,0,0)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CMSCodeRenderer\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DynamicCMSCode.map"],"mappings":"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"}