{"version":3,"file":"InitializePhoneInput.BBbP_z-e.mjs","names":[],"sources":["https:/framerusercontent.com/modules/1X5jO3AH6uITmSyt43OF/tGwbB0QzHlmx4NTjPGEa/InitializePhoneInput.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";const intlTelInputCss=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css\";const intlTelInputJs=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js\";const utilsScript=\"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js\";const countryData=[{name:\"Afghanistan\",code:\"af\",dial_code:\"+93\"}];export function InitializePhoneInput({enableGeolocation,defaultCountry}){useEffect(()=>{console.log(\"Initializing Phone Input\");// Load the intl-tel-input CSS\nconst link=document.createElement(\"link\");link.rel=\"stylesheet\";link.href=intlTelInputCss;document.head.appendChild(link);// Load the intl-tel-input JS\nconst script=document.createElement(\"script\");script.src=intlTelInputJs;document.body.appendChild(script);script.onload=()=>{const inputs=document.querySelectorAll(\"input[type='tel']\");inputs.forEach(input=>{let userSelectedCountry=false// Track if user manually selects a country\n;const iti=window.intlTelInput(input,{initialCountry:enableGeolocation?\"auto\":defaultCountry||\"us\",geoIpLookup:enableGeolocation?callback=>{fetch(\"https://ipinfo.io/json\").then(res=>res.json()).then(data=>callback(data.country||\"us\"))// Fallback if no country data\n.catch(()=>callback(\"us\"));}:undefined,utilsScript:utilsScript,separateDialCode:true,autoHideDialCode:false,dropdownContainer:document.body,customPlaceholder:placeholder=>`e.g. ${placeholder}`});iti.promise.then(()=>{const setDialCodeWithSpace=()=>{const dialCode=iti.getSelectedCountryData().dialCode;const dialCodeWithPlusAndSpace=`+${dialCode} `// Add a space after the dial code\n;input.value=dialCodeWithPlusAndSpace;};setDialCodeWithSpace();// Handle manual country selection to lock it\ninput.addEventListener(\"countrychange\",()=>{userSelectedCountry=true// User manually selected a country\n;});// Move cursor to the end of the dial code and space on focus\ninput.addEventListener(\"focus\",()=>{setTimeout(()=>{const dialCodeLength=iti.getSelectedCountryData().dialCode.length+2// +2 for '+' and the space\n;input.setSelectionRange(dialCodeLength,dialCodeLength);},0);});// Prevent cursor moving before the space after the dial code\ninput.addEventListener(\"click\",()=>{const dialCodeLength=iti.getSelectedCountryData().dialCode.length+2// +2 for '+' and the space\n;if(input.selectionStart<dialCodeLength){input.setSelectionRange(dialCodeLength,dialCodeLength);}});// Prevent removing the space after the dial code\ninput.addEventListener(\"keydown\",e=>{const dialCodeLength=iti.getSelectedCountryData().dialCode.length+2// +2 for '+' and the space\n;// Prevent Backspace or Delete from removing the space after the dial code\nif(e.key===\"Backspace\"&&input.selectionStart<=dialCodeLength||e.key===\"Delete\"&&input.selectionStart<dialCodeLength){e.preventDefault();}// Handle Cmd+Backspace or Ctrl+Backspace\nif(e.key===\"Backspace\"&&(e.metaKey||e.ctrlKey)){e.preventDefault();input.value=input.value.slice(0,dialCodeLength)// Keep only the dial code and space\n;setTimeout(()=>{input.setSelectionRange(dialCodeLength,dialCodeLength);},0);}});// Ensure the space is maintained on input\ninput.addEventListener(\"input\",()=>{const dialCodeWithPlusAndSpace=`+${iti.getSelectedCountryData().dialCode} `;if(!input.value.startsWith(dialCodeWithPlusAndSpace)){input.value=dialCodeWithPlusAndSpace+input.value.slice(dialCodeWithPlusAndSpace.length).trimStart();input.setSelectionRange(dialCodeWithPlusAndSpace.length,dialCodeWithPlusAndSpace.length);}});// Prevent reverting to geolocation after manual selection\nif(enableGeolocation){input.addEventListener(\"blur\",()=>{if(userSelectedCountry){const selectedCountry=iti.getSelectedCountryData().iso2;iti.setCountry(selectedCountry)// Lock to manually selected country\n;}});}// Append full number on form submission\nconst form=input.closest(\"form\");if(form){form.addEventListener(\"submit\",()=>{const fullNumber=iti.getNumber();input.value=fullNumber;});}});});};script.onerror=()=>console.error(\"Failed to load intl-tel-input JS\");return()=>{document.head.removeChild(link);document.body.removeChild(script);};},[enableGeolocation,defaultCountry]);const isFramerEditor=typeof window!==\"undefined\"&&window.location.href.includes(\"framer.com\");const hiddenStyle=isFramerEditor?{}:{display:\"none\",padding:0};return /*#__PURE__*/_jsxs(\"div\",{style:hiddenStyle,children:[/*#__PURE__*/_jsx(\"p\",{children:\"Phone\"}),/*#__PURE__*/_jsx(\"style\",{children:`\n                .phone-mask-form {\n                    overflow: visible !important;\n                }\n                .phone-mask-form .framer-form-input-wrapper {\n                    overflow: visible !important;\n                }\n                .intl-tel-input {\n                    width: 100%;\n                    position: relative;\n                }\n                .intl-tel-input .selected-flag {\n                    border-radius: 5px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n                .intl-tel-input .selected-dial-code {\n                    display: none !important; /* Completely hides the country code */\n                }\n                .intl-tel-input input[type=\"tel\"] {\n                    border: none;\n                    background: none;\n                    position: absolute;\n                    left: 0;\n                    top: 0;\n                    width: 100%;\n                    height: 100%;\n                    opacity: 0; /* Hides the input completely but keeps it interactive */\n                    pointer-events: none; /* Prevents any interaction on the actual input field */\n                }\n                .iti__selected-dial-code {\n                    display:none;\n                }\n                /* Customizing the dropdown */\n                .iti__dropdown {\n                    background-color: #f9f9f9; /* Light background for the dropdown */\n                    border: 1px solid #ddd; /* Border around the dropdown */\n                    border-radius: 5px; /* Rounded corners */\n                    font-family: 'Arial', sans-serif; /* Custom font */\n                }\n\n                /* Customizing each list item */\n                .iti__country {\n                    padding: 10px; /* More padding for each item */\n                    color: #333; /* Custom text color */\n                }\n\n                .iti__country:hover {\n                    background-color: #EDEAFD; /* Highlight on hover */\n                    color: #0056b3; /* Change text color on hover */\n                }\n                \n                .iti__flag {\n                    border-radius: 2px; /* Rounded flags */\n                }\n                .iti__country-list {\n                    border-radius: 8px;\n                    border: 1px solid #888888;\n                }\n                .iti__country-name {\n                    font-family: 'Inter';\n                    font-size: 14px;\n                    font-weight: 500;\n                    letter-spacing: -.5px;\n                }\n                .iti__dial-code {\n                    font-size: 14px;\n                }\n            `})]});}addPropertyControls(InitializePhoneInput,{enableGeolocation:{type:ControlType.Boolean,title:\"IP Detect\",defaultValue:true},defaultCountry:{type:ControlType.Enum,title:\"Default Country\",options:countryData.map(country=>country.code),optionTitles:countryData.map(country=>country.name),hidden:props=>props.enableGeolocation}});InitializePhoneInput.displayName=\"Phone Mask Configuration\";\nexport const __FramerMetadata__ = {\"exports\":{\"InitializePhoneInput\":{\"type\":\"reactComponent\",\"name\":\"InitializePhoneInput\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./InitializePhoneInput.map"],"mappings":"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"}