{"version":3,"file":"Calculator.DsXFManZ.mjs","names":["useState","useRef","result","_Fragment"],"sources":["https:/framerusercontent.com/modules/nmjuqGu6WzA3AozVqEXA/UyLmL57YOb0aeeq4X7rD/Calculator.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useRef,useState}from\"react\";// Import the necessary Framer functions\nimport{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */// Define the Calculator component\nexport default function Calculator(props){const maxAmount=props.question1.maxValue;const maxDuration=props.question2.maxValue;const[amount,setAmount]=useState(props.question1.default);const[duration,setDuration]=useState(props.question2.default);const[amountThumbPos,setAmountThumbPos]=useState(amount/maxAmount*100+\"%\");const[durationThumbPos,setDurationThumbPos]=useState(duration/maxDuration*100+\"%\");const amountEle=useRef();const durationEle=useRef();const durationInput=useRef();const amountInput=useRef();const hanleDeposit=()=>{const value1=amountInput.current.value;setAmount(amountInput.current.value);setAmountThumbPos(value1/maxAmount*100+\"%\");};const hanleDuration=()=>{const value1=durationInput.current.value;setDuration(value1);setDurationThumbPos(value1/maxDuration*100+\"%\");};let increament=Number(duration)*50;const evaluateFormula=formula=>{try{// Replace Q1 and Q2 with their respective values\nconst evaluatedFormula=formula.replace(\"Q1\",amount).replace(\"Q2\",duration);// Use the eval function to calculate the result\nconst result=eval(evaluatedFormula);// Ensure the result is a number and not NaN\nreturn isNaN(result)?0:result;}catch(error){console.error(\"Error evaluating formula:\",error);return 0;}};// Calculate the result using the provided formula\nconst result=evaluateFormula(props.formula);const styles={box:{background:props.backgroundColor,borderRadius:\"16px\",padding:\"40px\",color:props.textColor,fontFamily:props.bodyFont.fontFamily},title:{fontSize:\"28px\",fontStyle:\"normal\",fontWeight:500,lineHeight:\"110%\",textAlign:\"center\",letterSpacing:\"-1px\",marginBottom:\"40px\"},subtitle:{fontFamily:\"Figtree\",fontSize:\"18px\",fontStyle:\"normal\",fontWeight:500,lineHeight:\"170%\",marginBottom:\"10px\",color:props.textColor},totalBox:{borderRadius:\"16px\",background:props.totalboxColor,padding:\"40px\",textAlign:\"center\",marginTop:\"40px\"},totalBoxTitle:{fontSize:\"40px\",fontStyle:\"normal\",fontWeight:600,lineHeight:\"110%\",letterSpacing:\"-2px\",marginBottom:\"8px\",color:props.resultTextColor},totalBoxPara:{fontFamily:\"Figtree\",fontSize:\"18px\",fontStyle:\"normal\",fontWeight:400,lineHeight:\"120%\",color:props.textColor},rangeThumb:{backgroundColor:\"#ffff\",minWidth:\"20px\",borderRadius:\"13px\",position:\"absolute\",zIndex:222,top:\"50%\",transform:\"translate(-50%, -50%)\",pointerEvents:\"none\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",color:\"#081717\",fontFamily:\"Figtree\",fontSize:\"12px\",fontWeight:600,lineHeight:\"150%\",padding:\"3px 10px\"},rangeWrap:{position:\"relative\",marginBottom:\"32px\"},progress:{background:\"#FC3E13\",width:\"50%\",position:\"absolute\",borderRadius:\"0.5rem\",height:\"0.5rem\",marginTop:\"3px\",bottom:\"0\",top:\"0\",transform:\"translatey(-50%, -50%)\",pointerEvents:\"none\"}};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:`\n.range {\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n}\n.range:focus {\n  outline: none;\n}\n.range::-webkit-slider-runnable-track {\n  background-color: #081717;\n  opacity: 0.3;\n  border-radius: 0.5rem;\n  height: 0.5rem;\n}\n.range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  margin-top: -12px;\n  background-color: transparent;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n}\n.range:focus::-webkit-slider-thumb {\n  border: none;\n  outline: none;\n  outline-offset: none;\n}\n.range::-moz-range-track {\n  background-color: #081717;\n  opacity: 0.3;\n  border-radius: 0.5rem;\n  height: 0.5rem;\n}\n.range::-moz-range-thumb {\n  border: none;\n  border-radius: 0;\n  background-color: transparent;\n  height: 24px;\n  width: 24px;\n  border-radius: 50%;\n}\n.range:focus::-moz-range-thumb {\n  border: none;\n  outline: none;\n  outline-offset: none;\n}`}),/*#__PURE__*/_jsxs(\"div\",{className:\"box\",style:styles.box,children:[/*#__PURE__*/_jsx(\"h1\",{className:\"slideTitle\",style:styles.title,children:props.title}),/*#__PURE__*/_jsxs(\"h4\",{className:\"slideSubTitle\",style:styles.subtitle,children:[props.question1.title,\" (\",amount,\")\"]}),/*#__PURE__*/_jsxs(\"div\",{className:\"rangeWrap\",style:styles.rangeWrap,children:[/*#__PURE__*/_jsx(\"input\",{className:\"range\",ref:amountInput,type:\"range\",min:props.question1.minValue,max:maxAmount,value:amount,step:props.question1.incValue,onInput:hanleDeposit}),/*#__PURE__*/_jsx(\"div\",{className:\"progress\",style:{...styles.progress,width:amountThumbPos}}),/*#__PURE__*/_jsx(\"div\",{className:\"rangeThumb\",ref:amountEle,style:{...styles.rangeThumb,left:amountThumbPos},children:amount})]}),/*#__PURE__*/_jsxs(\"h4\",{className:\"slideSubTitle\",style:styles.subtitle,children:[props.question2.title,\" (\",duration,\" \",props.question2.dynamicDataName,\")\"]}),/*#__PURE__*/_jsxs(\"div\",{className:\"rangeWrap\",style:styles.rangeWrap,children:[/*#__PURE__*/_jsx(\"input\",{className:\"range\",ref:durationInput,type:\"range\",min:props.question2.minValue,step:props.question2.incValue,max:maxDuration,value:duration,onInput:hanleDuration}),/*#__PURE__*/_jsx(\"div\",{className:\"progress\",style:{...styles.progress,width:durationThumbPos}}),/*#__PURE__*/_jsx(\"div\",{className:\"rangeThumb\",ref:durationEle,style:{...styles.rangeThumb,left:durationThumbPos},children:duration})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"totalBox\",style:styles.totalBox,children:[/*#__PURE__*/_jsxs(\"h2\",{style:styles.totalBoxTitle,children:[\"$\",result===0?Number(amount)===0?0:Number(amount)+Number(increament):result]}),/*#__PURE__*/_jsx(\"p\",{style:styles.totalBoxPara,children:\"Total cost per month\"})]})]})]});}addPropertyControls(Calculator,{title:{type:ControlType.String,title:\"Title\",defaultValue:\"How will your money grow?\"},question1:{type:ControlType.Object,title:\"Question 1\",controls:{title:{type:ControlType.String,title:\"Title\",defaultValue:\"Deposit Per Month\"},default:{type:ControlType.Number,title:\"Default Value\",defaultValue:0},minValue:{type:ControlType.Number,title:\"Min Value\",defaultValue:0},maxValue:{type:ControlType.Number,title:\"Max Value\",defaultValue:100},incValue:{type:ControlType.Number,title:\"Inc Value\",defaultValue:10}}},question2:{type:ControlType.Object,title:\"Question 2 (Q2)\",controls:{title:{type:ControlType.String,title:\"Title\",defaultValue:\"Deposit Per Month\"},dynamicDataName:{type:ControlType.String,title:\"Dynamic Data Name\",defaultValue:\"Month\"},default:{type:ControlType.Number,title:\"Default Value\",defaultValue:0},minValue:{type:ControlType.Number,title:\"Min Value\",defaultValue:0},maxValue:{type:ControlType.Number,title:\"Max Value\",defaultValue:100},incValue:{type:ControlType.Number,title:\"Inc Value\",defaultValue:10}}},formula:{type:ControlType.String,title:\"Formula\",defaultValue:\"(Q1 * Q2) % 10\"},bodyFont:{title:\"Body Font\",type:ControlType.Font,controls:\"family\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#ffffff\"},resultTextColor:{type:ControlType.Color,title:\"Result Text Color\",defaultValue:\"#000000\"},backgroundColor:{type:ControlType.Color,title:\"Background Color\",defaultValue:\"#217376\"},totalboxColor:{type:ControlType.Color,title:\"Total box Color\",defaultValue:\"#ffffff\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Calculator\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Calculator.map"],"mappings":"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"}