{"version":3,"file":"StyledMapboxAddressAutocomplete.BTFVHuPi.mjs","names":["useState","useRef","useCallback","startTransition"],"sources":["https:/framerusercontent.com/modules/yol1jKbKBLGH3I5mtOZ7/0B24i7L9HnjWrMjbRwR9/StyledMapboxAddressAutocomplete.js"],"sourcesContent":["// Styled Mapbox Address Autocomplete Component with customizable API, language, and styling\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * Styled Mapbox Address Autocomplete\n * \n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 50\n * \n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function StyledMapboxAddressAutocomplete(props){const{apiToken,language=\"de\",worldwide=false,countries=\"\",required=false,placeholder=\"Adresse eingeben...\",name=\"address\",textColor,font,inputBackgroundColor,inputBorderColor,inputBorderRadius,inputPadding,focusBorderColor,focusShadow,dropdownBackgroundColor,dropdownBorderColor,dropdownBorderRadius,dropdownItemHoverColor,dropdownItemTextColor,dropdownItemFont,dropdownMaxHeight,onAddressSelect,style}=props;const[query,setQuery]=useState(\"\");const[suggestions,setSuggestions]=useState([]);const[isOpen,setIsOpen]=useState(false);const[isFocused,setIsFocused]=useState(false);const[selectedIndex,setSelectedIndex]=useState(-1);const inputRef=useRef(null);const dropdownRef=useRef(null);const debounceTimer=useRef(null);const fetchSuggestions=useCallback(async searchText=>{if(!searchText.trim()||!apiToken){startTransition(()=>{setSuggestions([]);setIsOpen(false);});return;}try{let url=`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(searchText)}.json?access_token=${apiToken}&language=${language}&limit=5`;if(!worldwide&&countries){url+=`&country=${countries}`;}const response=await fetch(url);const data=await response.json();if(data.features){startTransition(()=>{setSuggestions(data.features);setIsOpen(true);setSelectedIndex(-1);});}}catch(error){console.error(\"Error fetching suggestions:\",error);startTransition(()=>{setSuggestions([]);setIsOpen(false);});}},[apiToken,language,worldwide,countries]);const handleInputChange=e=>{const value=e.target.value;setQuery(value);if(debounceTimer.current){clearTimeout(debounceTimer.current);}debounceTimer.current=window.setTimeout(()=>{fetchSuggestions(value);},300);};const handleSelectSuggestion=suggestion=>{startTransition(()=>{setQuery(suggestion.place_name);setIsOpen(false);setSuggestions([]);});if(onAddressSelect){onAddressSelect(suggestion.place_name,suggestion.center);}};const handleKeyDown=e=>{if(!isOpen||suggestions.length===0)return;switch(e.key){case\"ArrowDown\":e.preventDefault();startTransition(()=>{setSelectedIndex(prev=>prev<suggestions.length-1?prev+1:prev);});break;case\"ArrowUp\":e.preventDefault();startTransition(()=>{setSelectedIndex(prev=>prev>0?prev-1:-1);});break;case\"Enter\":e.preventDefault();if(selectedIndex>=0&&selectedIndex<suggestions.length){handleSelectSuggestion(suggestions[selectedIndex]);}break;case\"Escape\":startTransition(()=>{setIsOpen(false);setSelectedIndex(-1);});break;}};useEffect(()=>{const handleClickOutside=event=>{if(inputRef.current&&!inputRef.current.contains(event.target)&&dropdownRef.current&&!dropdownRef.current.contains(event.target)){startTransition(()=>setIsOpen(false));}};if(typeof window!==\"undefined\"){document.addEventListener(\"mousedown\",handleClickOutside);return()=>document.removeEventListener(\"mousedown\",handleClickOutside);}},[]);useEffect(()=>{if(selectedIndex>=0&&dropdownRef.current){const selectedElement=dropdownRef.current.children[selectedIndex];if(selectedElement){selectedElement.scrollIntoView({block:\"nearest\",behavior:\"smooth\"});}}},[selectedIndex]);const isFixedWidth=style?.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",...style},children:[/*#__PURE__*/_jsx(\"input\",{ref:inputRef,type:\"text\",name:name,value:query,onChange:handleInputChange,onKeyDown:handleKeyDown,onFocus:()=>startTransition(()=>setIsFocused(true)),onBlur:()=>startTransition(()=>setIsFocused(false)),placeholder:placeholder,required:required,style:{width:\"100%\",padding:`${inputPadding}px`,backgroundColor:inputBackgroundColor,color:textColor,border:`1px solid ${isFocused?focusBorderColor:inputBorderColor}`,borderRadius:`${inputBorderRadius}px`,outline:\"none\",boxShadow:isFocused?focusShadow:\"none\",transition:\"all 0.2s ease\",...font,boxSizing:\"border-box\"},\"aria-label\":\"Address search\",\"aria-autocomplete\":\"list\",\"aria-expanded\":isOpen,\"aria-controls\":\"suggestions-dropdown\"}),isOpen&&suggestions.length>0&&/*#__PURE__*/_jsx(\"div\",{ref:dropdownRef,id:\"suggestions-dropdown\",role:\"listbox\",style:{position:\"absolute\",top:\"calc(100% + 4px)\",left:0,right:0,backgroundColor:dropdownBackgroundColor,border:`1px solid ${dropdownBorderColor}`,borderRadius:`${dropdownBorderRadius}px`,maxHeight:`${dropdownMaxHeight}px`,overflowY:\"auto\",boxShadow:\"0 4px 12px rgba(0, 0, 0, 0.15)\",zIndex:1e3},children:suggestions.map((suggestion,index)=>/*#__PURE__*/_jsx(\"div\",{role:\"option\",\"aria-selected\":index===selectedIndex,onClick:()=>handleSelectSuggestion(suggestion),onMouseEnter:()=>startTransition(()=>setSelectedIndex(index)),style:{padding:`${inputPadding}px`,cursor:\"pointer\",backgroundColor:index===selectedIndex?dropdownItemHoverColor:\"transparent\",color:dropdownItemTextColor,transition:\"background-color 0.15s ease\",...dropdownItemFont},children:suggestion.place_name},`${suggestion.place_name}-${index}`))})]});}addPropertyControls(StyledMapboxAddressAutocomplete,{apiToken:{type:ControlType.String,title:\"Mapbox Token\",defaultValue:\"pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJjbGV4YW1wbGUifQ.example\",placeholder:\"pk.eyJ...\"},name:{type:ControlType.String,title:\"Field Name\",defaultValue:\"address\",placeholder:\"address\"},language:{type:ControlType.String,title:\"Language\",defaultValue:\"de\",placeholder:\"de, en, fr, es...\"},worldwide:{type:ControlType.Boolean,title:\"Worldwide\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},countries:{type:ControlType.String,title:\"Countries\",defaultValue:\"ch,li\",placeholder:\"ch,li or us,gb\",hidden:({worldwide})=>worldwide},required:{type:ControlType.Boolean,title:\"Required\",defaultValue:false,enabledTitle:\"Yes\",disabledTitle:\"No\"},placeholder:{type:ControlType.String,title:\"Placeholder\",defaultValue:\"Adresse eingeben...\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",defaultValue:{fontSize:\"16px\",variant:\"Regular\",letterSpacing:\"0em\",lineHeight:\"1.5em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},inputBackgroundColor:{type:ControlType.Color,title:\"Input Background\",defaultValue:\"#F5F5F5\"},inputBorderColor:{type:ControlType.Color,title:\"Input Border\",defaultValue:\"#EEEEEE\"},inputBorderRadius:{type:ControlType.Number,title:\"Input Radius\",defaultValue:12,min:0,max:32,step:1,unit:\"px\"},inputPadding:{type:ControlType.Number,title:\"Input Padding\",defaultValue:16,min:4,max:32,step:1,unit:\"px\"},focusBorderColor:{type:ControlType.Color,title:\"Focus Border\",defaultValue:\"#CCCCCC\"},focusShadow:{type:ControlType.String,title:\"Focus Shadow\",defaultValue:\"0 0 0 2px rgba(0, 0, 0, 0.05)\"},dropdownBackgroundColor:{type:ControlType.Color,title:\"Dropdown Background\",defaultValue:\"#FFFFFF\"},dropdownBorderColor:{type:ControlType.Color,title:\"Dropdown Border\",defaultValue:\"#EEEEEE\"},dropdownBorderRadius:{type:ControlType.Number,title:\"Dropdown Radius\",defaultValue:12,min:0,max:32,step:1,unit:\"px\"},dropdownItemHoverColor:{type:ControlType.Color,title:\"Item Hover Color\",defaultValue:\"#F5F5F5\"},dropdownItemTextColor:{type:ControlType.Color,title:\"Item Text Color\",defaultValue:\"#000000\"},dropdownItemFont:{type:ControlType.Font,title:\"Dropdown Font\",defaultValue:{fontSize:\"16px\",variant:\"Regular\",letterSpacing:\"0em\",lineHeight:\"1.5em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},dropdownMaxHeight:{type:ControlType.Number,title:\"Dropdown Max Height\",defaultValue:300,min:100,max:600,step:10,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StyledMapboxAddressAutocomplete\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerIntrinsicHeight\":\"50\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StyledMapboxAddressAutocomplete.map"],"mappings":"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"}