{"version":3,"file":"CountryInput.CMEgPDfC.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/txadBxzyc8xVP8tgxh1j/1tF1GrgTyNspcfcSvkWo/CountryInput.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useState,useEffect,useRef}from\"react\";import{motion}from\"framer-motion\";import{createBackground,Border,parsePadding,useInstanceId,Icon,HiddenInput}from\"https://framerusercontent.com/modules/DwWOdDzQZGCuvkNlbUjZ/hMz2wp3CWZkNwPJFGPgQ/FramerFormsShared.js\";import{countries,countryEmojis}from\"https://framerusercontent.com/modules/1LECUrurTpenvfDn1ShM/nL9gmnXABjh04Nl8aaL8/Countries.js\";import{CountryDropdown}from\"https://framerusercontent.com/modules/SRHLnHriy9CtZfYf0KJF/l79PAJhiVgI4zvdb2YN1/CountryDropdown.js\";import{dropdownProp,getSharedStyleControls}from\"https://framerusercontent.com/modules/PwJ4k4IqmEWPlM2ZI4Eu/Ow3xyrL3YR7stkg8VL2K/DropdownUtilities.js\";// ============================================================================\n// MAIN COMPONENT\n// ============================================================================\n/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicWidth 400\n * @framerDisableUnlink\n */export default function CountryInput(props){const{shadows,border,icon}=props;const id=useInstanceId();const isCanvas=RenderTarget.current()===RenderTarget.canvas;const[focused,setFocused]=useState(false);const[invalid,setInvalid]=useState(false);const[dropdownOpen,setDropdownOpen]=useState(false);const[searchQuery,setSearchQuery]=useState(\"\");const[selectedCountry,setSelectedCountry]=useState(props.defaultValue&&props.defaultValue!==\"none\"?props.defaultValue:\"\");// Update selectedCountry when defaultValue prop changes\nuseEffect(()=>{if(props.defaultValue&&props.defaultValue!==\"none\"){setSelectedCountry(props.defaultValue);}else{setSelectedCountry(\"\");}},[props.defaultValue]);const dropdownRef=useRef(null);const searchInputRef=useRef(null);const inputRef=useRef(null);const[pt,pr,pb,pl]=parsePadding(props.padding);// Filter countries based on search query\nconst filteredCountries=searchQuery?countries.filter((country,index)=>{const searchLower=searchQuery.toLowerCase();return country.toLowerCase().includes(searchLower)||props.flagEmojis&&(countryEmojis[index]+\" \"+country).toLowerCase().includes(searchLower);}):countries;// Close dropdown when clicking outside\nuseEffect(()=>{const handleClickOutside=event=>{const target=event.target;const isOutsideDropdown=dropdownRef.current&&!dropdownRef.current.contains(target);const isOutsideInput=inputRef.current&&!inputRef.current.contains(target);if(isOutsideDropdown&&isOutsideInput){setDropdownOpen(false);setSearchQuery(\"\");setFocused(false);}};if(dropdownOpen||focused){document.addEventListener(\"mousedown\",handleClickOutside);return()=>{document.removeEventListener(\"mousedown\",handleClickOutside);};}},[dropdownOpen,focused]);// Focus search input when dropdown opens\nuseEffect(()=>{if(dropdownOpen&&searchInputRef.current){setTimeout(()=>{searchInputRef.current?.focus();},100);}},[dropdownOpen]);function onFocus(){setFocused(true);setDropdownOpen(true);props.focusEvent?.();if(invalid){setInvalid(false);}}function onBlur(event){// Don't blur if clicking on dropdown\nconst relatedTarget=event.relatedTarget;if(dropdownRef.current?.contains(relatedTarget)||searchInputRef.current===relatedTarget){return;}if(!dropdownOpen){setFocused(false);setSearchQuery(\"\");props.blurEvent?.();}}function onInputClick(){setDropdownOpen(true);setFocused(true);props.focusEvent?.();if(invalid){setInvalid(false);}}function onCountrySelect(country){setSelectedCountry(country);setDropdownOpen(false);setSearchQuery(\"\");setFocused(false);inputRef.current?.blur();}const onInvalid=event=>{event.preventDefault();setInvalid(true);props.invalidEvent?.();};// Handle value restoration from FormPersistence\nfunction onSetValueEvent(event){const value=event.detail;if(!value||value===\"none\"){setSelectedCountry(\"\");return;}if(countries.includes(value)){setSelectedCountry(value);}}// Get display text for selected country\nconst getDisplayText=()=>{if(!selectedCountry||selectedCountry===\"none\"){return props.noneSelectedText||\"Select a country...\";}const countryIndex=countries.indexOf(selectedCountry);if(props.flagEmojis&&countryIndex>=0){return`${countryEmojis[countryIndex]} ${selectedCountry}`;}return selectedCountry;};return /*#__PURE__*/_jsxs(motion.div,{\"data-framerforms\":true,id:id,style:{position:\"relative\",borderRadius:props.radius},initial:false,transition:props.transition,children:[/*#__PURE__*/_jsx(HiddenInput,{name:props.name,required:props.required&&!selectedCountry,value:selectedCountry,setInvalid:setInvalid,onSetValueEvent:onSetValueEvent}),/*#__PURE__*/_jsx(CountryDropdown,{isOpen:dropdownOpen,dropdownRef:dropdownRef,searchInputRef:searchInputRef,searchQuery:searchQuery,onSearchChange:setSearchQuery,filteredCountries:filteredCountries,selectedCountry:selectedCountry,onCountrySelect:onCountrySelect,containerId:id,fill:props.fill,color:props.color,font:props.font,isCanvas:isCanvas,showDropdown:props.showDropdown,showFlags:props.flagEmojis,showDialCodes:false,pinnedCountries:props.pinnedCountries,dropdownStyle:props.dropdown,borderRadius:props.radius,padding:props.padding,placeholderColor:props.placeholderColor||props.color+\"80\",bgBlur:props.bgBlur}),/*#__PURE__*/_jsxs(motion.div,{ref:inputRef,onClick:onInputClick,onFocus:onFocus,onBlur:onBlur,tabIndex:0,animate:{...createBackground(props.fill,null,focused,invalid),boxShadow:invalid&&shadows?.invalid||focused&&shadows?.focus||shadows?.default},style:{position:\"relative\",borderRadius:props.radius,cursor:\"pointer\",backdropFilter:props.bgBlur?`blur(${props.bgBlur}px)`:undefined,...props.style},initial:false,transition:props.transition,children:[/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",alignItems:\"center\",padding:icon?`${pt}px ${pr+icon.size+8}px ${pb}px ${pl}px`:props.padding,color:selectedCountry?props.color:props.placeholderColor||props.color+\"80\",textOverflow:\"ellipsis\",overflow:\"hidden\",whiteSpace:\"nowrap\",...props.font},children:getDisplayText()}),icon&&/*#__PURE__*/_jsx(Icon,{...icon,style:{position:\"absolute\",right:pr,top:\"50%\",transform:\"translateY(-50%)\",pointerEvents:\"none\"},defaultImage:`url('data:image/svg+xml,')`}),/*#__PURE__*/_jsx(Border,{...props.border,borderColor:invalid&&border?.colorInvalid||focused&&border?.colorFocus||border?.color,transition:props.transition})]}),/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:`#${id} [tabindex]:focus { outline: none; }`}})]});}CountryInput.displayName=\"Country Input\";addPropertyControls(CountryInput,{name:{type:ControlType.String,defaultValue:\"Country\"},showDropdown:{type:ControlType.Boolean,defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\",title:\"Dropdown\"},dropdown:dropdownProp(),required:{type:ControlType.Boolean,defaultValue:false},autoFocus:{type:ControlType.Boolean,defaultValue:false,title:\"Auto-Focus\"},pinnedCountries:{type:ControlType.Array,defaultValue:[],control:{type:ControlType.Enum,options:countries},title:\"Pinned\"},defaultValue:{type:ControlType.Enum,defaultValue:\"none\",options:[\"none\",...countries],optionTitles:[\"None\",...countries]},noneSelectedText:{title:\"Placeholder\",type:ControlType.String,defaultValue:\"Select a country...\",hidden:props=>props.defaultValue!==\"none\"},flagEmojis:{type:ControlType.Boolean,defaultValue:true},// Shared style controls - includes placeholderColor with default from SHARED_DEFAULTS\n// Component-specific controls (like noneSelectedText above) are defined separately\n// To override a default value, pass it as an option:\n// Example: color: \"#999999\" to override the default color\n// Example: placeholderColor: \"#666\" to override the default placeholder color\n// See DropdownUtilities.tsx SHARED_DEFAULTS for all available defaults\n...getSharedStyleControls({invalid:true})});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CountryInput\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],"mappings":"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"}